Nuta
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować się zalogować lub zmienić katalog.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
System Windows udostępnia domyślny pasek tytułu dla każdego okna i umożliwia dostosowanie go do osobowości aplikacji. Domyślny pasek tytułu zawiera niektóre standardowe składniki i podstawowe funkcje, takie jak przeciąganie i zmienianie rozmiaru okna.
Zobacz artykuł dotyczący projektowania paska tytułu, aby uzyskać wskazówki dotyczące dostosowywania paska tytułu aplikacji, akceptowalnej zawartości obszaru paska tytułu i zalecanych wzorców interfejsu użytkownika.
Uwaga / Notatka
W tym artykule pokazano, jak dostosować pasek tytułu dla aplikacji korzystających z platform UWP i WinUI 2. W przypadku aplikacji korzystających z zestawu Sdk aplikacji systemu Windows i interfejsu WinUI 3 zobacz Dostosowywanie paska tytułu dla zestawu SDK aplikacji systemu Windows.
Jeśli rozważasz migrację aplikacji platformy UWP do zestawu SDK aplikacji systemu Windows, zapoznaj się z naszym przewodnikiem migracji funkcji obsługi okien. Aby uzyskać więcej informacji, zobacz migrację funkcjonalności okienkowej.
- Dotyczy: UWP/WinUI 2
- ważne interfejsy API: właściwość ApplicationView.TitleBar, klasa ApplicationViewTitleBar, klasa CoreApplicationViewTitleBar
Składniki paska tytułu
Ta lista zawiera opis składników standardowego paska tytułu.
- Prostokąt paska tytułu
- Tekst tytułu
- Menu systemowe — dostępne przez kliknięcie ikony aplikacji lub kliknięcie prawym przyciskiem myszy paska tytułu
- Elementy sterujące napisami
- Przycisk minimalizacji
- Przycisk Maksymalizuj/Przywróć
- Przycisk Zamknij
W aplikacjach platformy UWP można dostosować pasek tytułu przy użyciu elementów członkowskich klas ApplicationView i CoreApplicationView . Istnieje wiele interfejsów API, które stopniowo modyfikują wygląd paska tytułu w oparciu o stopień niezbędnej personalizacji.
Uwaga / Notatka
Klasa Windows.UI.WindowManagement.AppWindow używana dla okien pomocniczych w aplikacjach platformy UWP nie obsługuje dostosowywania paska tytułu. Aby dostosować pasek tytułu aplikacji UWP, w której są wykorzystywane okna pomocnicze, użyj elementu ApplicationView zgodnie z opisem w Pokaż wiele widoków za pomocą ApplicationView.
Jak bardzo dostosować pasek tytułu
Istnieją dwa poziomy dostosowywania, które można zastosować do paska tytułu: stosowanie drobnych modyfikacji do domyślnego paska tytułu lub rozszerzanie kanwy aplikacji na obszar paska tytułu i udostępnianie całkowicie niestandardowej zawartości.
Uproszczony
W przypadku prostego dostosowywania, takiego jak zmiana koloru paska tytułu, można ustawić właściwości obiektu paska tytułu okna aplikacji, aby określić kolory, których chcesz użyć dla elementów paska tytułu. W takim przypadku system zachowuje odpowiedzialność za wszystkie inne aspekty paska tytułu, takie jak rysowanie tytułu aplikacji i definiowanie obszarów przeciągania.
Pełny
Inną opcją jest ukrycie domyślnego paska tytułu i zastąpienie go własną zawartością niestandardową. Możesz na przykład umieścić tekst, pole wyszukiwania lub niestandardowe menu w obszarze paska tytułu. Należy również użyć tej opcji, aby rozszerzyć tło materiału , takie jak Micado obszaru paska tytułu.
Jeśli zdecydujesz się na pełne dostosowanie, odpowiadasz za umieszczenie zawartości w obszarze paska tytułu i możesz zdefiniować własny region przeciągania. Przyciski na pasku tytułu (przyciski Zamknij, Minimalizuj i Maksymalizuj) są nadal dostępne i obsługiwane przez system, ale na przykład tytuł aplikacji już nie. Musisz utworzyć te elementy samodzielnie zgodnie z potrzebami aplikacji.
Proste dostosowywanie
Jeśli chcesz dostosować tylko kolory lub ikonę paska tytułu, możesz ustawić właściwości w obiekcie paska tytułu dla okna aplikacji.
Nazwa
Domyślnie pasek tytułu wyświetla nazwę wyświetlaną aplikacji jako tytuł okna. Nazwa ekranu jest ustawiana w pliku Package.appxmanifest.
Aby dodać tekst niestandardowy do tytułu, ustaw właściwość ApplicationView.Title na wartość tekstową, jak pokazano tutaj.
public MainPage()
{
this.InitializeComponent();
ApplicationView.GetForCurrentView().Title = "Custom text";
}
Twój tekst zostanie dodany przed tytułem okna, który będzie wyświetlany jako "tekst niestandardowy — nazwa wyświetlana aplikacji". Aby wyświetlić tytuł niestandardowy bez nazwy wyświetlanej aplikacji, musisz zastąpić domyślny pasek tytułu, jak pokazano w sekcji Pełne dostosowywanie .
Kolory
W tym przykładzie pokazano, jak uzyskać wystąpienie elementu ApplicationViewTitleBar i ustawić jego właściwości koloru.
Ten kod można umieścić w metodzie OnLaunched aplikacji (App.xaml.cs), po wywołaniu metody Window.Activate lub na pierwszej stronie aplikacji.
// 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;
Istnieje kilka kwestii, o których należy pamiętać podczas ustawiania kolorów paska tytułu:
- Kolor tła przycisku nie jest stosowany dla przycisku zamknięcia w stanie najechania kursorem (i) oraz w stanie wciśnięcia (i). Przycisk zamknij zawsze używa koloru zdefiniowanego przez system dla tych stanów.
- Ustawienie właściwości color na
nullresetuje ją do domyślnego koloru systemu. - Nie można ustawić przezroczystych kolorów. Kanał alfa koloru jest ignorowany.
System Windows daje użytkownikowi możliwość zastosowania wybranego koloru akcentu do paska tytułu. Jeśli ustawisz dowolny kolor paska tytułu, zalecamy jawne ustawienie wszystkich kolorów. Dzięki temu nie ma niezamierzonych kombinacji kolorów, które występują z powodu ustawień kolorów zdefiniowanych przez użytkownika.
Pełne dostosowywanie
Po wyrażeniu zgody na pełne dostosowywanie paska tytułu obszar klienta aplikacji zostanie rozszerzony w celu pokrycia całego okna, w tym obszaru paska tytułu. Odpowiadasz za rysowanie i obsługę wejścia dla całego okna z wyjątkiem przycisków na pasku tytułu, które są nadal udostępniane przez okno.
Aby ukryć domyślny pasek tytułu i rozszerzyć zawartość do obszaru paska tytułu, ustaw właściwość ExtendViewIntoTitleBar na wartość true. Tę właściwość można ustawić w metodzie aplikacji OnLaunched (App.xaml.cs) lub na pierwszej stronie aplikacji.
Wskazówka
Zobacz sekcję Przykład pełnego dostosowywania, aby wyświetlić cały kod naraz.
W tym przykładzie pokazano, jak uzyskać CoreApplicationViewTitleBar i ustawić właściwość ExtendViewIntoTitleBar na true.
using Windows.ApplicationModel.Core;
public MainPage()
{
this.InitializeComponent();
// Hide default title bar.
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
}
Wskazówka
To ustawienie będzie się powtarzać po zamknięciu i ponownym uruchomieniu aplikacji. W programie Visual Studio, jeśli ustawisz opcję ExtendViewIntoTitleBar na true i chcesz wrócić do wartości domyślnej, musisz jawnie ustawić ją na false i uruchomić aplikację, aby nadpisać zapisaną konfigurację.
Zawartość paska tytułu i obszary do przeciągania
Gdy aplikacja zostanie rozszerzona do obszaru paska tytułu, odpowiadasz za definiowanie interfejsu użytkownika paska tytułu i zarządzanie nim. Zazwyczaj obejmuje to co najmniej określenie tekstu tytułu i regionu przeciągania. Obszar przeciągania paska tytułu definiuje miejsce, w którym użytkownik może kliknąć i przeciągnąć, aby przenieść okno. Jest to również miejsce, w którym użytkownik może kliknąć prawym przyciskiem myszy, aby wyświetlić menu systemowe.
Aby dowiedzieć się więcej na temat dopuszczalnej zawartości paska tytułu i zalecanych wzorców interfejsu użytkownika, zobacz Projektowanie paska tytułu.
Region przeciągania określa się, wywołując metodę Window.SetTitleBar i przekazując element UIElement, który definiuje region przeciągania. (Zazwyczaj UIElement jest to panel zawierający inne elementy). Właściwość musi być ustawiona ExtendViewIntoTitleBar na true , aby wywołanie SetTitleBar miało jakikolwiek efekt.
Poniżej przedstawiono sposób ustawiania Grid zawartości jako regionu paska tytułu z możliwością przeciągania. Ten kod jest umieszczany w XAML oraz w kodzie zaplecza dla pierwszej strony aplikacji.
<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);
}
Domyślnie na pasku tytułu systemu wyświetlana jest nazwa wyświetlana aplikacji jako tytuł okna. Nazwa wyświetlana jest ustawiona w pliku Package.appxmanifest. Możesz uzyskać tę wartość i użyć jej na niestandardowym pasku tytułu w następujący sposób.
AppTitleTextBlock.Text = AppInfo.Current.DisplayInfo.DisplayName;
Ważne
Określony region przeciągania musi być sprawdzalny. Domyślnie niektóre elementy interfejsu użytkownika, takie jak Grid, nie uczestniczą w testach wykrywania aktywacji, gdy nie mają ustawionego tła. Oznacza to, że w przypadku niektórych elementów może być konieczne ustawienie przezroczystego tła. Aby uzyskać więcej informacji, zobacz uwagi dotyczące VisualTreeHelper.FindElementsInHostCoordinates.
Jeśli na przykład zdefiniujesz siatkę jako region przeciągania, ustaw Background="Transparent", aby można je było przeciągać.
Ta siatka nie jest przeciągalna (ale widoczne elementy w niej są): <Grid x:Name="AppTitleBar">.
Ta siatka wygląda tak samo, ale cała siatka jest przeciągana: <Grid x:Name="AppTitleBar" Background="Transparent">.
Zawartość interaktywna
Możesz umieścić interaktywne kontrolki, takie jak przyciski, menu lub pole wyszukiwania, w górnej części aplikacji, aby wyglądały one na pasku tytułu. Istnieje jednak kilka reguł, które należy przestrzegać, aby upewnić się, że elementy interakcyjne odbierają dane wejściowe użytkownika, a jednocześnie umożliwiają użytkownikom poruszanie się po oknie.
- Aby zdefiniować obszar jako region przeciąganego paska tytułu, należy wywołać SetTitleBar. Jeśli tego nie zrobisz, system ustawi domyślny region przeciągania w górnej części strony. System będzie następnie obsługiwał wszystkie dane wejściowe użytkownika w tym obszarze i uniemożliwiał dostęp do kontrolek.
- Umieść kontrolki interakcyjne na górze regionu przeciągania zdefiniowanego przez wywołanie SetTitleBar (z wyższą kolejnością z). Nie należy wprowadzać elementów podrzędnych interaktywnych kontrolek UIElement przekazywanych do
SetTitleBar. Po przekazaniu elementu doSetTitleBarsystem traktuje go jak pasek tytułu systemu i obsługuje wszystkie dane wejściowe wskaźnika do tego elementu.
W tym miejscu element AutoSuggestBox ma wyższą kolejność względem osi z niż AppTitleBar, dzięki czemu otrzymuje dane wejściowe użytkownika.
<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>
Przyciski podpisu systemowego
System rezerwuje lewy górny lub prawy górny róg okna aplikacji dla systemowych przycisków tytułowych (minimalizuj, maksymalizuj/przywróć, zamknij). System zachowuje kontrolę nad obszarem przycisku napisów, aby zagwarantować, że minimalna funkcjonalność jest zapewniana do przeciągania, minimalizowania, maksymalizacji i zamykania okna. System umieszcza przycisk Zamknij w prawym górnym rogu dla języków od lewej do prawej i w lewym górnym rogu dla języków od prawej do lewej.
Możesz rysować zawartość pod obszarem kontrolki tytułu, takim jak tło aplikacji, ale nie powinieneś umieszczać tam żadnych elementów interfejsu użytkownika, z którymi użytkownik miałby wchodzić w interakcję. Nie otrzymuje żadnych danych wejściowych, ponieważ dane wejściowe dla kontrolek podpisów są obsługiwane przez system.
W języku XAML te wiersze z poprzedniego przykładu pokazują kolumny wypełnienia, które definiują pasek tytułu. Użycie kolumn wypełniających zamiast marginesów zapewnia, że tło pokrywa obszar pod przyciskami kontrolnymi podpisu (w przypadku przezroczystych przycisków). Użycie kolumn dopełniania zarówno po prawej, jak i po lewej stronie gwarantuje, że pasek tytułu działa prawidłowo w układach od prawej do lewej oraz od lewej do prawej.
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
Wymiary i położenie obszaru sterowania napisami są przekazywane przez klasę CoreApplicationViewTitleBar, aby można je było uwzględnić w układzie paska tytułu w interfejsie użytkownika. Szerokość regionu zarezerwowanego po każdej stronie jest określona przez właściwości SystemOverlayLeftInset lub SystemOverlayRightInset, a jego wysokość określana jest przez właściwość Height.
Możesz obsłużyć zdarzenie LayoutMetricsChanged, aby odpowiedzieć na zmiany rozmiaru przycisków tytułu. Na przykład może się to zdarzyć, jeśli układ aplikacji zmieni się z od lewej do prawej na od prawej do lewej. Obsłuż to zdarzenie, aby zweryfikować i zaktualizować pozycjonowanie elementów interfejsu użytkownika, które zależą od rozmiaru paska tytułu.
W tym przykładzie pokazano, jak dostosować układ paska tytułu, aby uwzględnić zmiany w metrykach paska tytułu.
AppTitleBar, LeftPaddingColumni RightPaddingColumn są deklarowane w pokazanym wcześniej języku XAML.
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);
}
Kolor i przezroczystość przycisków podpisów
Po rozszerzeniu zawartości aplikacji na obszar paska tytułu możesz ustawić tło przycisków podpisów jako przezroczyste, aby umożliwić wyświetlanie tła aplikacji. W celu uzyskania pełnej przezroczystości zazwyczaj ustawia się tło na Colors.Transparent. Aby uzyskać częściową przezroczystość, ustaw kanał alfa koloru , na który ustawiasz właściwość.
Te właściwości paska tytułu mogą być przezroczyste:
- KolorTłaPrzycisku
- ButtonHoverBackgroundColor
- ButtonPressedBackgroundColor
- ButtonInactiveBackgroundColor
Wszystkie inne właściwości koloru będą nadal ignorować kanał alfa. Jeśli ExtendViewIntoTitleBar jest ustawiona na false, kanał alfa jest zawsze ignorowany dla wszystkich właściwości koloru ApplicationViewTitleBar.
Kolor tła przycisku nie jest stosowany do przycisku Zamknij w stanach: najechanie kursorem , oraz naciśnięcie ,. Przycisk zamknij zawsze używa koloru zdefiniowanego przez system dla tych stanów.
Wskazówka
Mica to wspaniały materiał, który pomaga odróżnić okno, będące w centrum uwagi. Zalecamy ustawić to jako tło dla trwałych okien w systemie Windows 11. Jeśli zastosowano micę w obszarze klienta okna, możesz rozszerzyć micę na obszar paska tytułu i ustawić przyciski nagłówka przezroczyste, aby Mica była widoczna. Aby uzyskać więcej informacji, zobacz materiał typu Mica .
Przyciemnienie paska tytułu, gdy okno jest nieaktywne
Powinno być oczywiste, gdy okno jest aktywne lub nieaktywne. Co najmniej należy zmienić kolor tekstu, ikon i przycisków na pasku tytułu.
Obsłuż zdarzenie CoreWindow.Activated w celu określenia stanu aktywacji okna i zaktualizuj interfejs użytkownika paska tytułu zgodnie z potrzebami.
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));
}
}
Resetowanie paska tytułu
Możesz wywołać polecenie SetTitleBar , aby przełączyć się na nowy element paska tytułu podczas działania aplikacji. Możesz również przekazać null jako parametr do SetTitleBar i ustawić ExtendViewIntoTitleBar, aby przywrócić domyślny pasek tytułu systemu false.
Pokaż i ukryj pasek tytułu
Jeśli dodasz obsługę trybów pełnoekranowego i kompaktowej nakładki do swojej aplikacji, może być konieczne wprowadzenie zmian na pasku tytułu, gdy aplikacja przełącza się między tymi trybami.
Gdy aplikacja działa w trybie pełnoekranowym lub w trybie tabletu (tylko w systemie Windows 10), system ukrywa przyciski sterujące paskiem tytułu i podpisem. Użytkownik może jednak wywołać pasek tytułu, aby był wyświetlany jako nakładka na interfejsie użytkownika aplikacji.
Możesz obsługiwać zdarzenie CoreApplicationViewTitleBar.IsVisibleChanged , aby otrzymywać powiadomienia, gdy pasek tytułu jest ukryty lub wywoływany, oraz wyświetlać lub ukrywać zawartość niestandardowego paska tytułu zgodnie z potrzebami.
W tym przykładzie pokazano, jak obsługiwać zdarzenie IsVisibleChanged w celu pokazania i ukrycia elementu AppTitleBar z poprzednich przykładów.
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;
}
}
Uwaga / Notatka
Tryb pełnoekranowy można włączyć tylko wtedy, gdy jest obsługiwany przez Twoją aplikację. Aby uzyskać więcej informacji, zobacz ApplicationView.IsFullScreenMode . Tryb tabletu (tylko system Windows 10) jest opcją użytkownika w systemie Windows 10 na obsługiwanym sprzęcie, więc użytkownik może wybrać uruchamianie dowolnej aplikacji w trybie tabletu.
Zasady i zakazy
- Upewnij się, że jest oczywiste, czy okno jest aktywne czy nieaktywne. Zmień kolor tekstu, ikon i przycisków na pasku tytułu.
- Zdefiniuj region przeciągania wzdłuż górnej krawędzi kanwy aplikacji. Dopasowanie położenia pasków tytułu systemu ułatwia użytkownikom znajdowanie.
- Zdefiniuj region przeciągania zgodny z paskiem tytułu wizualizacji (jeśli istnieje) na kanwie aplikacji.
Przykład pełnego dostosowywania
W tych przykładach pokazano cały kod opisany w sekcji Pełne dostosowywanie.
<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));
}
}