Personalizzazione della barra del titoloTitle bar customization

Quando l'app è in esecuzione in una finestra del desktop, è possibile personalizzare le barre del titolo in modo che corrispondano alla personalità dell'app.When your app is running in a desktop window, you can customize the title bars to match the personality of your app. Le API di personalizzazione della barra del titolo consentono di specificare i colori per gli elementi della barra del titolo o di estendere il contenuto dell'app nell'area della barra del titolo e di prenderne il controllo completo.The title bar customization APIs let you specify colors for title bar elements, or extend your app content into the title bar area and take full control of it.

API importanti: proprietà ApplicationView. barradel titolo, classe ApplicationViewTitleBar, classe CoreApplicationViewTitleBarImportant APIs: ApplicationView.TitleBar property, ApplicationViewTitleBar class, CoreApplicationViewTitleBar class

Quanto personalizzare la barra del titoloHow much to customize the title bar

Sono disponibili due livelli di personalizzazione che è possibile applicare alla barra del titolo.There are two levels of customization that you can apply to the title bar.

Per la personalizzazione dei colori semplice, è possibile impostare le proprietà ApplicationViewTitleBar per specificare i colori che si desidera utilizzare per gli elementi della barra del titolo.For simple color customization, you can set ApplicationViewTitleBar properties to specify the colors you want to use for title bar elements. In questo caso, il sistema mantiene la responsabilità di tutti gli altri aspetti della barra del titolo, ad esempio il disegno del titolo dell'app e la definizione delle aree trascinabili.In this case, the system retains responsibility for all other aspects of the title bar, such as drawing the app title and defining draggable areas.

L'altra opzione consiste nel nascondere la barra del titolo predefinita e sostituirla con il contenuto XAML.Your other option is to hide the default title bar and replace it with your own XAML content. È ad esempio possibile inserire testo, pulsanti o menu personalizzati nell'area della barra del titolo.For example, you can place text, buttons, or custom menus in the title bar area. Sarà inoltre necessario utilizzare questa opzione per estendere uno sfondo acrilico nell'area della barra del titolo.You will also need to use this option to extend an acrylic background into the title bar area.

Quando si sceglie la personalizzazione completa, si è responsabili dell'inserimento del contenuto nell'area della barra del titolo ed è possibile definire un'area trascinabile personalizzata.When you opt for full customization, you are responsible for putting content in the title bar area, and you can define your own draggable region. I pulsanti sistema indietro, Chiudi, Riduci a icona e Ingrandisci sono ancora disponibili e gestiti dal sistema, ma non gli elementi come il titolo dell'app.The system Back, Close, Minimize, and Maximize buttons are still available and handled by the system, but elements like the app title are not. Sarà necessario creare gli elementi manualmente, in base alle esigenze dell'app.You will need to create those elements yourself as needed by your app.

Nota

La personalizzazione del colore semplice è disponibile per le app di Windows che usano XAML, DirectX e HTML.Simple color customization is available to Windows apps using XAML, DirectX, and HTML. La personalizzazione completa è disponibile solo per le app di Windows che usano XAML.Full customization is available only to Windows apps using XAML.

Personalizzazione colore sempliceSimple color customization

Se si vuole solo personalizzare i colori della barra del titolo e non eseguire alcuna operazione (ad esempio, inserire le schede nella barra del titolo), è possibile impostare le proprietà del colore in ApplicationViewTitleBar per la finestra dell'app.If you want only to customize the title bar colors and not do anything too fancy (such as putting tabs in your title bar), you can set the color properties on the ApplicationViewTitleBar for your app window.

In questo esempio viene illustrato come ottenere un'istanza di ApplicationViewTitleBar e impostare le relative proprietà Color.This example shows how to get an instance of ApplicationViewTitleBar and set its color properties.

// using Windows.UI.ViewManagement;

var titleBar = ApplicationView.GetForCurrentView().TitleBar;

// Set active window colors
titleBar.ForegroundColor = Windows.UI.Colors.White;
titleBar.BackgroundColor = Windows.UI.Colors.Green;
titleBar.ButtonForegroundColor = Windows.UI.Colors.White;
titleBar.ButtonBackgroundColor = Windows.UI.Colors.SeaGreen;
titleBar.ButtonHoverForegroundColor = Windows.UI.Colors.White;
titleBar.ButtonHoverBackgroundColor = Windows.UI.Colors.DarkSeaGreen;
titleBar.ButtonPressedForegroundColor = Windows.UI.Colors.Gray;
titleBar.ButtonPressedBackgroundColor = Windows.UI.Colors.LightGreen;

// Set inactive window colors
titleBar.InactiveForegroundColor = Windows.UI.Colors.Gray;
titleBar.InactiveBackgroundColor = Windows.UI.Colors.SeaGreen;
titleBar.ButtonInactiveForegroundColor = Windows.UI.Colors.Gray;
titleBar.ButtonInactiveBackgroundColor = Windows.UI.Colors.SeaGreen;

Nota

Questo codice può essere inserito nel metodo OnLaunched dell'app (app.XAML.cs), dopo la chiamata a Window. Activateo nella prima pagina dell'app.This code can be placed in your app's OnLaunched method (App.xaml.cs), after the call to Window.Activate, or in your app's first page.

Suggerimento

Windows community Toolkit fornisce estensioni che consentono di impostare queste proprietà cromatiche in XAML.The Windows Community Toolkit provides extensions that let you set these color properties in XAML. Per ulteriori informazioni, vedere la documentazione di Windows community Toolkit.For more info, see the Windows Community Toolkit documentation.

Quando si impostano i colori della barra del titolo, è necessario tenere presenti alcuni aspetti:There are a few things to be aware of when setting title bar colors:

  • Il colore di sfondo del pulsante non viene applicato al pulsante Chiudi al passaggio del mouse e agli stati premuti.The button background color is not applied to the close button hover and pressed states. Il pulsante Chiudi usa sempre il colore definito dal sistema per tali Stati.The close button always uses the system-defined color for those states.
  • Quando viene usata, le proprietà del colore del pulsante vengono applicate al pulsante indietro del sistema.The button color properties are applied to the system back button when it's used. (Vedere la cronologia di navigazione e la navigazione all'indietro).(See Navigation history and backwards navigation.)
  • L'impostazione di una proprietà Color su null Reimposta il colore di sistema predefinito.Setting a color property to null resets it to the default system color.
  • Non è possibile impostare colori trasparenti.You can't set transparent colors. Il canale alfa del colore viene ignorato.The color's alpha channel is ignored.

Windows offre all'utente la possibilità di applicare il colore dell'accento selezionato alla barra del titolo.Windows gives a user the option to apply their selected accent color to the title bar. Se si imposta un colore per la barra del titolo, è consigliabile impostare in modo esplicito tutti i colori.If you set any title bar color, we recommend that you explicitly set all the colors. In questo modo si garantisce che non esistano combinazioni di colori impreviste a causa delle impostazioni dei colori definite dall'utente.This ensures that there are no unintended color combinations that occur because of user defined color settings.

Personalizzazione completaFull customization

Quando si acconsenti esplicitamente alla personalizzazione della barra del titolo completa, l'area client dell'app viene estesa per coprire l'intera finestra, inclusa l'area della barra del titolo.When you opt-in to full title bar customization, your app’s client area is extended to cover the entire window, including the title bar area. L'utente è responsabile del disegno e della gestione degli input per l'intera finestra, eccetto i pulsanti didascalia, sovrapposti sopra l'area di disegno dell'app.You are responsible for drawing and input-handling for the entire window except the caption buttons, which are overlaid on top of the app’s canvas.

Per nascondere la barra del titolo predefinita ed estendere il contenuto nell'area della barra del titolo, impostare la proprietà CoreApplicationViewTitleBar. ExtendViewIntoTitleBar su true.To hide the default title bar and extend your content into the title bar area, set the CoreApplicationViewTitleBar.ExtendViewIntoTitleBar property to true.

Questo esempio Mostra come ottenere CoreApplicationViewTitleBar e impostare la proprietà ExtendViewIntoTitleBar su true.This example shows how to get the CoreApplicationViewTitleBar and set the ExtendViewIntoTitleBar property to true. Questa operazione può essere eseguita nel metodo OnLaunched dell'app (app.XAML.cs) o nella prima pagina dell'app.This can be done in your app's OnLaunched method (App.xaml.cs), or in your app's first page.

// using Windows.ApplicationModel.Core;

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

Suggerimento

Questa impostazione viene mantenute quando l'app viene chiusa e riavviata.This setting persists when your app is closed and restarted. In Visual Studio, se si imposta ExtendViewIntoTitleBar su truee si vuole ripristinare l'impostazione predefinita, è necessario impostarla in modo esplicito su false ed eseguire l'app per sovrascrivere l'impostazione permanente.In Visual Studio, if you set ExtendViewIntoTitleBar to true, and then want to revert to the default, you should explicitly set it to false and run your app to overwrite the persisted setting.

Aree trascinabiliDraggable regions

L'area trascinabile della barra del titolo definisce il punto in cui l'utente può fare clic e trascinare per spostare la finestra (anziché semplicemente trascinare il contenuto nell'area di disegno dell'app).The draggable region of the title bar defines where the user can click and drag to move the window around (as opposed to simply dragging content within the app’s canvas). È possibile specificare l'area trascinabile chiamando il metodo Window. SetTitleBar e passando un oggetto UIElement che definisce l'area trascinabile.You specify the draggable region by calling the Window.SetTitleBar method and passing in a UIElement that defines the draggable region. UIElement è spesso un pannello che contiene altri elementi.(The UIElement is often a panel that contains other elements.)

Di seguito viene illustrato come impostare una griglia di contenuto come area della barra del titolo trascinabile.Here's how to set a Grid of content as the draggable title bar region. Questo codice viene inserito in XAML e code-behind per la prima pagina dell'app.This code goes in the XAML and code-behind for your app's first page. Vedere la sezione relativa all' esempio di personalizzazione completa per il codice completo.See the Full customization example section for the full code.

Importante

Per impostazione predefinita, alcuni elementi dell'interfaccia utente, ad esempio Grid, non partecipano all'hit testing quando non dispongono di un set di sfondo.By default, some UI elements such as Grid do not participate in hit testing when they don't have a background set. Per la griglia AppTitleBar nell'esempio seguente per consentire il trascinamento, è quindi necessario impostare lo sfondo su Transparent .For the grid AppTitleBar in the sample below to allow dragging, we therefore need to set the background to Transparent.

<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/Square44x44Logo.png" 
           Grid.Column="1" HorizontalAlignment="Left" 
           Width="20" Height="20" Margin="12,0"/>
    <TextBlock Text="Custom Title Bar" 
               Grid.Column="1" 
               Style="{StaticResource CaptionTextBlockStyle}" 
               Margin="44,8,0,0"/>
</Grid>
public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;
    // Set XAML element as a draggable region.
    Window.Current.SetTitleBar(AppTitleBar);
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    AppTitleBar.Height = sender.Height;
}

UIElement ( AppTitleBar ) fa parte del codice XAML per l'app.The UIElement (AppTitleBar) is part of the XAML for your app. È possibile dichiarare e impostare la barra del titolo in una pagina radice che non cambia oppure dichiarare e impostare un'area della barra del titolo in ogni pagina a cui l'app può accedere.You can either declare and set the title bar in a root page that doesn’t change, or declare and set a title bar region in each page that your app can navigate to. Se si imposta questa impostazione in ogni pagina, è necessario assicurarsi che l'area trascinabile rimanga coerente quando un utente si sposta all'interno dell'app.If you set it in each page, you should make sure the draggable region stays consistent as a user navigates around your app.

È possibile chiamare SetTitleBar per passare a un nuovo elemento della barra del titolo mentre l'app è in esecuzione.You can call SetTitleBar to switch to a new title bar element while your app is running. È anche possibile passare null come parametro a SetTitleBar per ripristinare il comportamento di trascinamento predefinito.You can also pass null as the parameter to SetTitleBar to revert to the default dragging behavior. (Per altre informazioni, vedere "area trascinabile predefinita").(See "Default draggable region" for more info.)

Importante

L'area trascinabile specificata deve essere sottoposta a hit testing. Ciò significa che, per alcuni elementi, potrebbe essere necessario impostare un pennello per lo sfondo trasparente.The draggable region you specify needs to be hit testable, which means, for some elements, you might need to set a transparent background brush. Per altre informazioni, vedere la sezione Osservazioni su VisualTreeHelper. FindElementsInHostCoordinates .See the remarks on VisualTreeHelper.FindElementsInHostCoordinates for more info.

Se ad esempio si definisce una griglia come area trascinabile, impostare Background="Transparent" per renderla trascinabile.For example, if you define a Grid as your draggable region, set Background="Transparent" to make it draggable.

Questa griglia non è trascinabile (ma gli elementi visibili al suo interno sono): <Grid x:Name="AppTitleBar"> .This Grid is not draggable (but visible elements within it are): <Grid x:Name="AppTitleBar">.

Questa griglia è simile, ma l'intera griglia è trascinabile: <Grid x:Name="AppTitleBar" Background="Transparent"> .This Grid looks the same, but the whole Grid is draggable: <Grid x:Name="AppTitleBar" Background="Transparent">.

Area trascinabile predefinitaDefault draggable region

Se non si specifica un'area trascinabile, un rettangolo che rappresenta la larghezza della finestra, l'altezza dei pulsanti della didascalia e posizionato lungo il bordo superiore della finestra viene impostato come area trascinabile predefinita.If you don’t specify a draggable region, a rectangle that is the width of the window, the height of the caption buttons, and positioned along the top edge of the window is set as the default draggable region.

Se si definisce un'area trascinabile, il sistema compatta l'area trascinabile predefinita fino a una piccola area della dimensione di un pulsante della didascalia, posizionata a sinistra dei pulsanti della didascalia (o a destra se i pulsanti didascalia si trovano sul lato sinistro della finestra).If you do define a draggable region, the system shrinks the default draggable region down to a small area the size of a caption button, positioned to the left of the caption buttons (or to the right if the captions buttons are on the left side of the window). In questo modo si garantisce che l'utente possa trascinare sempre un'area coerente.This ensures that there is always a consistent area the user can drag.

Pulsanti didascalia sistemaSystem caption buttons

Il sistema riserva l'angolo superiore sinistro o superiore destro della finestra dell'app per i pulsanti della didascalia di sistema (indietro, riduzione a icona, Ingrandisci e Chiudi).The system reserves the upper-left or upper-right corner of the app window for the system caption buttons (Back, Minimize, Maximize, Close). Il sistema mantiene il controllo dell'area di controllo della didascalia per garantire che venga fornita la funzionalità minima per il trascinamento, la riduzione a icona, l'ottimizzazione e la chiusura della finestra.The system retains control of the caption control area to guarantee that minimum functionality is provided for dragging, minimizing, maximizing, and closing the window. Il sistema consente di disegnare il pulsante Chiudi nell'angolo superiore destro per le lingue da sinistra a destra e in alto a sinistra per le lingue da destra a sinistra.The system draws the Close button in the upper-right for left-to-right languages and the upper-left for right-to-left languages.

Le dimensioni e la posizione dell'area di controllo della didascalia vengono comunicate dalla classe CoreApplicationViewTitleBar in modo che sia possibile tenerne conto nel layout dell'interfaccia utente della barra del titolo.The dimensions and position of the caption control area is communicated by the CoreApplicationViewTitleBar class so that you can account for it in the layout of your title bar UI. La larghezza dell'area riservata su ogni lato è fornita dalle proprietà SystemOverlayLeftInset o SystemOverlayRightInset e l'altezza viene fornita dalla proprietà Height .The width of the reserved region on each side is given by the SystemOverlayLeftInset or SystemOverlayRightInset properties, and its height is given by the Height property.

È possibile creare contenuto sotto l'area di controllo della didascalia definita da queste proprietà, ad esempio lo sfondo dell'app, ma non è consigliabile inserire un'interfaccia utente con cui si prevede che l'utente sia in grado di interagire.You can draw content underneath the caption control area defined by these properties, such as your app background, but you should not put any UI that you expect the user to be able to interact with. Non riceve alcun input perché l'input per i controlli didascalia viene gestito dal sistema.It does not receive any input because input for the caption controls is handled by the system.

È possibile gestire l'evento LayoutMetricsChanged per rispondere alle modifiche apportate alle dimensioni dei pulsanti della didascalia.You can handle the LayoutMetricsChanged event to respond to changes in the size of the caption buttons. Questo problema può verificarsi, ad esempio, quando il pulsante indietro del sistema viene visualizzato o nascosto.For example, this can happen when the system back button is shown or hidden. Gestire questo evento per verificare e aggiornare il posizionamento degli elementi dell'interfaccia utente che dipendono dalle dimensioni della barra del titolo.Handle this event to verify and update the positioning of UI elements that depend on the title bar's size.

Questo esempio Mostra come modificare il layout della barra del titolo per tenere conto delle modifiche, ad esempio il pulsante indietro del sistema visualizzato o nascosto.This example shows how to adjust the layout of your title bar to account for changes like the system back button being shown or hidden. AppTitleBar, LeftPaddingColumn e RightPaddingColumn sono dichiarati nel codice XAML illustrato in precedenza.AppTitleBar, LeftPaddingColumn, and RightPaddingColumn are declared in the XAML shown previously.

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    UpdateTitleBarLayout(sender);
}

private void UpdateTitleBarLayout(CoreApplicationViewTitleBar coreTitleBar)
{
    // Get the size of the caption controls area and back button 
    // (returned in logical pixels), and move your content around as necessary.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
    TitleBarButton.Margin = new Thickness(0,0,coreTitleBar.SystemOverlayRightInset,0);

    // Update title bar control size as needed to account for system size changes.
    AppTitleBar.Height = coreTitleBar.Height;
}

Contenuto interattivoInteractive content

È possibile inserire controlli interattivi, ad esempio pulsanti, menu o una casella di ricerca, nella parte superiore dell'app in modo che risultino nella barra del titolo.You can place interactive controls, like buttons, menus, or a search box, in the top part of the app so they appear to be in the title bar. Tuttavia, esistono alcune regole che è necessario seguire per assicurarsi che gli elementi interattivi ricevano l'input dell'utente.However, there are a few rules you must follow to ensure that your interactive elements receive user input.

  • È necessario chiamare SetTitleBar per definire un'area come area della barra del titolo trascinabile.You must call SetTitleBar to define an area as the draggable title bar region. In caso contrario, il sistema imposta l'area trascinabile predefinita nella parte superiore della pagina.If you don’t, the system sets the default draggable region at the top of the page. Il sistema gestirà quindi tutti gli input utente in quest'area e impedirà all'input di raggiungere i controlli.The system will then handle all user input to this area, and prevent input from reaching your controls.
  • Posizionare i controlli interattivi sulla parte superiore dell'area trascinabile definita dalla chiamata a SetTitleBar (con un ordine z superiore).Place your interactive controls over the top of the draggable region defined by the call to SetTitleBar (with a higher z-order). Non rendere i controlli interattivi figlio dell'elemento UIElement passato a SetTitleBar.Don’t make your interactive controls children of the UIElement passed to SetTitleBar. Dopo che un elemento è stato passato a SetTitleBar, il sistema lo considera come la barra del titolo di sistema e gestisce tutti gli input del puntatore a tale elemento.After you pass an element to SetTitleBar, the system treats it like the system title bar and handles all pointer input to that element.

In questo caso, l' TitleBarButton elemento ha un ordine z superiore rispetto a AppTitleBar , quindi riceve l'input dell'utente.Here, the TitleBarButton element has a higher z-order than AppTitleBar, so it receives user input.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <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/Square44x44Logo.png"
               Grid.Column="1" HorizontalAlignment="Left"
               Width="20" Height="20" Margin="12,0"/>
        <TextBlock Text="Custom Title Bar"
                   Grid.Column="1"
                   Style="{StaticResource CaptionTextBlockStyle}"
                   Margin="44,8,0,0"/>
    </Grid>

    <!-- This Button has a higher z-order than AppTitleBar, 
         so it receives user input. -->
    <Button x:Name="TitleBarButton" Content="Button in the title bar"
        HorizontalAlignment="Right"/>
</Grid>

Trasparenza nei pulsanti della didascaliaTransparency in caption buttons

Quando si imposta ExtendViewIntoTitleBar su true, è possibile rendere trasparente lo sfondo dei pulsanti della didascalia per consentire la visualizzazione dello sfondo dell'app.When you set ExtendViewIntoTitleBar to true, you can make the background of the caption buttons transparent to let your app background show through. In genere si imposta lo sfondo su colori. trasparente per la trasparenza completa.You typically set the background to Colors.Transparent for full transparency. Per la trasparenza parziale, impostare il canale alfa per il colore su cui si imposta la proprietà.For partial transparency, set the alpha channel for the Color you set the property to.

Queste proprietà di ApplicationViewTitleBar possono essere trasparenti:These ApplicationViewTitleBar properties can be transparent:

  • ButtonBackgroundColorButtonBackgroundColor
  • ButtonHoverBackgroundColorButtonHoverBackgroundColor
  • ButtonPressedBackgroundColorButtonPressedBackgroundColor
  • ButtonInactiveBackgroundColorButtonInactiveBackgroundColor

Il colore di sfondo del pulsante non viene applicato al pulsante Chiudi al passaggio del mouse e agli stati premuti.The button background color is not applied to the close button hover and pressed states. Il pulsante Chiudi usa sempre il colore definito dal sistema per tali Stati.The close button always uses the system-defined color for those states.

Tutte le altre proprietà del colore continueranno a ignorare il canale alfa.All other color properties will continue to ignore the alpha channel. Se ExtendViewIntoTitleBar è impostato su false, il canale alfa viene sempre ignorato per tutte le proprietà dei colori ApplicationViewTitleBar.If ExtendViewIntoTitleBar is set to false, the alpha channel is always ignored for all ApplicationViewTitleBar color properties.

Modalità schermo intero e TabletFull screen and tablet mode

Quando l'app viene eseguita in modalità schermo intero o Tablet, i pulsanti barra del titolo e controllo didascalia vengono nascosti dal sistema.When your app runs in full screen or tablet mode, the system hides the title bar and caption control buttons. Tuttavia, l'utente può richiamare la barra del titolo affinché venga visualizzata come sovrimpressione sopra l'interfaccia utente dell'app.However, the user can invoke the title bar to have it shown as an overlay on top of the app’s UI. È possibile gestire l'evento CoreApplicationViewTitleBar. IsVisibleChanged per ricevere una notifica quando la barra del titolo viene nascosta o richiamata e mostrare o nascondere il contenuto della barra del titolo personalizzata in base alle esigenze.You can handle the CoreApplicationViewTitleBar.IsVisibleChanged event to be notified when the title bar is hidden or invoked, and show or hide your custom title bar content as needed.

Questo esempio illustra come gestire IsVisibleChanged per visualizzare e nascondere l' AppTitleBar elemento illustrato in precedenza.This example shows how to handle IsVisibleChanged to show and hide the AppTitleBar element shown previously.

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 immessa solo se supportata dall'app.Full screen mode can be entered only if supported by your app. Per altre informazioni, vedere ApplicationView. IsFullScreenMode .See ApplicationView.IsFullScreenMode for more info. La modalità tablet è un'opzione utente nell'hardware supportato, quindi un utente può scegliere di eseguire qualsiasi app in modalità tablet.Tablet mode is a user option on supported hardware, so a user can choose to run any app in tablet mode.

Esempio di personalizzazione completaFull customization example

<Page
    x:Class="CustomTitleBar.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CustomTitleBar"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <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/Square44x44Logo.png" 
                   Grid.Column="1" HorizontalAlignment="Left" 
                   Width="20" Height="20" Margin="12,0"/>
            <TextBlock Text="Custom Title Bar" 
                       Grid.Column="1" 
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       Margin="44,8,0,0"/>
        </Grid>

        <!-- This Button has a higher z-order than MyTitleBar, 
             so it receives user input. -->
        <Button x:Name="TitleBarButton" Content="Button in the title bar"
                HorizontalAlignment="Right"/>
    </Grid>
</Page>
public MainPage()
{
    this.InitializeComponent();

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

    // Set XAML element as a draggable region.
    Window.Current.SetTitleBar(AppTitleBar);

    // Register a handler for when the size of the overlaid caption control changes.
    // For example, when the app moves to a screen with a different DPI.
    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;
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    UpdateTitleBarLayout(sender);
}

private void UpdateTitleBarLayout(CoreApplicationViewTitleBar coreTitleBar)
{
    // Get the size of the caption controls area and back button 
    // (returned in logical pixels), and move your content around as necessary.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
    TitleBarButton.Margin = new Thickness(0,0,coreTitleBar.SystemOverlayRightInset,0);

    // Update title bar control size as needed to account for system size changes.
    AppTitleBar.Height = coreTitleBar.Height;
}

private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (sender.IsVisible)
    {
        AppTitleBar.Visibility = Visibility.Visible;
    }
    else
    {
        AppTitleBar.Visibility = Visibility.Collapsed;
    }
}

Cosa fare e cosa non fareDo's and don'ts

  • Renderlo evidente quando la finestra è attiva o inattiva.Do make it obvious when your window is active or inactive. Modificare come minimo il colore del testo, delle icone e dei pulsanti nella barra del titolo.At a minimum, change the color of the text, icons, and buttons in your title bar.
  • Definire un'area trascinabile lungo il bordo superiore dell'area di disegno dell'app.Do define a draggable region along the top edge of the app canvas. La corrispondenza della posizione delle barre del titolo del sistema consente agli utenti di trovare più facilmente.Matching the placement of system title bars makes it easier for users to find.
  • Definire un'area trascinabile che corrisponda alla barra del titolo visiva (se presente) nell'area di disegno dell'app.Do define a draggable region that matches the visual title bar (if any) on the app’s canvas.