Kustomisasi bilah judul
Windows menyediakan bilah judul default untuk setiap jendela dan memungkinkan Anda menyesuaikannya agar sesuai dengan kepribadian aplikasi Anda. Bilah judul default dilengkapi dengan beberapa komponen standar dan fungsionalitas inti seperti menyeret dan mengubah ukuran jendela.
Lihat artikel Desain bilah judul untuk panduan tentang menyesuaikan bilah judul aplikasi Anda, konten area bilah judul yang dapat diterima, dan pola UI yang direkomendasikan.
Catatan
Artikel ini memperlihatkan cara mengkustomisasi bilah judul untuk aplikasi yang menggunakan UWP dan WinUI 2. Untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, lihat Kustomisasi bilah judul untuk SDK Aplikasi Windows.
Jika Anda mempertimbangkan untuk memigrasikan aplikasi UWP Anda ke SDK Aplikasi Windows, lihat panduan migrasi fungsionalitas windowing kami. Lihat Migrasi fungsionalitas windowing untuk informasi selengkapnya.
- Berlaku untuk: UWP/WinUI 2
- API Penting: Properti ApplicationView.TitleBar, kelas ApplicationViewTitleBar, kelas CoreApplicationViewTitleBar
Daftar ini menjelaskan komponen bilah judul standar.
- Persegi bilah judul
- Teks judul
- Menu sistem - diakses dengan mengklik ikon aplikasi atau mengklik kanan bilah judul
- Kontrol keterangan
- Tombol Minimalkan
- Tombol Maksimalkan/Pulihkan
- Tombol Tutup
Di aplikasi UWP, Anda dapat menyesuaikan bilah judul dengan menggunakan anggota kelas ApplicationView dan CoreApplicationView . Ada beberapa API untuk memodifikasi tampilan bilah judul Anda secara progresif berdasarkan tingkat penyesuaian yang diperlukan.
Catatan
Kelas Windows.UI.WindowManagement.AppWindow , yang digunakan untuk jendela sekunder di aplikasi UWP, tidak mendukung kustomisasi bilah judul. Untuk menyesuaikan bilah judul aplikasi UWP yang menggunakan jendela sekunder, gunakan ApplicationView seperti yang dijelaskan dalam Menampilkan beberapa tampilan dengan ApplicationView.
Ada dua tingkat kustomisasi yang dapat Anda terapkan ke bilah judul: terapkan modifikasi kecil pada bilah judul default, atau perluas kanvas aplikasi Anda ke area bilah judul dan berikan konten kustom sepenuhnya.
Untuk penyesuaian sederhana, seperti mengubah warna bilah judul, Anda dapat mengatur properti pada objek bilah judul jendela aplikasi untuk menentukan warna yang ingin Anda gunakan untuk elemen bilah judul. Dalam hal ini, sistem mempertahankan tanggung jawab untuk semua aspek lain dari bilah judul, seperti menggambar judul aplikasi dan menentukan area seret.
Opsi Anda yang lain adalah menyembunyikan bilah judul default dan menggantinya dengan konten kustom Anda sendiri. Misalnya, Anda dapat menempatkan teks, kotak pencarian, atau menu kustom di area bilah judul. Anda juga perlu menggunakan opsi ini untuk memperluas backdrop material , seperti Mica, ke area bilah judul.
Saat Anda memilih kustomisasi penuh, Anda bertanggung jawab untuk menempatkan konten di area bilah judul, dan Anda dapat menentukan wilayah seret Anda sendiri. Kontrol keterangan (tombol Tutup, Minimalkan, dan Maksimalkan sistem) masih tersedia dan ditangani oleh sistem, tetapi elemen seperti judul aplikasi tidak. Anda harus membuat elemen tersebut sendiri sesuai kebutuhan aplikasi Anda.
Jika Anda hanya ingin mengkustomisasi warna atau ikon bilah judul, Anda dapat mengatur properti pada objek bilah judul untuk jendela aplikasi Anda.
Secara default, bilah judul menampilkan nama tampilan aplikasi sebagai judul jendela. Nama tampilan diatur dalam Package.appxmanifest
file.
Untuk menambahkan teks kustom ke judul, atur properti ApplicationView.Title ke nilai teks, seperti yang diperlihatkan di sini.
public MainPage()
{
this.InitializeComponent();
ApplicationView.GetForCurrentView().Title = "Custom text";
}
Teks Anda ditambahkan ke judul jendela, yang akan ditampilkan sebagai "teks kustom - nama tampilan aplikasi". Untuk menampilkan judul kustom tanpa nama tampilan aplikasi, Anda harus mengganti bilah judul default seperti yang ditunjukkan di bagian Kustomisasi penuh.
Contoh ini menunjukkan cara mendapatkan instans ApplicationViewTitleBar dan mengatur properti warnanya.
Kode ini dapat ditempatkan di metode OnLaunched aplikasi Anda (App.xaml.cs), setelah panggilan ke Window.Activate, atau di halaman pertama aplikasi Anda.
// using Windows.UI;
// using Windows.UI.ViewManagement;
var titleBar = ApplicationView.GetForCurrentView().TitleBar;
// Set active window colors
titleBar.ForegroundColor = Colors.White;
titleBar.BackgroundColor = Colors.Green;
titleBar.ButtonForegroundColor = Colors.White;
titleBar.ButtonBackgroundColor = Colors.SeaGreen;
titleBar.ButtonHoverForegroundColor = Colors.White;
titleBar.ButtonHoverBackgroundColor = Colors.DarkSeaGreen;
titleBar.ButtonPressedForegroundColor = Colors.Gray;
titleBar.ButtonPressedBackgroundColor = Colors.LightGreen;
// Set inactive window colors
titleBar.InactiveForegroundColor = Colors.Gainsboro;
titleBar.InactiveBackgroundColor = Colors.SeaGreen;
titleBar.ButtonInactiveForegroundColor = Colors.Gainsboro;
titleBar.ButtonInactiveBackgroundColor = Colors.SeaGreen;
Ada beberapa hal yang perlu diperhatikan saat mengatur warna bilah judul:
- Warna latar belakang tombol tidak diterapkan ke tombol tutup melayang dan status ditekan . Tombol tutup selalu menggunakan warna yang ditentukan sistem untuk status tersebut.
- Mengatur properti warna untuk
null
meresetnya ke warna sistem default. - Anda tidak dapat mengatur warna transparan. Saluran alfa warna diabaikan.
Windows memberi pengguna opsi untuk menerapkan warna aksen yang dipilih ke bilah judul. Jika Anda mengatur warna bilah judul apa pun, kami sarankan Anda secara eksplisit mengatur semua warna. Ini memastikan bahwa tidak ada kombinasi warna yang tidak diinginkan yang terjadi karena pengaturan warna yang ditentukan pengguna.
Saat Anda ikut serta dalam penyesuaian bilah judul lengkap, area klien aplikasi Anda diperluas untuk menutupi seluruh jendela, termasuk area bilah judul. Anda bertanggung jawab untuk menggambar dan menangani input untuk seluruh jendela kecuali tombol keterangan, yang masih disediakan oleh jendela.
Untuk menyembunyikan bilah judul default dan memperluas konten Anda ke area bilah judul, atur properti ExtendViewIntoTitleBar ke true
. Anda dapat mengatur properti ini di metode aplikasi OnLaunched
(App.xaml.cs), atau di halaman pertama aplikasi Anda.
Tip
Lihat bagian Contoh kustomisasi lengkap untuk melihat semua kode sekaligus.
Contoh ini menunjukkan cara mendapatkan CoreApplicationViewTitleBar dan mengatur properti ExtendViewIntoTitleBar ke true
.
using Windows.ApplicationModel.Core;
public MainPage()
{
this.InitializeComponent();
// Hide default title bar.
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
}
Tip
Pengaturan ini berlanjut saat aplikasi Anda ditutup dan dimulai ulang. Di Visual Studio, jika Anda mengatur ExtendViewIntoTitleBar
ke true
, lalu ingin kembali ke default, Anda harus secara eksplisit mengaturnya ke false
dan menjalankan aplikasi Anda untuk menimpa pengaturan yang dipertahankan.
Saat aplikasi diperluas ke area bilah judul, Anda bertanggung jawab untuk menentukan dan mengelola UI untuk bilah judul. Ini biasanya mencakup, minimal, menentukan teks judul dan wilayah seret. Wilayah seret bilah judul menentukan tempat pengguna dapat mengklik dan menyeret untuk memindahkan jendela. Ini juga tempat pengguna dapat mengklik kanan untuk menampilkan menu sistem.
Untuk mempelajari selengkapnya tentang konten bilah judul yang dapat diterima dan pola antarmuka pengguna yang direkomendasikan, lihat Desain bilah judul.
Anda menentukan wilayah seret dengan memanggil metode Window.SetTitleBar dan meneruskan UIElement yang menentukan wilayah seret. UIElement
(Biasanya adalah panel yang berisi elemen lain.) Properti ExtendViewIntoTitleBar
harus diatur ke true
agar panggilan SetTitleBar
memiliki efek apa pun.
Berikut cara mengatur Grid
konten sebagai wilayah bilah judul yang dapat diseret. Kode ini masuk ke XAML dan code-behind untuk halaman pertama aplikasi Anda.
<Grid x:Name="AppTitleBar" Background="Transparent">
<!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
<!-- Using padding columns instead of Margin ensures that the background
paints the area under the caption control buttons (for transparent buttons). -->
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
<Image Source="Assets/WindowIcon.png"
Grid.Column="1"
HorizontalAlignment="Left"
Width="16" Height="16"
Margin="8,0,0,0"/>
<TextBlock x:Name="AppTitleTextBlock"
Text="App title"
Style="{StaticResource CaptionTextBlockStyle}"
Grid.Column="1"
VerticalAlignment="Center"
Margin="28,0,0,0"/>
</Grid>
public MainPage()
{
this.InitializeComponent();
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
// Set XAML element as a drag region.
Window.Current.SetTitleBar(AppTitleBar);
}
Secara default, bilah judul sistem menampilkan nama tampilan aplikasi sebagai judul jendela. Nama tampilan diatur dalam file Package.appxmanifest. Anda bisa mendapatkan nilai ini dan menggunakannya di bilah judul kustom Anda seperti ini.
AppTitleTextBlock.Text = AppInfo.Current.DisplayInfo.DisplayName;
Penting
Wilayah seret yang Anda tentukan perlu diuji. Secara default, beberapa elemen UI, seperti Grid
, tidak berpartisipasi dalam pengujian hit ketika mereka tidak memiliki set latar belakang. Ini berarti, untuk beberapa elemen, Anda mungkin perlu mengatur kuas latar belakang transparan. Lihat komentar di VisualTreeHelper.FindElementsInHostCoordinates untuk informasi selengkapnya.
Misalnya, jika Anda menentukan Kisi sebagai wilayah seret, atur Background="Transparent"
untuk membuatnya dapat diseret.
Kisi ini tidak dapat diseret (tetapi elemen yang terlihat di dalamnya adalah): <Grid x:Name="AppTitleBar">
.
Kisi ini terlihat sama, tetapi seluruh Grid dapat diseret: <Grid x:Name="AppTitleBar" Background="Transparent">
.
Anda dapat menempatkan kontrol interaktif, seperti tombol, menu, atau kotak pencarian, di bagian atas aplikasi sehingga terlihat berada di bilah judul. Namun, ada beberapa aturan yang harus Anda ikuti untuk memastikan bahwa elemen interaktif Anda menerima input pengguna sambil tetap memungkinkan pengguna untuk memindahkan jendela Anda.
- Anda harus memanggil SetTitleBar untuk menentukan area sebagai wilayah bilah judul yang dapat diseret. Jika tidak, sistem mengatur wilayah seret default di bagian atas halaman. Sistem kemudian akan menangani semua input pengguna ke area ini, dan mencegah input mencapai kontrol Anda.
- Tempatkan kontrol interaktif Anda di atas wilayah seret yang ditentukan oleh panggilan ke SetTitleBar (dengan z-order yang lebih tinggi). Jangan membuat kontrol interaktif Anda anak-anak UIElement diteruskan ke
SetTitleBar
. Setelah Anda meneruskan elemen keSetTitleBar
, sistem memperlakukannya seperti bilah judul sistem dan menangani semua input pointer ke elemen tersebut.
Di sini, elemen AutoSuggestBox memiliki z-order yang lebih tinggi daripada AppTitleBar
, sehingga menerima input pengguna.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="AppTitleBar" Background="Transparent">
<!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
<!-- Using padding columns instead of Margin ensures that the background
paints the area under the caption control buttons (for transparent buttons). -->
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
<Image Source="Assets/WindowIcon.png"
Grid.Column="1"
HorizontalAlignment="Left"
Width="16" Height="16"
Margin="8,0,0,0"/>
<TextBlock x:Name="AppTitleTextBlock"
Text="App title"
Style="{StaticResource CaptionTextBlockStyle}"
Grid.Column="1"
VerticalAlignment="Center"
Margin="28,0,0,0"/>
</Grid>
<!-- This control has a higher z-order than AppTitleBar,
so it receives user input. -->
<AutoSuggestBox QueryIcon="Find"
PlaceholderText="Search"
HorizontalAlignment="Center"
Width="260" Height="32"/>
</Grid>
Sistem mencadangkan sudut kiri atas atau kanan atas jendela aplikasi untuk tombol keterangan sistem (minimalkan, maksimalkan/pulihkan, tutup). Sistem mempertahankan kontrol area tombol keterangan untuk menjamin bahwa fungsionalitas minimum disediakan untuk menyeret, meminimalkan, memaksimalkan, dan menutup jendela. Sistem menggambar tombol Tutup di kanan atas untuk bahasa kiri-ke-kanan dan kiri atas untuk bahasa kanan-ke-kiri.
Anda dapat menggambar konten di bawah area kontrol keterangan, seperti latar belakang aplikasi, tetapi Anda tidak boleh menempatkan UI apa pun yang Anda harapkan dapat berinteraksi dengan pengguna. Ini tidak menerima input apa pun karena input untuk kontrol keterangan ditangani oleh sistem.
Baris ini dari contoh sebelumnya menunjukkan kolom padding di XAML yang menentukan bilah judul. Menggunakan kolom padding alih-alih margin memastikan bahwa latar belakang melukis area di bawah tombol kontrol keterangan (untuk tombol transparan). Menggunakan kolom padding kanan dan kiri memastikan bahwa bilah judul Anda bereaksi dengan benar di tata letak kanan-ke-kiri dan kiri-ke-kanan.
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
Dimensi dan posisi area kontrol keterangan dikomunikasikan oleh kelas CoreApplicationViewTitleBar sehingga Anda dapat memperhitungkannya dalam tata letak antarmuka pengguna bilah judul Anda. Lebar wilayah yang dipesan di setiap sisi diberikan oleh properti SystemOverlayLeftInset atau SystemOverlayRightInset , dan tingginya diberikan oleh properti Tinggi .
Anda dapat menangani peristiwa LayoutMetricsChanged untuk merespons perubahan ukuran tombol keterangan. Misalnya, ini dapat terjadi jika tata letak aplikasi berubah dari kiri-ke-kanan ke kanan-ke-kiri. Tangani peristiwa ini untuk memverifikasi dan memperbarui posisi elemen UI yang bergantung pada ukuran bilah judul.
Contoh ini memperlihatkan cara menyesuaikan tata letak bilah judul Anda untuk memperhitungkan perubahan metrik bilah judul. AppTitleBar
, LeftPaddingColumn
, dan RightPaddingColumn
dinyatakan dalam XAML yang ditunjukkan sebelumnya.
private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
// Get the size of the caption controls and set padding.
LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}
Saat memperluas konten aplikasi ke area bilah judul, Anda dapat membuat latar belakang tombol keterangan transparan untuk memungkinkan latar belakang aplikasi ditampilkan. Anda biasanya mengatur latar belakang ke Colors.Transparent untuk transparansi penuh. Untuk transparansi parsial, atur saluran alfa untuk Warna tempat Anda mengatur properti.
Properti bilah judul ini bisa transparan:
- ButtonBackgroundColor
- ButtonHoverBackgroundColor
- ButtonPressedBackgroundColor
- ButtonInactiveBackgroundColor
Semua properti warna lainnya akan terus mengabaikan saluran alfa. Jika ExtendViewIntoTitleBar
diatur ke false
, saluran alfa selalu diabaikan untuk semua ApplicationViewTitleBar
properti warna.
Warna latar belakang tombol tidak diterapkan ke tombol Tutup dan status ditekan . Tombol tutup selalu menggunakan warna yang ditentukan sistem untuk status tersebut.
Tip
Mica adalah bahan menyenangkan yang membantu membedakan jendela yang fokus. Kami merekomendasikannya sebagai latar belakang untuk jendela berumur panjang di Windows 11. Jika Anda telah menerapkan Mica di area klien jendela Anda, Anda dapat memperluasnya ke area bilah judul dan membuat tombol keterangan Anda transparan bagi Mica untuk ditampilkan. Lihat Materi Mica untuk informasi selengkapnya.
Anda harus membuatnya jelas ketika jendela Anda aktif atau tidak aktif. Minimal, Anda harus mengubah warna teks, ikon, dan tombol di bilah judul Anda.
Tangani peristiwa CoreWindow.Activated untuk menentukan status aktivasi jendela, dan perbarui antarmuka pengguna bilah judul Anda sesuai kebutuhan.
public MainPage()
{
...
Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}
private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
{
UISettings settings = new UISettings();
if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
{
AppTitleTextBlock.Foreground =
new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
}
else
{
AppTitleTextBlock.Foreground =
new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
}
}
Anda dapat memanggil SetTitleBar untuk beralih ke elemen bilah judul baru saat aplikasi Anda berjalan. Anda juga dapat meneruskan null
sebagai parameter ke SetTitleBar
dan mengatur ExtendViewIntoTitleBar ke false
untuk kembali ke bilah judul sistem default.
Jika Menambahkan dukungan untuk mode layar penuh atau overlay ringkas ke aplikasi, Anda mungkin perlu membuat perubahan pada bilah judul saat aplikasi beralih di antara mode ini.
Saat aplikasi Anda berjalan dalam mode layar penuh atau tablet (hanya Windows 10), sistem menyembunyikan bilah judul dan tombol kontrol keterangan. Namun, pengguna dapat memanggil bilah judul agar ditampilkan sebagai overlay di atas UI aplikasi.
Anda dapat menangani peristiwa CoreApplicationViewTitleBar.IsVisibleChanged untuk diberi tahu saat bilah judul disembunyikan atau dipanggil, dan menampilkan atau menyembunyikan konten bilah judul kustom Anda sesuai kebutuhan.
Contoh ini menunjukkan cara menangani IsVisibleChanged
peristiwa untuk menampilkan dan menyembunyikan AppTitleBar
elemen dari contoh sebelumnya.
public MainPage()
{
this.InitializeComponent();
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
// Register a handler for when the title bar visibility changes.
// For example, when the title bar is invoked in full screen mode.
coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;
}
private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
if (sender.IsVisible)
{
AppTitleBar.Visibility = Visibility.Visible;
}
else
{
AppTitleBar.Visibility = Visibility.Collapsed;
}
}
Catatan
Mode layar penuh hanya dapat dimasukkan jika didukung oleh aplikasi Anda. Lihat ApplicationView.IsFullScreenMode untuk informasi selengkapnya. Mode tablet (hanya Windows 10) adalah opsi pengguna di Windows 10 pada perangkat keras yang didukung, sehingga pengguna dapat memilih untuk menjalankan aplikasi apa pun dalam mode tablet.
- Buatlah jelas ketika jendela Anda aktif atau tidak aktif. Minimal, ubah warna teks, ikon, dan tombol di bilah judul Anda.
- Tentukan wilayah seret di sepanjang tepi atas kanvas aplikasi. Mencocokkan penempatan bilah judul sistem memudahkan pengguna untuk menemukan.
- Tentukan wilayah seret yang cocok dengan bilah judul visual (jika ada) di kanvas aplikasi.
Contoh ini menunjukkan semua kode yang dijelaskan di bagian Kustomisasi penuh.
<Page
x:Class="WinUI2_ExtendedTitleBar.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinUI2_ExtendedTitleBar"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="AppTitleBar" Background="Transparent">
<!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
<!-- Using padding columns instead of Margin ensures that the background
paints the area under the caption control buttons (for transparent buttons). -->
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
<Image Source="Assets/WindowIcon.png"
Grid.Column="1"
HorizontalAlignment="Left"
Width="16" Height="16"
Margin="8,0,0,0"/>
<TextBlock x:Name="AppTitleTextBlock"
Text="App title"
Style="{StaticResource CaptionTextBlockStyle}"
Grid.Column="1"
VerticalAlignment="Center"
Margin="28,0,0,0"/>
</Grid>
<!-- This control has a higher z-order than AppTitleBar,
so it receives user input. -->
<AutoSuggestBox QueryIcon="Find"
PlaceholderText="Search"
HorizontalAlignment="Center"
Width="260" Height="32"/>
<muxc:NavigationView Grid.Row="1"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False">
<StackPanel>
<TextBlock Text="Content"
Style="{ThemeResource TitleTextBlockStyle}"
Margin="12,0,0,0"/>
</StackPanel>
</muxc:NavigationView>
</Grid>
</Page>
public MainPage()
{
this.InitializeComponent();
// Hide default title bar.
CoreApplicationViewTitleBar coreTitleBar =
CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
// Set caption buttons background to transparent.
ApplicationViewTitleBar titleBar =
ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Transparent;
// Set XAML element as a drag region.
Window.Current.SetTitleBar(AppTitleBar);
// Register a handler for when the size of the overlaid caption control changes.
coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;
// Register a handler for when the title bar visibility changes.
// For example, when the title bar is invoked in full screen mode.
coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;
// Register a handler for when the window activation changes.
Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}
private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
// Get the size of the caption controls and set padding.
LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}
private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
if (sender.IsVisible)
{
AppTitleBar.Visibility = Visibility.Visible;
}
else
{
AppTitleBar.Visibility = Visibility.Collapsed;
}
}
private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
{
UISettings settings = new UISettings();
if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
{
AppTitleTextBlock.Foreground =
new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
}
else
{
AppTitleTextBlock.Foreground =
new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
}
}