Personnalisation de la barre de titreTitle bar customization

Lorsque votre application s’exécute dans une fenêtre de bureau, vous pouvez personnaliser les barres de titre pour qu’elles correspondent à la personnalité de votre application.When your app is running in a desktop window, you can customize the title bars to match the personality of your app. Les API de personnalisation de la barre de titre vous permettent de spécifier des couleurs pour les éléments de barre de titre, ou d’étendre le contenu de votre application dans la zone de barre de titre et d’en prendre le contrôle total.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 importantes: propriété ApplicationView. TitleBar, classe ApplicationViewTitleBar, classe CoreApplicationViewTitleBarImportant APIs: ApplicationView.TitleBar property, ApplicationViewTitleBar class, CoreApplicationViewTitleBar class

Quantité de personnalisation de la barre de titreHow much to customize the title bar

Il existe deux niveaux de personnalisation que vous pouvez appliquer à la barre de titre.There are two levels of customization that you can apply to the title bar.

Pour une personnalisation des couleurs simple, vous pouvez définir des propriétés ApplicationViewTitleBar pour spécifier les couleurs que vous souhaitez utiliser pour les éléments de barre de titre.For simple color customization, you can set ApplicationViewTitleBar properties to specify the colors you want to use for title bar elements. Dans ce cas, le système conserve la responsabilité pour tous les autres aspects de la barre de titre, par exemple en dessinant le titre de l’application et en définissant des zones glissables.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.

Votre autre option consiste à masquer la barre de titre par défaut et à la remplacer par votre propre contenu XAML.Your other option is to hide the default title bar and replace it with your own XAML content. Par exemple, vous pouvez placer du texte, des boutons ou des menus personnalisés dans la zone de barre de titre.For example, you can place text, buttons, or custom menus in the title bar area. Vous devrez également utiliser cette option pour étendre un arrière-plan acrylique à la zone de barre de titre.You will also need to use this option to extend an acrylic background into the title bar area.

Lorsque vous optez pour une personnalisation complète, vous êtes chargé de placer le contenu dans la zone de barre de titre, et vous pouvez définir votre propre région pouvant faire l’être.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. Les boutons précédent, fermer, réduire et agrandir du système sont toujours disponibles et gérés par le système, mais les éléments comme le titre de l’application ne le sont pas.The system Back, Close, Minimize, and Maximize buttons are still available and handled by the system, but elements like the app title are not. Vous devrez créer ces éléments vous-même en fonction des besoins de votre application.You will need to create those elements yourself as needed by your app.

Notes

La personnalisation des couleurs simple est disponible pour les applications Windows à l’aide de XAML, DirectX et HTML.Simple color customization is available to Windows apps using XAML, DirectX, and HTML. La personnalisation complète est disponible uniquement pour les applications Windows utilisant XAML.Full customization is available only to Windows apps using XAML.

Personnalisation des couleurs simplesSimple color customization

Si vous souhaitez uniquement personnaliser les couleurs de la barre de titre et que vous ne faites rien de trop fantaisie (par exemple, en plaçant des tabulations dans votre barre de titre), vous pouvez définir les propriétés de couleur sur le ApplicationViewTitleBar pour la fenêtre de votre application.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.

Cet exemple montre comment récupérer une instance de ApplicationViewTitleBar et définir ses propriétés de couleur.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;

Notes

Ce code peut être placé dans la méthode OnLaunched de votre application (app.Xaml.cs), après l’appel à Window. Activateou dans la première page de votre application.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.

Conseil

Le kit de pratiques de la communauté Windows fournit des extensions qui vous permettent de définir ces propriétés de couleur en XAML.The Windows Community Toolkit provides extensions that let you set these color properties in XAML. Pour plus d’informations, consultez la documentation du kit de la communauté Windows.For more info, see the Windows Community Toolkit documentation.

Voici quelques éléments à prendre en compte lors de la définition des couleurs de la barre de titre :There are a few things to be aware of when setting title bar colors:

  • La couleur d’arrière-plan du bouton n’est pas appliquée aux États du bouton de fermeture et au pointage enfoncé.The button background color is not applied to the close button hover and pressed states. Le bouton Fermer utilise toujours la couleur définie par le système pour ces États.The close button always uses the system-defined color for those states.
  • Les propriétés de couleur du bouton sont appliquées au bouton précédent du système lorsqu’il est utilisé.The button color properties are applied to the system back button when it's used. (Voir l’historique de navigation et la navigation vers l’arrière.)(See Navigation history and backwards navigation.)
  • Si vous affectez à une propriété Color la valeur null , elle est rétablie à la couleur système par défaut.Setting a color property to null resets it to the default system color.
  • Vous ne pouvez pas définir de couleurs transparentes.You can't set transparent colors. Le canal alpha de la couleur est ignoré.The color's alpha channel is ignored.

Windows donne à un utilisateur la possibilité d’appliquer la couleur d’accentuation sélectionnée à la barre de titre.Windows gives a user the option to apply their selected accent color to the title bar. Si vous définissez une couleur de barre de titre, nous vous recommandons de définir explicitement toutes les couleurs.If you set any title bar color, we recommend that you explicitly set all the colors. Cela garantit qu’il n’existe aucune combinaison de couleurs non intentionnelle qui se produit en raison des paramètres de couleur définis par l’utilisateur.This ensures that there are no unintended color combinations that occur because of user defined color settings.

Personnalisation complèteFull customization

Lorsque vous optez pour la personnalisation de la barre de titre complète, la zone cliente de votre application est étendue pour couvrir la totalité de la fenêtre, y compris la zone de barre de titre.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. Vous êtes responsable du dessin et de la gestion des entrées pour la totalité de la fenêtre, à l’exception des boutons de légende, qui sont superposés sur la zone de dessin de l’application.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.

Pour masquer la barre de titre par défaut et étendre votre contenu dans la zone de barre de titre, affectez la valeur trueà la propriété CoreApplicationViewTitleBar. ExtendViewIntoTitleBar .To hide the default title bar and extend your content into the title bar area, set the CoreApplicationViewTitleBar.ExtendViewIntoTitleBar property to true.

Cet exemple montre comment récupérer le CoreApplicationViewTitleBar et définir la propriété ExtendViewIntoTitleBar sur true.This example shows how to get the CoreApplicationViewTitleBar and set the ExtendViewIntoTitleBar property to true. Vous pouvez le faire dans la méthode OnLaunched de votre application (app.Xaml.cs) ou dans la première page de votre application.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;

Conseil

Ce paramètre persiste lorsque votre application est fermée et redémarrée.This setting persists when your app is closed and restarted. Dans Visual Studio, si vous affectez à ExtendViewIntoTitleBar la valeur trueet que vous souhaitez ensuite rétablir la valeur par défaut, vous devez définir explicitement la valeur false et exécuter votre application pour remplacer le paramètre PERSISTED.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.

Régions glissablesDraggable regions

La zone Glissable de la barre de titre définit l’emplacement où l’utilisateur peut cliquer et faire glisser pour déplacer la fenêtre (par opposition au simple glissement du contenu dans la zone de dessin de l’application).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). Vous spécifiez la région pouvant être glissée en appelant la méthode Window. SetTitleBar et en passant dans un UIElement qui définit la région Glissable.You specify the draggable region by calling the Window.SetTitleBar method and passing in a UIElement that defines the draggable region. (L’UIElement est souvent un panneau qui contient d’autres éléments.)(The UIElement is often a panel that contains other elements.)

Voici comment définir une grille de contenu comme zone de barre de titre Glissable.Here's how to set a Grid of content as the draggable title bar region. Ce code est inséré dans le code XAML et le code-behind de la première page de votre application.This code goes in the XAML and code-behind for your app's first page. Consultez la section exemple complet de personnalisation pour obtenir le code complet.See the Full customization example section for the full code.

Important

Par défaut, certains éléments d’interface utilisateur tels que Grid ne participent pas au test de positionnement lorsqu’ils n’ont pas de jeu d’arrière-plan.By default, some UI elements such as Grid do not participate in hit testing when they don't have a background set. Pour que la grille AppTitleBar dans l’exemple ci-dessous autorise le glissement, nous devons définir l’arrière-plan sur 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 ) fait partie du code XAML de votre application.The UIElement (AppTitleBar) is part of the XAML for your app. Vous pouvez déclarer et définir la barre de titre dans une page racine qui ne change pas, ou bien déclarer et définir une zone de barre de titre dans chaque page à laquelle votre application peut accéder.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. Si vous le configurez dans chaque page, vous devez vous assurer que la région Glissable reste cohérente lorsqu’un utilisateur navigue autour de votre application.If you set it in each page, you should make sure the draggable region stays consistent as a user navigates around your app.

Vous pouvez appeler SetTitleBar pour basculer vers un nouvel élément de barre de titre pendant que votre application est en cours d’exécution.You can call SetTitleBar to switch to a new title bar element while your app is running. Vous pouvez également passer null comme paramètre à SetTitleBar pour rétablir le comportement de glissement par défaut.You can also pass null as the parameter to SetTitleBar to revert to the default dragging behavior. (Pour plus d’informations, consultez « région Glissable par défaut ».)(See "Default draggable region" for more info.)

Important

La région Glissable que vous spécifiez doit être testée par accès, ce qui signifie que pour certains éléments, vous devrez peut-être définir un pinceau d’arrière-plan transparent.The draggable region you specify needs to be hit testable, which means, for some elements, you might need to set a transparent background brush. Pour plus d’informations, consultez les notes sur VisualTreeHelper. FindElementsInHostCoordinates .See the remarks on VisualTreeHelper.FindElementsInHostCoordinates for more info.

Par exemple, si vous définissez une grille comme région Glissable, définissez Background="Transparent" pour la rendre déplacée.For example, if you define a Grid as your draggable region, set Background="Transparent" to make it draggable.

Cette grille ne peut pas être glissée (mais des éléments visibles dans celle-ci sont) : <Grid x:Name="AppTitleBar"> .This Grid is not draggable (but visible elements within it are): <Grid x:Name="AppTitleBar">.

Cette grille est similaire, mais l’ensemble de la grille peut être glissé : <Grid x:Name="AppTitleBar" Background="Transparent"> .This Grid looks the same, but the whole Grid is draggable: <Grid x:Name="AppTitleBar" Background="Transparent">.

Région Glissable par défautDefault draggable region

Si vous ne spécifiez pas une région pouvant faire l’être, un rectangle représentant la largeur de la fenêtre, la hauteur des boutons de légende et positionnée le long du bord supérieur de la fenêtre est défini comme zone de glissement par défaut.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.

Si vous définissez une région Glissable, le système réduit la zone de glissement par défaut vers le niveau d’une petite zone de la taille d’un bouton de légende, positionné à gauche des boutons de légende (ou à droite si les boutons de légende se trouvent sur le côté gauche de la fenêtre).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). Cela garantit qu’il y a toujours une zone cohérente que l’utilisateur peut faire glisser.This ensures that there is always a consistent area the user can drag.

Boutons de légende systèmeSystem caption buttons

Le système réserve l’angle supérieur gauche ou supérieur droit de la fenêtre d’application pour les boutons de légende système (précédent, réduire, agrandir, fermer).The system reserves the upper-left or upper-right corner of the app window for the system caption buttons (Back, Minimize, Maximize, Close). Le système conserve le contrôle de la zone de contrôle de légende pour garantir que la fonctionnalité minimale est fournie pour faire glisser, réduire, agrandir et fermer la fenêtre.The system retains control of the caption control area to guarantee that minimum functionality is provided for dragging, minimizing, maximizing, and closing the window. Le système dessine le bouton Fermer dans l’angle supérieur droit pour les langues de gauche à droite et l’angle supérieur gauche pour les langues de droite à gauche.The system draws the Close button in the upper-right for left-to-right languages and the upper-left for right-to-left languages.

Les dimensions et la position de la zone de contrôle de légende sont communiquées par la classe CoreApplicationViewTitleBar pour vous permettre de la tenir compte de la disposition de l’interface utilisateur de votre barre de titre.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 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 .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.

Vous pouvez dessiner du contenu sous la zone de contrôle de légende définie par ces propriétés, telles que l’arrière-plan de votre application, mais vous ne devez pas placer l’interface utilisateur avec laquelle l’utilisateur peut interagir.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. Elle 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.It does not receive any input because input for the caption controls is handled by the system.

Vous pouvez gérer l’événement LayoutMetricsChanged pour répondre aux modifications apportées à la taille des boutons de légende.You can handle the LayoutMetricsChanged event to respond to changes in the size of the caption buttons. Par exemple, cela peut se produire lorsque le bouton précédent du système est affiché ou masqué.For example, this can happen when the system back button is shown or hidden. Gérez cet événement pour vérifier et mettre à jour le positionnement des éléments d’interface utilisateur qui dépendent de la taille de la barre de titre.Handle this event to verify and update the positioning of UI elements that depend on the title bar's size.

Cet exemple montre comment ajuster la disposition de votre barre de titre pour tenir compte des modifications telles que le bouton précédent du système affiché ou masqué.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 et RightPaddingColumn sont déclarés dans le XAML présenté précédemment.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;
}

Contenu interactifInteractive content

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.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. Toutefois, il existe quelques règles que vous devez suivre pour vous assurer que vos éléments interactifs reçoivent une entrée d’utilisateur.However, there are a few rules you must follow to ensure that your interactive elements receive user input.

  • Vous devez appeler SetTitleBar pour définir une zone comme zone de barre de titre qui peut être Glissable.You must call SetTitleBar to define an area as the draggable title bar region. Si vous ne le faites pas, le système définit la région Glissable par défaut en haut de la page.If you don’t, the system sets the default draggable region at the top of the page. Le système gère alors toutes les entrées d’utilisateur dans cette zone et empêche les entrées d’atteindre vos contrôles.The system will then handle all user input to this area, and prevent input from reaching your controls.
  • Placez vos contrôles interactifs sur la partie supérieure de la région Glissable définie par l’appel à SetTitleBar (avec un ordre de plan plus élevé).Place your interactive controls over the top of the draggable region defined by the call to SetTitleBar (with a higher z-order). Ne rendez pas vos enfants de contrôles interactifs de l’UIElement transmis à SetTitleBar.Don’t make your interactive controls children of the UIElement passed to SetTitleBar. Une fois que vous avez transmis un élément à SetTitleBar, le système le traite comme la barre de titre du système et gère toutes les entrées de pointeur sur cet élément.After you pass an element to SetTitleBar, the system treats it like the system title bar and handles all pointer input to that element.

Ici, l' TitleBarButton élément a un ordre de plan supérieur à AppTitleBar , donc il reçoit une entrée d’utilisateur.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>

Transparence dans les boutons de légendeTransparency in caption buttons

Lorsque vous affectez à ExtendViewIntoTitleBar la valeur true, vous pouvez rendre l’arrière-plan des boutons de légende transparent pour permettre l’affichage de l’arrière-plan de votre application.When you set ExtendViewIntoTitleBar to true, you can make the background of the caption buttons transparent to let your app background show through. En général, vous définissez l’arrière-plan sur couleurs. transparent pour une transparence totale.You typically set the background to Colors.Transparent for full transparency. Pour la transparence partielle, définissez le canal alpha de la couleur sur laquelle vous avez défini la propriété.For partial transparency, set the alpha channel for the Color you set the property to.

Ces propriétés ApplicationViewTitleBar peuvent être transparentes :These ApplicationViewTitleBar properties can be transparent:

  • ButtonBackgroundColorButtonBackgroundColor
  • ButtonHoverBackgroundColorButtonHoverBackgroundColor
  • ButtonPressedBackgroundColorButtonPressedBackgroundColor
  • ButtonInactiveBackgroundColorButtonInactiveBackgroundColor

La couleur d’arrière-plan du bouton n’est pas appliquée aux États du bouton de fermeture et au pointage enfoncé.The button background color is not applied to the close button hover and pressed states. Le bouton Fermer utilise toujours la couleur définie par le système pour ces États.The close button always uses the system-defined color for those states.

Toutes les autres propriétés de couleur continuent d’ignorer le canal alpha.All other color properties will continue to ignore the alpha channel. Si ExtendViewIntoTitleBar a la valeur false, le canal alpha est toujours ignoré pour toutes les propriétés de couleur ApplicationViewTitleBar.If ExtendViewIntoTitleBar is set to false, the alpha channel is always ignored for all ApplicationViewTitleBar color properties.

Mode plein écran et Tablet PCFull screen and tablet mode

Lorsque votre application s’exécute en mode plein écran ou en mode tablette, le système masque les boutons de contrôle de barre de titre et de légende.When your app runs in full screen or tablet mode, the system hides the title bar and caption control buttons. Toutefois, l’utilisateur peut appeler la barre de titre pour qu’il apparaisse sous la forme d’une superposition en haut de l’interface utilisateur de l’application.However, the user can invoke the title bar to have it shown as an overlay on top of the app’s UI. Vous pouvez gérer l’événement CoreApplicationViewTitleBar. IsVisibleChanged pour être averti lorsque la barre de titre est masquée ou appelée, et afficher ou masquer le contenu de la barre de titre personnalisée si nécessaire.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.

Cet exemple montre comment gérer IsVisibleChanged pour afficher et masquer l' AppTitleBar élément présenté précédemment.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;
    }
}

Notes

Le mode plein écran ne peut être entré que s’il est pris en charge par votre application.Full screen mode can be entered only if supported by your app. Pour plus d’informations, consultez ApplicationView. IsFullScreenMode .See ApplicationView.IsFullScreenMode for more info. Le mode tablette est une option utilisateur sur le matériel pris en charge, de sorte qu’un utilisateur peut choisir d’exécuter n’importe quelle application en mode tablette.Tablet mode is a user option on supported hardware, so a user can choose to run any app in tablet mode.

Exemple de personnalisation complèteFull 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;
    }
}

Pratiques conseillées et déconseilléesDo's and don'ts

  • Rendez-vous évident lorsque votre fenêtre est active ou inactive.Do make it obvious when your window is active or inactive. Au minimum, modifiez la couleur du texte, des icônes et des boutons de votre barre de titre.At a minimum, change the color of the text, icons, and buttons in your title bar.
  • Définissez une région Glissable le long du bord supérieur de la zone de dessin de l’application.Do define a draggable region along the top edge of the app canvas. La correspondance entre le positionnement des barres de titre du système facilite la recherche des utilisateurs.Matching the placement of system title bars makes it easier for users to find.
  • Définissez une région pouvant faire l’élément de glissement qui correspond à la barre de titre visuelle (le cas échéant) sur la zone de dessin de l’application.Do define a draggable region that matches the visual title bar (if any) on the app’s canvas.