Personalizzazione della barra del titolo

Windows fornisce una barra del titolo predefinita per ogni finestra e consente di personalizzarla in modo che corrisponda alla personalità dell'app. La barra del titolo predefinita include alcuni componenti standard e funzionalità di base, ad esempio il trascinamento e il ridimensionamento della finestra.

Consultare l'articolo progettazione Barra del titolo per indicazioni sulla personalizzazione della barra del titolo dell'app, sul contenuto dell'area della barra del titolo accettabile e sui modelli di interfaccia utente consigliati.

Vedere le linee guida di Windows 11 Fluent Design per la barra del titolo

Nota

Questo articolo illustra come personalizzare la barra del titolo per le app che usano UWP e WinUI 2. Per le app che usano i SDK per app di Windows e WinUI 3, vedere Personalizzazione della barra del titolo per il SDK per app di Windows.

Se si sta valutando la migrazione della tua app UWP a SDK per app di Windows, vedere la guida alla migrazione delle funzionalità di finestra. Per ulteriori informazioni, vedere Migrazione della funzionalità di windowing.

• Si applica a: UWP/WinUI 2
• API importanti: proprietà ApplicationView.TitleBar, classe ApplicationViewTitleBar, classe CoreApplicationViewTitleBar

Componenti della barra del titolo

Questo elenco descrive i componenti della barra del titolo standard.

• Rettangolo barra del titolo
• Testo titolo
• Menu di sistema: accessibile facendo clic sull'icona dell'app o facendo clic con il pulsante destro del mouse sulla barra del titolo
• Controlli didascalia
  • Pulsante Riduci a icona
  • Pulsante Ingrandisci/Ripristina
  • Pulsante Chiudi

Nelle applicazioni UWP puoi personalizzare la barra del titolo usando i membri delle classi ApplicationView e CoreApplicationView. Esistono più API per modificare progressivamente l'aspetto della barra del titolo in base al livello di personalizzazione necessario.

Nota

La classe Windows.UI.WindowManagement.AppWindow, usata per le finestre secondarie nelle app UWP, non supporta la personalizzazione della barra del titolo. Per personalizzare la barra del titolo di un'app UWP che usa finestre secondarie, usa ApplicationView come descritto in Mostra più visualizzazioni con ApplicationView.

Quanto personalizzare la barra del titolo

Alla barra del titolo è possibile applicare due livelli di personalizzazione: applicare modifiche minime alla barra del titolo predefinita o estendere l'area di disegno dell'app nell'area della barra del titolo e fornire contenuto completamente personalizzato.

Semplice

Per una personalizzazione semplice, ad esempio la modifica del colore della barra del titolo, puoi impostare le proprietà nell'oggetto barra del titolo dell'app windows per specificare i colori che vuoi usare per gli elementi della barra del titolo. In questo caso, il sistema mantiene la responsabilità di tutti gli altri aspetti della barra del titolo, ad esempio disegnare il titolo dell'app e definire le aree di trascinamento.

Completo

L'altra opzione consiste nel nascondere la barra del titolo predefinita e sostituirla con il contenuto personalizzato. Ad esempio, è possibile inserire testo, una casella di ricerca o menu personalizzati nell'area della barra del titolo. Inoltre è necessario usare questa opzione per estendere uno sfondo materiale, ad esempio Mica, nell'area della barra del titolo.

Quando si sceglie la personalizzazione completa, si è responsabili dell'inserimento del contenuto nell'area della barra del titolo e si possono definire un'area di trascinamento personalizzata. I controlli didascalia (pulsanti Chiudi, Riduci a icona e Ingrandisci) sono ancora disponibili e gestiti dal sistema, ma gli elementi come il titolo dell'app non sono presenti. È necessario creare questi elementi in base alle esigenze dell'app.

Personalizzazione semplice

Se vuoi personalizzare solo il titolo della barra del titolo, i colori o l'icona della barra del titolo, puoi impostare le proprietà sull'oggetto barra del titolo per la finestra dell'app.

Title

Per impostazione predefinita, la barra del titolo mostra il nome visualizzato dell'app come titolo della finestra. Il nome visualizzato viene impostato nel file Package.appxmanifest.

Per aggiungere testo personalizzato al titolo, impostare la proprietà ApplicationView.Title su un valore di testo, come illustrato di seguito.

public MainPage()
{
    this.InitializeComponent();

    ApplicationView.GetForCurrentView().Title = "Custom text";
}

Il testo viene anteposto al titolo della finestra, che verrà visualizzato come "testo personalizzato - nome visualizzato dell'app". Per visualizzare un titolo personalizzato senza il nome visualizzato dell'app, è necessario sostituire la barra del titolo predefinita, come illustrato nella sezione Personalizzazione completa.

Colori

Questo esempio mostra come ottenere un'istanza di ApplicationViewTitleBar e impostarne le proprietà del colore.

Questo codice può essere inserito nel metodo OnLaunched dell'app (App.xaml.cs), dopo la chiamata a Window.Activate come indicato qui o nella prima pagina dell'app.

// 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;

Quando si impostano i colori della barra del titolo, tenere presenti alcuni aspetti:

• Il colore di sfondo del pulsante non viene applicato agli stati passaggio e pressione del pulsante di chiusura. Il pulsante di chiusura usa sempre il colore definito dal sistema per tali stati.
• L'impostazione di una proprietà colore su null la reimposta sul colore di sistema predefinito.
• Non è possibile impostare colori trasparenti. Il canale alfa del colore viene ignorato.

Windows offre a un utente la possibilità di applicare il colore principale selezionato alla barra del titolo. Se si imposta un colore della barra del titolo, è consigliabile impostare in modo esplicito tutti i colori. Ciò garantisce che non ci siano combinazioni di colori indesiderate che si verificano a causa delle impostazioni dei colori definite dall'utente.

Personalizzazione completa

Quando si acconsente esplicitamente alla personalizzazione completa della barra del titolo, l'area client dell'app viene estesa per coprire l'intera finestra, inclusa l'area della barra del titolo. L'utente è responsabile della gestione dell'input e del disegno per l'intera finestra, ad eccezione dei pulsanti didascalia, ancora forniti dalla finestra.

Per nascondere la barra del titolo predefinita ed estendere il contenuto nell'area della barra del titolo, impostare la proprietà ExtendViewIntoTitleBar su true. È possibile impostare questa proprietà può essere impostata nel metodo OnLaunched dell'app (App.xaml.cs) o nella prima pagina dell'app.

Suggerimento

Consultare la sezione Esempio di personalizzazione completa per vedere tutto il codice in una volta.

Questo esempio illustra come ottenere CoreApplicationViewTitleBar e impostare la proprietà ExtendViewIntoTitleBar su true.

using Windows.ApplicationModel.Core;

public MainPage()
{
    this.InitializeComponent();

    // Hide default title bar.
    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
}

Suggerimento

Questa impostazione persiste quando l'app viene chiusa e riavviata. In Visual Studio, se si imposta ExtendViewIntoTitleBar su true e quindi si vuole ripristinare l'impostazione predefinita, è consigliabile impostarla in modo esplicito su false ed eseguire l'app per sovrascrivere l'impostazione persistente.

Contenuto della barra del titolo e trascinamento delle aree

Quando l'app viene estesa nell'area della barra del titolo, si è responsabili della definizione e della gestione dell'interfaccia utente per la barra del titolo. Ciò include in genere almeno il testo del titolo e l'area di trascinamento. L'area di trascinamento della barra del titolo definisce la posizione in cui l'utente può fare clic e trascinare per spostare la finestra. È anche la posizione in cui l'utente può fare clic con il pulsante destro del mouse per visualizzare il menu di sistema.

Per altre informazioni sul contenuto della barra del titolo accettabile e sui modelli di interfaccia utente consigliati, consultare Progettazione della barra del titolo.

Per specificare l'area di trascinamento, chiamare il metodo Window.SetTitleBar e passare un oggetto UIElement che definisce l'area di trascinamento. (È UIElement in genere un pannello che contiene altri elementi). La ExtendViewIntoTitleBar proprietà deve essere impostata su true affinché la chiamata SetTitleBar abbia effetto.

Ecco come impostare un Grid di contenuto come area della barra del titolo trascinabile. Questo codice viene inserito nel codice XAML e nel code-behind per la prima pagina dell'app.

<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);
}

Per impostazione predefinita, la barra del titolo del sistema mostra il nome visualizzato dell'app come titolo della finestra. Il nome visualizzato viene impostato nel file Package.appxmanifest. È possibile ottenere questo valore e usarlo nella barra del titolo personalizzata in questo modo.

AppTitleTextBlock.Text = AppInfo.Current.DisplayInfo.DisplayName;

Importante

L'area di trascinamento specificata deve essere hit testable. Per impostazione predefinita, alcuni elementi dell'interfaccia utente, ad esempio Grid, non partecipano al hit testing quando non hanno un set in background. Ciò significa che, per alcuni elementi, potrebbe essere necessario impostare un pennello di sfondo trasparente. Per altre informazioni, vedere le osservazioni in VisualTreeHelper.FindElementsInHostCoordinates.

Ad esempio, se si definisce una griglia come area di trascinamento, impostare Background="Transparent" per renderla trascinabile.

Questa griglia non è trascinabile (ma gli elementi visibili al suo interno sono): <Grid x:Name="AppTitleBar">.

Questa griglia ha lo stesso aspetto, ma l'intera griglia è trascinabile: <Grid x:Name="AppTitleBar" Background="Transparent">.

Contenuto interattivo

È possibile posizionare controlli interattivi, ad esempio pulsanti, menu o una casella di ricerca, nella parte superiore dell'app in modo che appaiano nella barra del titolo. Esistono tuttavia alcune regole da seguire per assicurarsi che gli elementi interattivi ricevano l'input dell'utente, consentendo comunque agli utenti di spostare la finestra.

• È necessario chiamare SetTitleBar per definire un'area come area della barra del titolo trascinabile. In caso contrario, il sistema imposta l'area di trascinamento predefinita nella parte superiore della pagina. Il sistema gestirà quindi tutti gli input dell'utente in questa area e impedirà l'input di raggiungere i controlli.
• Posizionare i controlli interattivi nella parte superiore dell'area di trascinamento definita dalla chiamata a SetTitleBar (con un ordine z superiore). Non rendere i controlli interattivi figlio di UIElement passati a SetTitleBar. Dopo aver passato un elemento a SetTitleBar, il sistema lo considera come la barra del titolo di sistema e gestisce tutto l'input del puntatore a tale elemento.

In questo caso, l'elemento AutoSuggestBox ha un ordine z superiore a AppTitleBar, in modo che riceva l'input dell'utente.

<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>

Pulsanti didascalia di sistema

Il sistema riserva l'angolo superiore sinistro o superiore destro della finestra dell'app per i pulsanti di didascalia di sistema (ridurre al minimo, ingrandire/ripristinare, chiudere). Il sistema mantiene il controllo dell'area del pulsante didascalia per garantire che venga fornita la funzionalità minima per il trascinamento, la riduzione al minimo, l'ottimizzazione e la chiusura della finestra. Il sistema disegna il pulsante Chiudi in alto a destra per le lingue da sinistra a destra e in alto a sinistra per le lingue da destra a sinistra.

È possibile disegnare il contenuto sotto l'area di controllo didascalia, ad esempio lo sfondo dell'app, ma non devi inserire alcuna interfaccia utente con cui prevedi che l'utente possa interagire. Non riceve alcun input perché l'input per i controlli didascalia viene gestito dal sistema.

Queste righe dell'esempio precedente mostrano le colonne di spaziatura in XAML che definisce la barra del titolo. L'uso delle colonne di spaziatura anziché dei margini garantisce che lo sfondo dipinga l'area sotto i pulsanti di controllo didascalia (per i pulsanti trasparenti). L'uso sia delle colonne di spaziatura interna destra che sinistra garantisce che la barra del titolo si comporti correttamente sia nei layout da destra a sinistra che da sinistra a destra.

<Grid.ColumnDefinitions>
    <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
    <ColumnDefinition/>
    <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>

Le dimensioni e la posizione dell'area di controllo didascalia viene comunicata dalla classe CoreApplicationViewTitleBar in modo che sia possibile tenerne conto nel layout dell'interfaccia utente della barra del titolo. La larghezza dell'area riservata su ogni lato viene assegnata dalle proprietà SystemOverlayLeftInset o SystemOverlayRightInset e l'altezza viene assegnata dalla proprietà Altezza.

Si può gestire l'evento LayoutMetricsChanged per rispondere alle modifiche apportate alle dimensioni dei pulsanti didascalia. Ad esempio, questo può verificarsi se il layout dell'app cambia da sinistra a destra a sinistra. Gestire questo evento per verificare e aggiornare il posizionamento degli elementi dell'interfaccia utente che dipendono dalle dimensioni della barra del titolo.

In questo esempio viene illustrato come modificare il layout della barra del titolo in modo da tenere conto delle modifiche apportate alle metriche della barra del titolo. AppTitleBar, LeftPaddingColumn e RightPaddingColumn vengono dichiarati nel codice XAML illustrato in precedenza.

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);
}

Colore e trasparenza nei pulsanti didascalia

Quando si estende il contenuto dell'app nell'area della barra del titolo, è possibile rendere trasparente lo sfondo dei pulsanti didascalia per consentire la visualizzazione dello sfondo dell'app. In genere si imposta lo sfondo su Colors.Transparent per la trasparenza completa. Per la trasparenza parziale, impostare il canale alfa per Colore su cui si imposta la proprietà.

Queste proprietà della barra del titolo possono essere trasparenti:

• ButtonBackgroundColor
• ButtonHoverBackgroundColor
• ButtonPressedBackgroundColor
• ButtonInactiveBackgroundColor

Tutte le altre proprietà di colore continueranno a ignorare il canale alfa. Se ExtendViewIntoTitleBar è impostato su false, il canale alfa viene sempre ignorato per tutte le proprietà del colore ApplicationViewTitleBar.

Il colore di sfondo del pulsante non viene applicato agli stati passaggio e pressione del pulsante Chiudi. Il pulsante di chiusura usa sempre il colore definito dal sistema per tali stati.

Suggerimento

Mica è un materiale piacevole che aiuta a distinguere la finestra che viene messa a fuoco. È consigliabile usarlo come sfondo per le finestre di lunga durata in Windows 11. Se è stata applicato Mica nell'area client della finestra, è possibile estenderla nell'area della barra del titolo e rendere i pulsanti didascalia trasparenti per visualizzare Mica. Per altre informazioni, vedere materiale Mica.

Disattivare la barra del titolo quando la finestra è inattiva

È consigliabile rendere evidente quando la finestra è attiva o inattiva. È necessario modificare almeno il colore del testo, delle icone e dei pulsanti nella barra del titolo.

Gestire l'evento CoreWindow.Activated per determinare lo stato di attivazione della finestra e aggiornare l'interfaccia utente della barra del titolo in base alle esigenze.

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));
    }
}

Reimpostare la barra del titolo

È possibile chiamare SetTitleBar per passare a un nuovo elemento della barra del titolo mentre l'app è in esecuzione. È anche possibile passare null come parametro a SetTitleBar e impostare ExtendViewIntoTitleBar su per false ripristinare la barra del titolo di sistema predefinita.

Mostra e nascondi la barra del titolo

Se si aggiunge il supporto per le modalità a schermo intero o sovrapposizione compatta all'app, potrebbe essere necessario dover apportare modifiche alla barra del titolo quando l'app passa da una modalità all'altra.

Quando l'app viene eseguita in modalità schermo intero o tablet (solo Windows 10), il sistema nasconde la barra del titolo e i pulsanti di controllo didascalia. Tuttavia, l'utente può richiamare la barra del titolo per visualizzarla come sovrimpressione sopra l'interfaccia utente dell'app.

È possibile gestire l'evento CoreApplicationViewTitleBar.IsVisibleChanged per ricevere una notifica quando la barra del titolo è nascosta o richiamata e mostrare o nascondere il contenuto della barra del titolo personalizzato in base alle esigenze.

In questo esempio viene illustrato come gestire l'evento IsVisibleChanged per mostrare e nascondere l'elemento AppTitleBar dagli esempi precedenti.

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;
    }
}

Nota

La modalità Schermo intero può essere attivata solo se supportata dall'app. Per altre informazioni, vedere ApplicationView.IsFullScreenMode. La modalità tablet (solo Windows 10) è un'opzione utente in Windows 10 su hardware supportato, in modo che un utente possa scegliere di eseguire qualsiasi app in modalità tablet.

Cosa fare e cosa non fare

• È consigliabile rendere evidente quando la finestra è attiva o inattiva. È necessario modificare almeno il colore di testo, icone e pulsanti nella barra del titolo.
• Definire un'area di trascinamento lungo il bordo superiore dell'area di disegno dell'app. La corrispondenza della posizione delle barre del titolo di sistema semplifica la ricerca da parte degli utenti.
• Definire un'area di trascinamento corrispondente alla barra del titolo oggetto visivo (se presente) nell'area di disegno dell'app.

Esempio di personalizzazione completa

In questo esempio viene illustrato tutto il codice descritto nella sezione Personalizzazione completa.

<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));
     }
 }

Articoli correlati

• Personalizzazione della barra del titolo (SDK per app di Windows)
• Acrilico
• Mica
• Color