Barre de titre

Le contrôle TitleBar offre un moyen simplifié de créer une barre de titre personnalisée pour votre application. La barre de titre est un composant fondamental de l’interface utilisateur d’une application Windows qui identifie l’application via son icône et son titre, héberge les boutons de légende système qui permettent à un utilisateur de fermer, d’optimiser, de réduire et de restaurer la fenêtre et de faire glisser la fenêtre autour de l’écran.

Vous pouvez utiliser une barre de titre personnalisée pour mieux intégrer la zone de barre de titre à l’interface utilisateur de votre application. La barre de titre peut être personnalisée pour correspondre au style visuel de l’application à l’aide de thèmes Mica. Il peut inclure d’autres informations pertinentes, telles qu’un titre de document ou l’état actuel (par exemple, « Édition », « Affichage », etc.). Il peut également héberger d’autres contrôles WinUI, tels que AutoSuggestBox et PersonPicture, offrant une expérience utilisateur cohérente pour votre application.

Est-ce le contrôle approprié ?

Utilisez le contrôle TitleBar lorsque vous souhaitez intégrer la zone de barre de titre à l’interface utilisateur de votre application à l’aide de personnalisations telles que les sous-titres, les thèmes Mica et les intégrations avec les contrôles WinUI.

Anatomie

Par défaut, la barre de titre affiche uniquement les boutons de légende système. D’autres parties de la barre de titre sont affichées ou masquées en fonction des paramètres de propriété associés.

La barre de titre est divisée en zones suivantes :

• Bouton précédent :IsBackButtonEnabled, IsBackButtonVisible, BackRequested - Un bouton précédent intégré pour faciliter la navigation.
• Bouton bascule volet :IsPaneToggleButtonVisible, PaneToggleRequested : ce bouton est destiné à être utilisé conjointement avec le contrôle NavigationView.
• En-tête gauche :LeftHeader
• Icône :IconSource
• Titre :Titre
• Sous-titre :Sous-titre
• Contenu :Contenu
• En-tête droit :RightHeader
• Min drag region : Cette zone est réservée en regard des boutons de légende système afin que l’utilisateur dispose toujours d’un emplacement pour attraper et déplacer la fenêtre.
• Boutons de légende système : Ces boutons ne font pas partie du contrôle TitleBar : il alloue simplement de l’espace où les boutons de légende apparaissent, en fonction des paramètres RTL ou LTR. Les boutons de légende et les personnalisations sont gérés par AppWindowTitleBar.

La disposition est inversée lorsque le FlowDirection est RightToLeft.

Créer une barre de titre

L’application WinUI 3 Gallery inclut des exemples interactifs de la plupart des contrôles, des caractéristiques et des fonctionnalités de WinUI 3. Obtenir l’application à partir du Microsoft Store ou obtenir le code source sur GitHub

Cet exemple crée une barre de titre simple qui remplace la barre de titre système. Il a un titre, une icône et un thème 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); 
}

Intégration à NavigationView

Le mode Navigation comporte un bouton précédent intégré et un bouton bascule du volet. Les instructions Fluent Design recommandent que ces contrôles soient placés dans la barre de titre lorsqu’une barre de titre personnalisée est utilisée.

Cet exemple montre comment intégrer le contrôle TitleBar à un contrôle NavigationView en masquant le bouton Précédent et le bouton bascule du volet dans l’affichage de navigation et en utilisant les boutons correspondants dans la barre de titre à la place.

<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 et WinUI 2

Le contrôle TitleBar n’est pas disponible pour UWP et WinUI 2. Au lieu de cela, consultez Personnalisation de la barre de titre (applications UWP).

Articles connexes

• Barre de titre (design)
• Personnalisation de la barre de titre
• TitleBar, classe