Barra del titolo

Il controllo TitleBar offre un modo semplificato per creare una barra del titolo personalizzata per l'app. La barra del titolo è un componente fondamentale dell'interfaccia utente di un'app di Windows che identifica l'app tramite l'icona e il titolo, ospita i pulsanti di didascalia di sistema che consentono a un utente di chiudere, ingrandire, ridurre al minimo e ripristinare la finestra e consente a un utente di trascinare la finestra intorno allo schermo.

Puoi usare una barra del titolo personalizzata per integrare meglio l'area della barra del titolo con l'interfaccia utente dell'app. La barra del titolo può essere personalizzata in modo che corrisponda allo stile di visualizzazione dell'app usando il tema Mica. Può includere altre informazioni rilevanti, ad esempio un titolo del documento o lo stato corrente,ad esempio "Modifica", "Visualizzazione" e così via. Può anche ospitare altri controlli WinUI, ad esempio AutoSuggestBox e PersonPicture, offrendo un'esperienza utente coerente per la tua app.

Questo è il controllo giusto?

Usa il controllo TitleBar quando vuoi integrare l'area della barra del titolo con l'interfaccia utente dell'app usando personalizzazioni come sottotitoli, tema Mica e integrazioni con i controlli WinUI.

Anatomia

Per impostazione predefinita, la barra del titolo mostra solo i pulsanti di didascalia di sistema. Altre parti della barra del titolo vengono visualizzate o nascoste a seconda delle impostazioni delle proprietà associate.

La barra del titolo è suddivisa in queste aree:

• Pulsante Indietro:IsBackButtonEnabled, IsBackButtonVisible, BackRequested - Pulsante Indietro predefinito per la navigazione.
• Pulsante Attiva/Disattiva Riquadro:IsPaneToggleButtonVisible, PaneToggleRequested. Questo pulsante deve essere usato insieme al controllo NavigationView.
• Intestazione sinistra:LeftHeader
• Icon:IconSource
• Titolo:Titolo
• Sottotitolo:Sottotitolo
• Content:Content
• Intestazione destra:RightHeader
• Area di trascinamento minima: Questa area è riservata accanto ai pulsanti di didascalia di sistema in modo che l'utente abbia sempre un posto in cui afferrare la finestra per il trascinamento.
• Pulsanti di didascalia di sistema: Questi pulsanti non fanno parte del controllo TitleBar, ma alloca semplicemente lo spazio in cui vengono visualizzati i pulsanti della didascalia, a seconda delle impostazioni RTL o LTR. I pulsanti e le personalizzazioni della didascalia vengono gestiti da AppWindowTitleBar.

Il layout viene invertito quando FlowDirection è RightToLeft.

Creare una barra del titolo

• API importanti:Classe TitleBar, proprietà Title

Aprire l'app Raccolta WinUI 3 e visualizzare titleBar in azione

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

In questo esempio viene creata una semplice barra del titolo che sostituisce la barra del titolo di sistema. Ha un titolo, un'icona e un tema Mica.

<Window
    ...  >
    <Window.SystemBackdrop>
        <MicaBackdrop Kind="Base"/>
    </Window.SystemBackdrop>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TitleBar x:Name="SimpleTitleBar"
                  Title="My App">
            <TitleBar.IconSource>
                <FontIconSource Glyph="&#xF4AA;"/>
            </TitleBar.IconSource>
        </TitleBar>

        <!-- App content -->
        <Frame x:Name="RootFrame" Grid.Row="1"/>
    </Grid>
</Window>

public MainWindow()
{
    this.InitializeComponent();

    // Hides the default system title bar.
    ExtendsContentIntoTitleBar = true;
    // Replace system title bar with the WinUI TitleBar control. 
    SetTitleBar(SimpleTitleBar); 
}

Integrazione con NavigationView

La Visualizzazione di navigazione include un pulsante indietro e un pulsante per alternare il riquadro predefiniti. Le linee guida di Fluent Design consigliano di posizionare questi controlli nella barra del titolo quando viene usata una barra del titolo personalizzata.

In questo esempio viene illustrato come integrare il controllo TitleBar con un controllo NavigationView nascondendo invece il pulsante Indietro e l'interruttore del riquadro nella visualizzazione di spostamento e usando i pulsanti corrispondenti sulla barra del titolo.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <TitleBar Title="My App"
              IsBackButtonVisible="True"
              IsBackButtonEnabled="{x:Bind RootFrame.CanGoBack, Mode=OneWay}"
              BackRequested="TitleBar_BackRequested"
              IsPaneToggleButtonVisible="True"
              PaneToggleRequested="TitleBar_PaneToggleRequested">
    </TitleBar>

    <NavigationView x:Name="RootNavigationView" Grid.Row="1"
                    IsBackButtonVisible="Collapsed"
                    IsPaneToggleButtonVisible="False">
        <Frame x:Name="RootFrame" />
    </NavigationView>
</Grid>

private void TitleBar_BackRequested(TitleBar sender, object args)
{
    if (RootFrame.CanGoBack)
    {
        RootFrame.GoBack();
    }
}

private void TitleBar_PaneToggleRequested(TitleBar sender, object args)
{
    RootNavigationView.IsPaneOpen = !RootNavigationView.IsPaneOpen;
}

UWP e WinUI 2

Il controllo TitleBar non è disponibile per UWP e WinUI 2. Vedi invece personalizzazione della barra del titolo (app UWP).

Articoli correlati

• Barra del titolo (progettazione)
• Personalizzazione della barra del titolo
• Classe TitleBar