Personnalisation de la barre de titre

Article
01/15/2024

Windows fournit une barre de titre par défaut pour chaque fenêtre, et vous permet de la personnaliser afin qu’elle corresponde à la personnalité de votre application. La barre de titre par défaut est fournie avec certains composants standard et des fonctionnalités de base telles que le déplacement et le redimensionnement de la fenêtre.

Application Windows montrant la barre de titre

Consultez l’article de conception Barre de titre pour obtenir des conseils sur la personnalisation de la barre de titre de votre application, le contenu acceptable de la zone de la barre de titre, et les modèles d’interface utilisateur recommandés.

Consulter les conseils relatifs à Windows 11 Fluent Design pour la barre de titre

Remarque

Cet article explique comment personnaliser la barre de titre pour les applications qui utilisent UWP et WinUI 2. Pour les applications qui utilisent le SDK d'application Windows et WinUI 3, consultez la personnalisation de la barre de titre pour le SDK d'application Windows.

Si vous envisagez de migrer votre application UWP vers le SDK d’application Windows, consultez notre guide de migration des fonctionnalités de fenêtrage. Pour plus d’informations, consultez Migration de la fonctionnalité de fenêtrage.

S’applique à : UWP/WinUI 2
API importantes : propriété ApplicationView.TitleBar, classe ApplicationViewTitleBar, classe CoreApplicationViewTitleBar

Composants de la barre de titre

Cette liste décrit les composants de la barre de titre standard.

Rectangle de barre de titre
Texte du titre
Menu système : accessible en cliquant sur l’icône d’application ou en cliquant avec le bouton droit sur la barre de titre
Contrôles de légende
- Bouton Réduire
- Bouton Agrandir/Restaurer
- Bouton Fermer

Dans les applications UWP, vous pouvez personnaliser la barre de titre à l’aide des membres des classes ApplicationView et CoreApplicationView. Il existe plusieurs API pour modifier progressivement l’apparence de votre barre de titre en fonction du niveau de personnalisation nécessaire.

Remarque

La classe Windows.UI.WindowManagement.AppWindow, utilisée pour les fenêtres secondaires dans les applications UWP, ne prend pas en charge la personnalisation de la barre de titre. Pour personnaliser la barre de titre d’une application UWP qui utilise des fenêtres secondaires, utilisez ApplicationView comme décrit dans Afficher plusieurs vues avec ApplicationView.

Étendue de la personnalisation de la barre de titre

Vous pouvez appliquer deux niveaux de personnalisation à la barre de titre : appliquer des modifications mineures à la barre de titre par défaut, ou étendre le canevas de votre application dans la zone de la barre de titre et fournir du contenu entièrement personnalisé.

Simple

Pour une personnalisation simple, telle que la modification de la couleur de la barre de titre, vous pouvez définir des propriétés sur l’objet de barre de titre de la fenêtre de votre application afin de spécifier les couleurs que vous souhaitez utiliser pour les éléments de barre de titre. Dans ce cas, le système conserve la responsabilité de tous les autres aspects de la barre de titre, tels que le dessin du titre de l’application et la définition des zones de glissement.

Complète

Votre autre option consiste à masquer la barre de titre par défaut et à la remplacer par votre propre contenu personnalisé. Par exemple, vous pouvez placer du texte, une zone de recherche ou des menus personnalisés dans la zone de la barre de titre. Vous devrez également utiliser cette option pour étendre une toile de fond de matériau, comme Mica, dans la zone de la barre de titre.

Lorsque vous optez pour une personnalisation complète, vous êtes responsable de la mise en place du contenu dans la zone de barre de titre, et vous pouvez définir votre propre région de glissement. Les contrôles de légende (boutons système Fermer, Réduire et Agrandir) sont toujours disponibles et gérés par le système, mais les éléments tels que le titre de l’application ne le sont pas. Vous devrez créer ces éléments vous-même en fonction des besoins de votre application.

Personnalisation simple

Si vous souhaitez personnaliser uniquement les couleurs ou l’icône de la barre de titre, vous pouvez définir des propriétés sur l’objet de barre de titre de la fenêtre de votre application.

Titre

Par défaut, la barre de titre affiche le nom d’affichage de l’application comme titre de la fenêtre. Le nom d’affichage est défini dans le fichier Package.appxmanifest.

Pour ajouter du texte personnalisé au titre, définissez la propriété ApplicationView.Title sur une valeur de texte, comme indiqué ici.

public MainPage()
{
    this.InitializeComponent();

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

Votre texte est ajouté au titre de la fenêtre, qui s’affiche sous la forme « texte personnalisé - nom d’affichage de l’application ». Pour afficher un titre personnalisé sans nom d’affichage de l’application, vous devez remplacer la barre de titre par défaut, comme indiqué dans la section Personnalisation complète.

Couleurs

Cet exemple montre comment obtenir une instance d’ApplicationViewTitleBar et définir ses propriétés de couleur.

Ce code peut être placé dans la méthode OnLaunched de votre application (App.xaml.cs), après l’appel de Window.Activate, ou dans la première page de votre application.

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

Il existe quelques éléments à prendre en compte lors de la définition des couleurs de la barre de titre :

La couleur d’arrière-plan du bouton n’est pas appliquée aux étatshover et pressed du bouton Fermer. Le bouton Fermer utilise toujours la couleur définie par le système pour ces états.
L’affectation de la valeur null à une propriété de couleur entraîne sa réinitialisation à la couleur système par défaut.
Vous ne pouvez pas définir de couleurs transparentes. Le canal alpha de la couleur est ignoré.

Windows offre à un utilisateur la possibilité d’appliquer sa couleur d’accentuation sélectionnée à la barre de titre. Si vous définissez une couleur de barre de titre, nous vous recommandons de définir explicitement toutes les couleurs. Cela garantit qu’il n’y a pas de combinaisons de couleurs involontaires qui se produisent en raison des paramètres de couleur définis par l’utilisateur.

Personnalisation complète

Lorsque vous optez pour la personnalisation complète de la barre de titre, la zone cliente de votre application est étendue de façon à couvrir toute la fenêtre, y compris la zone de barre de titre. Vous êtes responsable du dessin et de la gestion des entrées pour l’ensemble de la fenêtre, à l’exception des boutons de légende, qui sont toujours fournis par la fenêtre.

Pour masquer la barre de titre par défaut et étendre votre contenu dans la zone de barre de titre, définissez la propriété ExtendViewIntoTitleBar sur true. Vous pouvez définir cette propriété dans la méthode OnLaunched de votre application (App.xaml.cs) ou dans la première page de votre application.

Conseil

Consultez la section Exemple de personnalisation complète pour voir tout le code en même temps.

Cet exemple montre comment obtenir la CoreApplicationViewTitleBar et affecter la valeur de la propriété ExtendViewIntoTitleBar sur true.

using Windows.ApplicationModel.Core;

public MainPage()
{
    this.InitializeComponent();

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

Conseil

Ce paramètre persiste lorsque votre application est fermée et redémarrée. Dans Visual Studio, si vous définissez ExtendViewIntoTitleBar sur true, puis que vous souhaitez revenir à la valeur par défaut, vous devez le définir explicitement sur false et exécuter votre application pour remplacer le paramètre persistant.

Contenu de la barre de titre et régions de glissement

Lorsque votre application est étendue à la zone de barre de titre, vous êtes responsable de la définition et de la gestion de l’interface utilisateur pour la barre de titre. Cela inclut généralement, au minimum, la spécification du texte de titre et de la zone de glissement. La zone de glissement de la barre de titre définit l’emplacement où l’utilisateur peut cliquer et faire glisser pour déplacer la fenêtre. C’est également là que l’utilisateur peut cliquer avec le bouton droit pour afficher le menu système.

Pour en savoir plus sur le contenu acceptable de la barre de titre et les modèles d’interface utilisateur recommandés, consultez Conception de barre de titre.

Vous spécifiez la région de glissement en appelant la méthode Window.SetTitleBar et en passant un UIElement qui définit la région de glissement. (Le UIElement est généralement d’un panneau qui contient d’autres éléments.) La propriété ExtendViewIntoTitleBar doit être définie sur true pour que l’appel de SetTitleBar ait un effet quelconque.

Voici comment définir un Grid de contenu en tant que zone de barre de titre pouvant être glissée. Ce code se trouve dans le code XAML et le code-behind de la première page de votre application.

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

Par défaut, la barre de titre du système affiche le nom d’affichage de l’application comme titre de la fenêtre. Le nom complet est défini dans le fichier Package.appxmanifest. Vous pouvez obtenir cette valeur et l’utiliser dans votre barre de titre personnalisée comme suit.

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

Important

La région de glissement que vous spécifiez doit être testée. Par défaut, certains éléments d’interface utilisateur, tels que Grid, ne participent pas aux tests de positionnement lorsqu’ils n’ont pas d’ensemble d’arrière-plan. Cela signifie que, pour certains éléments, vous devrez peut-être définir un pinceau d’arrière-plan transparent. Pour plus d’informations, consultez les remarques sur VisualTreeHelper.FindElementsInHostCoordinates.

Par exemple, si vous définissez une grille comme région de glissement, définissez Background="Transparent" pour la rendre apte au glissement.

Cette grille n’est pas apte au glissement (mais les éléments visibles dans celui-ci sont) : <Grid x:Name="AppTitleBar">.

Cette grille ressemble à celle-ci, mais l’ensemble de la grille est apte a glissement : <Grid x:Name="AppTitleBar" Background="Transparent">.

Contenu interactif

Vous pouvez placer des contrôles interactifs, tels que des boutons, des menus ou une zone de recherche, dans la partie supérieure de l’application afin qu’ils apparaissent dans la barre de titre. Toutefois, vous devez suivre quelques règles afin de vous assurer que vos éléments interactifs reçoivent une entrée utilisateur tout en permettant aux utilisateurs de déplacer votre fenêtre.

Vous devez appeler SetTitleBar pour définir une zone en tant que zone de barre de titre pouvant être glissée. Si ce n’est pas le cas, le système définit la région de glissessement par défaut en haut de la page. Le système gère ensuite toutes les entrées utilisateur dans cette zone et empêche l’entrée d’atteindre vos contrôles.
Placez vos contrôles interactifs en haut de la région de glisser de glissement définie en appelant SetTitleBar (avec un ordre de plan supérieur). Ne faites pas de vos contrôles interactifs des enfants du UIElement transmis à SetTitleBar. Une fois que vous avez transmis un élément à SetTitleBar, le système le traite comme la barre de titre système et gère toutes les entrées de pointeur vers cet élément.

Ici, l’élément AutoSuggestBox a un ordre de z supérieur à AppTitleBar ; il reçoit donc l’entrée utilisateur.

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

Boutons de légende système

Le système réserve le coin supérieur gauche ou supérieur droit de la fenêtre d’application pour les boutons de légende système (réduire, agrandir/restaurer, fermer). Le système conserve le contrôle de la zone de bouton de légende afin de garantir qu’une fonctionnalité minimale est fournie pour le déplacement, la réduction, l’agrandissement et la fermeture de la fenêtre. Le système dessine le bouton Fermer en haut à droite pour les langues de gauche à droite, et en haut à gauche pour les langues de droite à gauche.

Vous pouvez dessiner du contenu sous la zone du contrôle de légende, comme l’arrière-plan de votre application, mais vous ne devez pas y placer d’interface utilisateur avec laquelle vous prévoyez que l’utilisateur soit en mesure d’interagir. Cette zone ne reçoit aucune entrée, car l’entrée pour les contrôles de légende est gérée par le système.

Ces lignes de l’exemple précédent montrent les colonnes de remplissage dans le XAML qui définit la barre de titre. L’utilisation de colonnes de remplissage au lieu de marges garantit que l’arrière-plan peint la zone sous les boutons de contrôle de légende (pour les boutons transparents). L’utilisation de colonnes de remplissage de droite et de gauche garantit que votre barre de titre se comporte correctement à la fois dans les dispositions de droite à gauche et de gauche à droite.

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

Les dimensions et la position de la zone du contrôle de légende sont communiquées par la classe CoreApplicationViewTitleBar afin que vous puissiez en tenir compte dans la disposition de votre interface utilisateur de barre de titre. La largeur de la région réservée de chaque côté est donnée par les propriétés SystemOverlayLeftInset ou SystemOverlayRightInset, et sa hauteur est donnée par la propriété Height.

Vous pouvez gérer l’événement LayoutMetricsChanged pour répondre aux modifications apportées à la taille des boutons Légende. Par exemple, cela peut se produire si la disposition de l’application passe de gauche à droite à de droite à gauche. Gérez cet événement pour vérifier et mettre à jour le positionnement des éléments de l’IU qui dépendent de la taille de la barre de titre.

Cet exemple montre comment ajuster la disposition de votre barre de titre pour tenir compte des modifications apportées aux indicateurs de la barre de titre. AppTitleBar, LeftPaddingColumn et RightPaddingColumn sont déclarés dans le code XAML indiqué précédemment.

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

Couleur et transparence dans les boutons de légende

Lorsque vous étendez le contenu de votre application dans la zone de barre de titre, vous pouvez rendre l’arrière-plan des boutons de légende transparents afin que l’arrière-plan de votre application soit visible. Vous définissez généralement l’arrière-plan sur Colors.Transparent pour une transparence totale. Pour une transparence partielle, définissez le canal alpha de la couleur (Color) sur laquelle vous définissez la propriété.

Ces propriétés de barre de titre peuvent être transparentes :

Toutes les autres propriétés de couleur continueront à ignorer le canal alpha. Si ExtendViewIntoTitleBar a la valeur false, le canal alpha est toujours ignoré pour toutes les propriétés de couleur ApplicationViewTitleBar.

La couleur d’arrière-plan du bouton n’est pas appliquée aux étatshover et pressed du bouton Fermer. Le bouton Fermer utilise toujours la couleur définie par le système pour ces états.

Conseil

Mica est un excellent matériau qui permet de distinguer la fenêtre qui a le focus. Nous le recommandons comme arrière-plan pour les fenêtres à longue durée de vie dans Windows 11. Si vous avez appliqué Mica dans la zone cliente de votre fenêtre, vous pouvez l’étendre dans la zone de barre de titre et rendre vos boutons de légende transparents afin que le Mica soit visible. Pour plus d’informations, consultez Matériau Mica.

Estomper la barre de titre lorsque la fenêtre est inactive

Le caractère actif ou inactif de votre fenêtre doit être une évidence. Au minimum, vous devez modifier la couleur du texte, des icônes et des boutons dans votre barre de titre.

Gérez l’événement CoreWindow.Activated pour déterminer l’état d’activation de la fenêtre et mettez à jour l’interface utilisateur de la barre de titre en fonction des besoins.

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

Réinitialiser la barre de titre

Vous pouvez appeler SetTitleBar pour basculer vers un nouvel élément de barre de titre pendant l’exécution de votre application. Vous pouvez également passer null comme paramètre de SetTitleBar et définir ExtendViewIntoTitleBar sur false pour revenir à la barre de titre système par défaut.

Afficher et masquer la barre de titre

Si vous ajoutez la prise en charge des modes plein écran etsuperposition compacte à votre application, vous devrez peut-être apporter des modifications à votre barre de titre lorsque votre application bascule entre ces modes.

Lorsque votre application s’exécute en mode plein écran ou tablette (Windows 10 uniquement), le système masque la barre de titre et les boutons de contrôle de légende. Toutefois, l’utilisateur peut invoquer la barre de titre pour qu’elle s’affiche sous la forme d’une superposition sur l’IU de l’application.

Vous pouvez gérer l’événement CoreApplicationViewTitleBar.IsVisibleChanged pour être averti lorsque la barre de titre est masquée ou invoquée, et afficher ou masquer le contenu de votre barre de titre personnalisée en fonction des besoins.

Cet exemple montre comment gérer l’événement IsVisibleChanged pour afficher et masquer l’élément AppTitleBar des exemples précédents.

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

Remarque

Le mode plein écran est possible uniquement s’il est pris en charge par votre application. Pour plus d’informations, consultez ApplicationView.IsFullScreenMode. Le mode tablette (Windows 10 uniquement) est une option utilisateur dans Windows 10 sur le matériel pris en charge, qui permet qu’un utilisateur choisisse d’exécuter n’importe quelle application en mode tablette.

Pratiques conseillées et déconseillées

Le caractère actif ou inactif de votre fenêtre doit être une évidence. Au minimum, modifiez la couleur du texte, des icônes et des boutons dans votre barre de titre.
Définissez une zone de glissement le long du bord supérieur du canevas de l’application. La mise en correspondance de l’emplacement des barres de titre système permet aux utilisateurs de les trouver plus facilement.
Définissez une zone de glissement qui correspond à la barre de titre visuelle (le cas échéant) sur le canevas de l’application.

Exemple de personnalisation complète

Cet exemple montre tout le code décrit dans la section Personnalisation complète.

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

Partager via

Personnalisation de la barre de titre

Composants de la barre de titre

Étendue de la personnalisation de la barre de titre

Simple

Complète

Personnalisation simple

Titre

Couleurs

Personnalisation complète

Contenu de la barre de titre et régions de glissement

Contenu interactif

Boutons de légende système

Couleur et transparence dans les boutons de légende

Estomper la barre de titre lorsque la fenêtre est inactive

Réinitialiser la barre de titre

Afficher et masquer la barre de titre

Pratiques conseillées et déconseillées

Exemple de personnalisation complète

Commentaires

Ressources supplémentaires

Partager via

Personnalisation de la barre de titre

Composants de la barre de titre

Étendue de la personnalisation de la barre de titre

Simple

Complète

Personnalisation simple

Titre

Couleurs

Personnalisation complète

Contenu de la barre de titre et régions de glissement

Contenu interactif

Boutons de légende système

Couleur et transparence dans les boutons de légende

Estomper la barre de titre lorsque la fenêtre est inactive

Réinitialiser la barre de titre

Afficher et masquer la barre de titre

Pratiques conseillées et déconseillées

Exemple de personnalisation complète

Articles connexes

Commentaires

Ressources supplémentaires