Affichage de navigationNavigation view

Le contrôle NavigationView garantit une navigation de niveau supérieur à votre application.The NavigationView control provides top-level navigation for your app. Il s’adapte à un large éventail de tailles d’écran et prend en charge les styles de navigation supérieure et gauche.It adapts to a variety of screen sizes and supports both top and left navigation styles.

navigation supérieuretop navigation
Affichage de navigation prend en charge à la fois le panneau ou menu de navigation supérieure et gaucheNavigation view supports both top and left navigation pane or menu

Obtenir la bibliothèque d’interface utilisateur WindowsGet the Windows UI Library

Logo WinUI

Le contrôle NavigationView est inclus dans la bibliothèque d’interface utilisateur Windows, package NuGet qui contient les nouveaux contrôles et fonctionnalités d’interface utilisateur pour les applications Windows.The NavigationView control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. Pour plus d’informations, notamment des instructions d’installation, consultez Vue d’ensemble de la bibliothèque d’interface utilisateur Windows.For more info, including installation instructions, see the Windows UI Library overview.

API de plateforme  : Classe Windows.UI.Xaml.Controls.NavigationViewPlatform APIs : Windows.UI.Xaml.Controls.NavigationView class

API de la bibliothèque d’interface utilisateur Windows  : Classe Microsoft.UI.Xaml.Controls.NavigationViewWindows UI Library APIs : Microsoft.UI.Xaml.Controls.NavigationView class

Certaines fonctionnalités de NavigationView, par exemple la navigation supérieure et hiérarchique , nécessitent Windows 10, version 1809 ( SDK 17763) ou version ultérieure, ou la bibliothèque d’interface utilisateur Windows.Some features of NavigationView, such as top and hierarchical navigation, require Windows 10, version 1809 (SDK 17763) or later, or the Windows UI Library.

Est-ce le contrôle approprié ?Is this the right control?

NavigationView est un contrôle de navigation adaptatif très efficace pour les tâches suivantes :NavigationView is an adaptive navigation control that works well for:

  • La fourniture d’une expérience de navigation cohérente dans toute votre application.Providing a consistent navigational experience throughout your app.
  • La conservation de l’espace de l’écran des fenêtres de plus petite taille.Preserving screen real estate on smaller windows.
  • La gestion de l’accès à de nombreuses catégories de navigation.Organizing access to many navigation categories.

Pour visualiser d’autres modèles de navigation, voir Informations de base relatives à la conception de la navigation.For other navigation patterns, see Navigation design basics.

ExemplesExamples

Galerie de contrôles XAMLXAML Controls Gallery
XAML controls gallery

Si vous disposez de l'application Galerie de contrôles XAML, cliquez ici pour ouvrir l’application et voir l'objet NavigationView en action.If you have the XAML Controls Gallery app installed, click here to open the app and see the NavigationView in action.

Modes d’affichageDisplay modes

La propriété PaneDisplayMode nécessite Windows 10 version 1809 (SDK 17763) ou ultérieure, ou la bibliothèque d’interface utilisateur Windows.The PaneDisplayMode property requires Windows 10, version 1809 (SDK 17763) or later, or the Windows UI Library.

Vous pouvez utiliser la propriété PaneDisplayMode pour configurer différents styles de navigation, ou modes d’affichage, pour NavigationView.You can use the PaneDisplayMode property to configure different navigation styles, or display modes, for the NavigationView.

HautTop

Le volet est positionné au-dessus du contenu.The pane is positioned above the content.
PaneDisplayMode="Top"

Exemple de navigation supérieure

Nous vous recommandons la navigation supérieure dans les cas suivants :We recommend top navigation when:

  • Vous avez au moins 5 catégories de navigation de niveau supérieur d’égale importance, et toute autre catégorie de navigation de niveau supérieur qui se retrouve dans le menu déroulant de dépassement est considérée comme moins importante.You have 5 or fewer top-level navigation categories that are equally important, and any additional top-level navigation categories that end up in the dropdown overflow menu are considered less important.
  • Vous devez afficher toutes les options de navigation à l’écran.You need to show all navigation options on screen.
  • Vous souhaitez davantage d’espace pour le contenu de votre application.You want more space for your app content.
  • Les icônes ne peuvent pas décrire clairement les catégories de navigation de votre application.Icons cannot clearly describe your app's navigation categories.

GaucheLeft

Le volet est développé et positionné à gauche du contenu.The pane is expanded and positioned to the left of the content.
PaneDisplayMode="Left"

Exemple de volet de navigation à gauche développé

Nous vous recommandons la navigation à gauche dans les cas suivants :We recommend left navigation when:

  • Vous avez 5 à 10 catégories de navigation de niveau supérieur de même importance.You have 5-10 equally important top-level navigation categories.
  • Vous voulez faire ressortir les catégories de navigation, en laissant moins d'espace aux autres contenus de l'application.You want navigation categories to be very prominent, with less space for other app content.

LeftCompactLeftCompact

Le volet affiche les icônes jusqu'à ce qu'il soit ouvert et positionné à gauche du contenu.The pane shows only icons until opened and is positioned to the left of the content.
PaneDisplayMode="LeftCompact"

Exemple de volet de navigation à gauche réduit

LeftMinimalLeftMinimal

Seul le bouton de menu est affiché jusqu'à ce que le volet s’ouvre.Only the menu button is shown until the pane is opened. Lorsqu’il est ouvert, il apparaît à gauche du contenu.When opened, it's positioned to the left of the content.
PaneDisplayMode="LeftMinimal"

Exemple de volet de navigation à gauche minimal

AutoAuto

Par défaut, la propriété PaneDisplayMode est définie sur Auto. En mode Auto, la vue de navigation passe du mode LeftMinimal (gauche minimal) lorsque la fenêtre est étroite, au mode LeftCompact (gauche compact), puis Left (gauche) lorsque la fenêtre s'élargit.By default, PaneDisplayMode is set to Auto. In Auto mode, the navigation view adapts between LeftMinimal when the window is narrow, to LeftCompact, and then Left as the window gets wider. Pour en savoir plus, voir la section Comportement adaptatif.For more info, see the adaptive behavior section.

Comportement adaptatif par défaut de la navigation à gaucheLeft navigation default adaptive behavior
Comportement adaptatif par défaut de la vue de navigationNavigation view default adaptive behavior

AnatomieAnatomy

Ces images montrent la disposition du volet, de l’en-tête et des zones de contenu du contrôle avec une configuration de navigation supérieure ou à gauche.These images show the layout of the pane, header, and content areas of the control when configured for top or left navigation.

Disposition de la vue de navigation supérieureTop navigation view layout
Disposition de la navigation supérieureTop navigation layout

Disposition de la vue de navigation à gaucheLeft navigation view layout
Disposition de la navigation à gaucheLeft navigation layout

VoletPane

Vous pouvez utiliser la propriété PaneDisplayMode pour positionner le volet au-dessus ou à gauche du contenu.You can use the PaneDisplayMode property to position the pane above the content or to the left of the content.

Le volet NavigationView peut contenir :The NavigationView pane can contain:

Le volet gauche contient également les éléments suivants :The left pane also contains:

  • Un bouton de menu pour activer/désactiver le volet ouvert et fermé.A menu button to toggle the pane opened and closed. Sur les grandes fenêtres d’application lorsque le volet est ouvert, vous pouvez choisir de masquer ce bouton à l’aide de la propriété IsPaneToggleButtonVisible.On larger app windows when the pane is open, you may choose to hide this button using the IsPaneToggleButtonVisible property.

La vue de navigation affiche un bouton Précédent placé dans le coin supérieur gauche du volet.The navigation view has a back button that is placed in the top left-hand corner of the pane. Mais elle ne gère pas automatiquement la navigation vers l’arrière et n'ajoute aucun contenu à la pile arrière.However, it does not automatically handle backwards navigation and add content to the back stack. Pour activer la navigation vers l’arrière, consultez la section Navigation vers l’arrière.To enable backwards navigation, see the backwards navigation section.

Voici l’anatomie du volet détaillé pour les positions du volet de navigation supérieure et à gauche.Here is the detailed pane anatomy for the top and left pane positions.

Volet de navigation supérieureTop navigation pane

Anatomie de volet de navigation supérieure

  1. En-têtesHeaders
  2. Éléments de navigationNavigation items
  3. SéparateursSeparators
  4. AutoSuggestBox (facultatif)AutoSuggestBox (optional)
  5. Bouton Paramètres (facultatif)Settings button (optional)

Volet de navigation à gaucheLeft navigation pane

Anatomie de volet de navigation à gauche

  1. Bouton MenuMenu button
  2. Éléments de navigationNavigation items
  3. SéparateursSeparators
  4. En-têtesHeaders
  5. AutoSuggestBox (facultatif)AutoSuggestBox (optional)
  6. Bouton Paramètres (facultatif)Settings button (optional)

Vous pouvez placer un contenu de forme libre dans le pied de page du volet en l’ajoutant à la propriété PaneFooter.You can place free-form content in the pane's footer by adding it to the PaneFooter property.

Navigation supérieure du pied de page du voletPane footer top nav
Pied de page du volet supérieurTop pane footer

Pied de page du volet de navigation à gauchePane footer left nav
Pied de page du volet gaucheLeft pane footer

Titre et en-tête du voletPane title and header

Vous pouvez placer le contenu textuel dans la zone d'en-tête du volet en définissant la propriété PaneTitle.You can place text content in the pane header area by setting the PaneTitle property. Cette propriété prend une chaîne et affiche le texte en regard du bouton de menu.It takes a string and shows the text next to the menu button.

Pour ajouter du contenu non textuel, comme une image ou un logo, vous pouvez placer n'importe quel élément dans l'en-tête du volet en l'ajoutant à la propriété PaneHeader.To add non-text content, such as an image or logo, you can place any element in the pane's header by adding it to the PaneHeader property.

Si les propriétés PaneTitle et PaneHeader sont définies, le contenu est empilé horizontalement à côté du bouton de menu, la propriété PaneTitle étant la plus proche du bouton de menu.If both PaneTitle and PaneHeader are set, the content is stacked horizontally next to the menu button, with the PaneTitle closest to the menu button.

En-tête du volet de navigation supérieurePane header top nav
En-tête du volet supérieurTop pane header

En-tête du volet de navigation à gauchePane header left nav
En-tête du volet gaucheLeft pane header

Contenu du voletPane content

Vous pouvez placer un contenu de forme libre dans le volet en l’ajoutant à la propriété PaneCustomContent.You can place free-form content in the pane by adding it to the PaneCustomContent property.

Contenu personnalisé du volet de navigation supérieurePane custom content top nav
Contenu personnalisé du volet supérieurTop pane custom content

Contenu personnalisé du volet de navigation à gauchePane custom content left nav
Contenu personnalisé du volet gaucheLeft pane custom content

Vous pouvez ajouter un titre de page en définissant la propriété Header.You can add a page title by setting the Header property.

Exemple de zone d’en-tête de l’affichage de navigationExample of navigation view header area
En-tête de l’affichage de navigationNavigation view header

La zone d'en-tête est alignée verticalement avec le bouton de navigation dans la position du volet gauche et se trouve sous le volet dans la position du volet supérieur.The header area is vertically aligned with the navigation button in the left pane position, and lies below the pane in the top pane position. Elle affiche une hauteur fixe de 52 px.It has a fixed height of 52 px. Elle contient le titre de la page de la catégorie de navigation sélectionnée.Its purpose is to hold the page title of the selected nav category. L’en-tête est ancré sur le haut de la page et se comporte comme un point de découpage de défilement pour la zone de contenu.The header is docked to the top of the page and acts as a scroll clipping point for the content area.

L'en-tête est visible chaque fois que NavigationView est en mode minimal.The header is visible any time the NavigationView is in Minimal display mode. Vous pouvez choisir de masquer l’en-tête dans les autres modes, utilisés pour des fenêtres de largeur supérieure.You may choose to hide the header in other modes, which are used on larger window widths. Pour masquer l’en-tête, définissez la propriété AlwaysShowHeader sur false.To hide the header, set the AlwaysShowHeader property to false.

ContentContent

Exemple de zone de contenu de l’affichage de navigationExample of navigation view content area
Contenu d’affichage de navigationNavigation view content

La zone de contenu présente la plupart des informations relatives à la catégorie de navigation sélectionnée.The content area is where most of the information for the selected nav category is displayed.

Nous recommandons des marges de 12 px pour votre zone de contenu lorsque NavigationView est en mode Minimal , et des marges de 24 px dans les autres cas.We recommend 12px margins for your content area when NavigationView is in Minimal mode and 24px margins otherwise.

Comportement adaptatifAdaptive behavior

Par défaut, le mode d’affichage de navigation change automatiquement selon la quantité d’espace d’écran à sa disposition.By default, the navigation view automatically changes its display mode based on the amount of screen space available to it. Les propriétés CompactModeThresholdWidth et ExpandedModeThresholdWidth indiquent les points d’arrêt où le mode d'affichage change.The CompactModeThresholdWidth and ExpandedModeThresholdWidth properties specify the breakpoints at which the display mode changes. Vous pouvez modifier ces valeurs pour personnaliser le comportement du mode d’affichage adaptatif.You can modify these values to customize the adaptive display mode behavior.

Par défautDefault

Lorsque la propriété PaneDisplayMode est définie sur sa valeur par défaut Auto , le comportement adaptatif consiste à afficher :When PaneDisplayMode is set to its default value of Auto , the adaptive behavior is to show:

  • Un volet gauche développé sur les fenêtres de grande largeur (1008 px ou supérieur).An expanded left pane on large window widths (1008px or greater).
  • Un volet de navigation gauche (LeftCompact) comportant uniquement des icônes sur les fenêtres de largeur moyenne (641 px à 1007 px).A left, icon-only, nav pane (LeftCompact) on medium window widths (641px to 1007px).
  • Uniquement un bouton de menu (LeftMinimal) sur les fenêtres de petite largeur (640 px ou moins).Only a menu button (LeftMinimal) on small window widths (640px or less).

Pour plus d'informations sur les tailles de fenêtre pour un comportement adaptatif, consultez Tailles d’écran et points d’arrêt.For more information about window sizes for adaptive behavior, see Screen sizes and breakpoints.

Comportement adaptatif par défaut de la navigation à gaucheLeft navigation default adaptive behavior
Comportement adaptatif par défaut de la vue de navigationNavigation view default adaptive behavior

MinimalMinimal

Un deuxième modèle adaptatif courant consiste à utiliser un volet gauche étendu sur les fenêtres de grande largeur, et uniquement un bouton de menu sur les fenêtres de moyenne et petite largeurs.A second common adaptive pattern is to use an expanded left pane on large window widths, and only a menu button on both medium and small window widths.

Ce modèle est recommandé dans les cas suivants :We recommend this when:

  • Vous voulez plus d'espace pour le contenu de l'application sur les fenêtres de plus petite largeur.You want more space for app content on smaller window widths.
  • Vos catégories de navigation ne peuvent pas être clairement représentées par des icônes.Your navigation categories cannot be clearly represented with icons.

Comportement adaptatif minimal de la navigation à gaucheLeft navigation minimal adaptive behavior
Comportement adaptatif « minimal » de l’affichage de navigationNavigation view "minimal" adaptive behavior

Pour configurer ce comportement, définissez CompactModeThresholdWidth sur la largeur à laquelle vous voulez que le volet se réduise.To configure this behavior, set CompactModeThresholdWidth to the width at which you want the pane to collapse. Ici, la taille passe de la valeur par défaut 640 à 1007.Here, it's changed from the default of 640 to 1007. Vous devez également définir ExpandedModeThresholdWidth pour vous assurer que les valeurs n’entrent pas en conflit.You should also set ExpandedModeThresholdWidth to ensure the values don't conflict.

<NavigationView CompactModeThresholdWidth="1007" ExpandedModeThresholdWidth="1007"/>

CompactCompact

Un troisième modèle adaptatif courant consiste à utiliser un volet gauche étendu sur les fenêtres de grande largeur, et un volet de navigation à icônes uniquement (LeftCompact) sur les fenêtres de moyenne et petite largeurs.A third common adaptive pattern is to use an expanded left pane on large window widths, and a LeftCompact, icon-only, nav pane on both medium and small window widths.

Ce modèle est recommandé dans les cas suivants :We recommend this when:

  • Il est important de toujours afficher toutes les options de navigation à l’écran.It is important to always show all navigation options on screen.
  • Vos catégories de navigation peuvent être clairement représentées par des icônes.Your navigation categories can be clearly represented with icons.

Comportement adaptatif compact de la navigation à gaucheLeft navigation compact adaptive behavior
Comportement adaptatif compact de l’affichage de navigationNavigation view "compact" adaptive behavior

Pour configurer ce comportement, définissez CompactModeThresholdWidth sur 0.To configure this behavior, set CompactModeThresholdWidth to 0.

<NavigationView CompactModeThresholdWidth="0"/>

Aucun comportement adaptatifNo adaptive behavior

Pour désactiver le comportement adaptatif automatique, définissez PaneDisplayMode sur une valeur autre que Auto. Ici, la valeur est définie sur LeftMinimal afin d’afficher uniquement le bouton de menu, quelle que soit la largeur de la fenêtre.To disable the automatic adaptive behavior, set PaneDisplayMode to a value other than Auto. Here, it's set to LeftMinimal, so only the menu button is shown regardless of the window width.

Comportement non adaptatif de la navigation à gaucheLeft navigation no adaptive behavior
Mode de navigation avec PaneDisplayMode définie sur LeftMinimalNavigation view with PaneDisplayMode set to LeftMinimal

<NavigationView PaneDisplayMode="LeftMinimal" />

Comme décrit précédemment dans la section Modes d’affichage , vous pouvez définir le volet afin qu’il soit toujours visible, toujours développé, toujours compact ou toujours minimal.As described previously in the Display modes section, you can set the pane to be always on top, always expanded, always compact, or always minimal. Vous pouvez également gérer les modes d’affichage vous-même dans le code de votre application.You can also manage the display modes yourself in your app code. Vous trouverez un exemple dans la prochaine section.An example of this is shown in the next section.

Navigation du haut vers la gaucheTop to left navigation

Lorsque vous utilisez la navigation supérieure dans votre application, les éléments de navigation se réduisent en un menu de dépassement à mesure que la largeur de la fenêtre diminue.When you use top navigation in your app, navigation items collapse into an overflow menu as the window width decreases. Lorsque la fenêtre de votre application est étroite, il est possible d'améliorer l'expérience de l'utilisateur en faisant passer le mode PaneDisplayMode de la navigation supérieure (Top) à LeftMinimal, plutôt que de laisser tous les éléments se réduire dans le menu de dépassement.When your app window is narrow, it can provide a better user experience to switch the PaneDisplayMode from Top to LeftMinimal navigation, rather than letting all the items collapse into the overflow menu.

Nous recommandons d'utiliser la navigation supérieure pour les grandes fenêtres, et la navigation par la gauche pour les petites fenêtres dans les cas suivants :We recommend using top navigation on large window sizes and left navigation on small window sizes when:

  • Vous utilisez un groupe de catégories de navigation de niveau supérieur de même importance à afficher ensemble, de sorte que si une catégorie de ce groupe ne rentre pas dans l'écran, vous la réduisez avec la navigation à gauche pour lui donner la même importance.You have a set of equally important top-level navigation categories to be displayed together, such that if one category in this set doesn't fit on screen, you collapse to left navigation to give them equal importance.
  • Vous souhaitez conserver autant d'espace de contenu que possible dans les fenêtres de petite taille.You wish to preserve as much content space as possible in small window sizes.

Cet exemple montre comment utiliser des propriétés VisualStateManager et AdaptiveTrigger.MinWindowWidth pour basculer entre la navigation supérieure (Top) et LeftMinimal.This example shows how to use a VisualStateManager and AdaptiveTrigger.MinWindowWidth property to switch between Top and LeftMinimal navigation.

Exemple 1 de comportement adaptatif supérieur ou à gauche

<Grid>
    <NavigationView x:Name="NavigationViewControl" >
        <NavigationView.MenuItems>
            <NavigationViewItem Content="A" x:Name="A" />
            <NavigationViewItem Content="B" x:Name="B" />
            <NavigationViewItem Content="C" x:Name="C" />
        </NavigationView.MenuItems>
    </NavigationView>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger
                        MinWindowWidth="{x:Bind NavigationViewControl.CompactModeThresholdWidth}" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <Setter Target="NavigationViewControl.PaneDisplayMode" Value="Top"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Conseil

Lorsque vous utilisez AdaptiveTrigger.MinWindowWidth, l'état visuel est déclenché lorsque la fenêtre est plus large que la largeur minimale spécifiée.When you use AdaptiveTrigger.MinWindowWidth, the visual state is triggered when the window is wider than the specified minimum width. Cela signifie que la valeur XAML par défaut définit la fenêtre étroite, et que la valeur VisualState définit les modifications appliquées lorsque la fenêtre s'élargit.This means the default XAML defines the narrow window, and the VisualState defines the modifications that are applied when the window gets wider. La propriété PaneDisplayMode par défaut pour l’affichage de navigation est Auto. Par conséquent, lorsque la largeur de la fenêtre est inférieure ou égale à la valeur CompactModeThresholdWidth, la navigation LeftMinimal est utilisée.The default PaneDisplayMode for the navigation view is Auto, so when the window width is less than or equal to CompactModeThresholdWidth, LeftMinimal navigation is used. Lorsque la fenêtre s'élargit, VisualState prend le pas sur la valeur par défaut et la navigation supérieure est utilisée.When the window gets wider, the VisualState overrides the default, and Top navigation is used.

L’affichage de navigation n’effectue aucune tâche de navigation automatiquement.The navigation view doesn't perform any navigation tasks automatically. Lorsque l'utilisateur appuie sur un élément de navigation, l’affichage de navigation montre cet élément comme étant sélectionné et affiche un événement ItemInvoked.When the user taps on a navigation item, the navigation view shows that item as selected and raises an ItemInvoked event. Si l’appui entraîne la sélection d’un nouvel élément, l’événement SelectionChanged est également déclenché.If the tap results in a new item being selected, a SelectionChanged event is also raised.

Vous pouvez gérer l'un ou l'autre événement pour effectuer des tâches liées à la navigation demandée.You can handle either event to perform tasks related to the requested navigation. Celui que vous devez gérer dépend du comportement que vous voulez appliquer à votre application.Which one you should handle depends on the behavior you want for your app. En règle générale, vous naviguez jusqu'à la page demandée puis mettez à jour l'en-tête de l’affichage de navigation en réponse à ces événements.Typically, you navigate to the requested page and update the navigation view header in response to these events.

ItemInvoked est déclenché chaque fois que l’utilisateur appuie sur un élément de navigation, même s’il est déjà sélectionné.ItemInvoked is raised any time the user taps a navigation item, even if it's already selected. (L'élément peut également être invoqué avec une action équivalente à l'aide de la souris, du clavier ou d'une autre entrée.(The item can also be invoked with an equivalent action using mouse, keyboard, or other input. Pour plus d’informations, voir Entrée et interactions.) Si vous naviguez dans le gestionnaire ItemInvoked, par défaut, la page sera rechargée et une entrée en double sera ajoutée à la pile de navigation.For more info, see Input and interactions.) If you navigate in the ItemInvoked handler, by default, the page will be reloaded, and a duplicate entry is added to the navigation stack. Si vous naviguez lorsqu'un élément est invoqué, vous devez empêcher le rechargement de la page ou vous assurer qu'une entrée en double n'est pas créée dans le backstack de navigation lorsque la page est rechargée.If you navigate when an item is invoked, you should disallow reloading the page, or ensure that a duplicate entry is not created in the navigation backstack when the page is reloaded. (Voir les exemples de code.)(See code examples.)

SelectionChanged peut être déclenché par un utilisateur invoquant un élément qui n'est pas actuellement sélectionné, ou en modifiant par programmation l'élément sélectionné.SelectionChanged can be raised by a user invoking an item that isn't currently selected, or by programmatically changing the selected item. Si le changement de sélection se produit parce qu'un utilisateur a invoqué un élément, l'événement ItemInvoked se produit en premier.If the selection change occurs because a user invoked an item, the ItemInvoked event occurs first. Si la modification de la sélection s’effectue par programmation, ItemInvoked n’est pas déclenché.If the selection change is programmatic, ItemInvoked is not raised.

Navigation vers l’arrièreBackwards navigation

NavigationView intègre un bouton précédent ; mais, comme pour la navigation vers l'avant, il n'effectue pas automatiquement la navigation vers l'arrière.NavigationView has a built-in back button; but, as with forward navigation, it doesn't perform backwards navigation automatically. Lorsque l’utilisateur actionne le bouton précédent, l’événement BackRequested est déclenché.When the user taps the back button, the BackRequested event is raised. Vous gérez cet événement pour effectuer la navigation vers l’arrière.You handle this event to perform backwards navigation. Pour obtenir plus d’informations et des exemples de code, consultez l’article Historique de navigation et navigation vers l’arrière.For more info and code examples, see Navigation history and backwards navigation.

En mode Minimal ou Compact, le volet Affichage de navigation est ouvert en tant que menu volant.In Minimal or Compact mode, the navigation view Pane is open as a flyout. Dans ce cas, vous pouvez cliquer sur le bouton précédent pour fermer le volet et afficher l'événement PaneClosing à la place.In this case, clicking the back button will close the Pane and raise the PaneClosing event instead.

Vous pouvez masquer ou désactiver le bouton précédent en définissant ces propriétés :You can hide or disable the back button by setting these properties:

  • IsBackButtonVisible: pour afficher et masquer le bouton précédent.IsBackButtonVisible: use to show and hide the back button. Cette propriété prend une valeur de l'énumération NavigationViewBackButtonVisible, qui est définie sur Auto par défaut.This property takes a value of the NavigationViewBackButtonVisible enumeration, and is set to Auto by default. Lorsque le bouton est réduit, aucun espace n’est réservé pour celui-ci dans la disposition.When the button is collapsed, no space is reserved for it in the layout.
  • IsBackEnabled: activer ou désactiver le bouton précédent.IsBackEnabled: use to enable or disable the back button. Vous pouvez lier les données de cette propriété à la propriété CanGoBack de votre cadre de navigation.You can data bind this property to the CanGoBack property of your navigation frame. BackRequested n’est pas déclenché si IsBackEnabled est défini sur false.BackRequested is not raised if IsBackEnabled is false.

Bouton précédent en mode navigation dans le volet de navigation gaucheNavigation view back button in the left navigation pane
Bouton précédent dans le volet de navigation gaucheThe back button in the left navigation pane

Bouton précédent en mode navigation dans le volet de navigation supérieurNavigation view back button in the top navigation pane
Bouton précédent dans le volet de navigation supérieurThe back button in the top navigation pane

Exemple de codeCode example

Important

Pour tout projet qui utilise la boîte à outils de la bibliothèque d’interface utilisateur Windows (WinUI), suivez les mêmes étapes de configuration préliminaires.For any project that makes use of the Windows UI (WinUI) Library toolkit, you go through the same preliminary setup setps. Pour plus d’informations sur l’arrière-plan, la configuration et la prise en charge, consultez Prise en main de la bibliothèque d’IU Windows.For more background, setup, and support info, see Getting started with the Windows UI Library.

Cet exemple montre comment utiliser NavigationView avec un volet de navigation supérieur sur de grandes fenêtres et un volet de navigation à gauche sur les petites fenêtres.This example shows how you can use NavigationView with both a top navigation pane on large window sizes and a left navigation pane on small window sizes. Il peut être adapté à la navigation à gauche uniquement en supprimant les paramètres de navigation supérieure dans le VisualStateManager.It can be adapted to left-only navigation by removing the top navigation settings in the VisualStateManager.

L'exemple montre une façon recommandée de configurer des données de navigation qui s’adaptent à de nombreux scénarios courants.The example demonstrates a recommended way to set up navigation data that will work for many common scenarios. Il explique également comment implémenter la navigation vers l’arrière avec le bouton précédent de NavigationView et la navigation au clavier.It also demonstrates how to implement backwards navigation with NavigationView 's back button and keyboard navigation.

Ce code suppose que votre application contient des pages avec les noms suivants pour accéder à ces éléments : HomePage , AppsPage , GamesPage , MusicPage , MyContentPage et SettingsPage.This code assumes that your app contains pages with the following names to navigate to: HomePage , AppsPage , GamesPage , MusicPage , MyContentPage , and SettingsPage. Le code de ces pages n’est pas affiché.Code for these pages is not shown.

Important

Vous trouverez des informations sur les pages de l’application dans un ValueTuple.Information about the app's pages is stored in a ValueTuple. Cette structure nécessite une version minimale SDK 17763 ou supérieure pour votre projet d’application.This struct requires that the minimum version for your app project must be SDK 17763 or greater. Si vous utilisez la version WinUI de NavigationView pour cibler des versions antérieures de Windows 10, vous pouvez utiliser le paquet NuGet System.ValueTuple.If you use the WinUI version of NavigationView to target earlier versions of Windows 10, you can use the System.ValueTuple NuGet package instead.

Important

Ce code montre comment utiliser la version Bibliothèque d’interface utilisateur Windows de NavigationView.This code shows how to use the Windows UI Library version of NavigationView. Si vous utilisez la version plateforme de NavigationView à la place, la version minimale pour votre projet d'application doit être SDK 17763 ou supérieure.If you use the platform version of NavigationView instead, the minimum version for your app project must be SDK 17763 or greater. Pour utiliser la version plateforme, supprimez toutes les références à muxc:.To use the platform version, remove all references to muxc:.

<Page ... xmlns:muxc="using:Microsoft.UI.Xaml.Controls" ... >
<Grid>
    <muxc:NavigationView x:Name="NavView"
                         Loaded="NavView_Loaded"
                         ItemInvoked="NavView_ItemInvoked"
                         BackRequested="NavView_BackRequested">
        <muxc:NavigationView.MenuItems>
            <muxc:NavigationViewItem Tag="home" Icon="Home" Content="Home"/>
            <muxc:NavigationViewItemSeparator/>
            <muxc:NavigationViewItemHeader x:Name="MainPagesHeader"
                                           Content="Main pages"/>
            <muxc:NavigationViewItem Tag="apps" Content="Apps">
                <muxc:NavigationViewItem.Icon>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEB3C;"/>
                </muxc:NavigationViewItem.Icon>
            </muxc:NavigationViewItem>
            <muxc:NavigationViewItem Tag="games" Content="Games">
                <muxc:NavigationViewItem.Icon>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE7FC;"/>
                </muxc:NavigationViewItem.Icon>
            </muxc:NavigationViewItem>
            <muxc:NavigationViewItem Tag="music" Icon="Audio" Content="Music"/>
        </muxc:NavigationView.MenuItems>

        <muxc:NavigationView.AutoSuggestBox>
            <!-- See AutoSuggestBox documentation for
                 more info about how to implement search. -->
            <AutoSuggestBox x:Name="NavViewSearchBox" QueryIcon="Find"/>
        </muxc:NavigationView.AutoSuggestBox>

        <ScrollViewer>
            <Frame x:Name="ContentFrame" Padding="12,0,12,24" IsTabStop="True"
                   NavigationFailed="ContentFrame_NavigationFailed"/>
        </ScrollViewer>
    </muxc:NavigationView>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger
                        MinWindowWidth="{x:Bind NavViewCompactModeThresholdWidth}"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <!-- Remove the next 3 lines for left-only navigation. -->
                    <Setter Target="NavView.PaneDisplayMode" Value="Top"/>
                    <Setter Target="NavViewSearchBox.Width" Value="200"/>
                    <Setter Target="MainPagesHeader.Visibility" Value="Collapsed"/>
                    <!-- Leave the next line for left-only navigation. -->
                    <Setter Target="ContentFrame.Padding" Value="24,0,24,24"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>
</Page>

Important

Ce code montre comment utiliser la version Bibliothèque d’interface utilisateur Windows de NavigationView.This code shows how to use the Windows UI Library version of NavigationView. Si vous utilisez la version plateforme de NavigationView à la place, la version minimale pour votre projet d'application doit être SDK 17763 ou supérieure.If you use the platform version of NavigationView instead, the minimum version for your app project must be SDK 17763 or greater. Pour utiliser la version plateforme, supprimez toutes les références à muxc.To use the platform version, remove all references to muxc.

// Add "using" for WinUI controls.
// using muxc = Microsoft.UI.Xaml.Controls;

private double NavViewCompactModeThresholdWidth { get { return NavView.CompactModeThresholdWidth; } }

private void ContentFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)
{
    throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
}

// List of ValueTuple holding the Navigation Tag and the relative Navigation Page
private readonly List<(string Tag, Type Page)> _pages = new List<(string Tag, Type Page)>
{
    ("home", typeof(HomePage)),
    ("apps", typeof(AppsPage)),
    ("games", typeof(GamesPage)),
    ("music", typeof(MusicPage)),
};

private void NavView_Loaded(object sender, RoutedEventArgs e)
{
    // You can also add items in code.
    NavView.MenuItems.Add(new muxc.NavigationViewItemSeparator());
    NavView.MenuItems.Add(new muxc.NavigationViewItem
    {
        Content = "My content",
        Icon = new SymbolIcon((Symbol)0xF1AD),
        Tag = "content"
    });
    _pages.Add(("content", typeof(MyContentPage)));

    // Add handler for ContentFrame navigation.
    ContentFrame.Navigated += On_Navigated;

    // NavView doesn't load any page by default, so load home page.
    NavView.SelectedItem = NavView.MenuItems[0];
    // If navigation occurs on SelectionChanged, this isn't needed.
    // Because we use ItemInvoked to navigate, we need to call Navigate
    // here to load the home page.
    NavView_Navigate("home", new Windows.UI.Xaml.Media.Animation.EntranceNavigationTransitionInfo());

    // Add keyboard accelerators for backwards navigation.
    var goBack = new KeyboardAccelerator { Key = Windows.System.VirtualKey.GoBack };
    goBack.Invoked += BackInvoked;
    this.KeyboardAccelerators.Add(goBack);

    // ALT routes here
    var altLeft = new KeyboardAccelerator
    {
        Key = Windows.System.VirtualKey.Left,
        Modifiers = Windows.System.VirtualKeyModifiers.Menu
    };
    altLeft.Invoked += BackInvoked;
    this.KeyboardAccelerators.Add(altLeft);
}

private void NavView_ItemInvoked(muxc.NavigationView sender,
                                 muxc.NavigationViewItemInvokedEventArgs args)
{
    if (args.IsSettingsInvoked == true)
    {
        NavView_Navigate("settings", args.RecommendedNavigationTransitionInfo);
    }
    else if (args.InvokedItemContainer != null)
    {
        var navItemTag = args.InvokedItemContainer.Tag.ToString();
        NavView_Navigate(navItemTag, args.RecommendedNavigationTransitionInfo);
    }
}

// NavView_SelectionChanged is not used in this example, but is shown for completeness.
// You will typically handle either ItemInvoked or SelectionChanged to perform navigation,
// but not both.
private void NavView_SelectionChanged(muxc.NavigationView sender,
                                      muxc.NavigationViewSelectionChangedEventArgs args)
{
    if (args.IsSettingsSelected == true)
    {
        NavView_Navigate("settings", args.RecommendedNavigationTransitionInfo);
    }
    else if (args.SelectedItemContainer != null)
    {
        var navItemTag = args.SelectedItemContainer.Tag.ToString();
        NavView_Navigate(navItemTag, args.RecommendedNavigationTransitionInfo);
    }
}

private void NavView_Navigate(
    string navItemTag,
    Windows.UI.Xaml.Media.Animation.NavigationTransitionInfo transitionInfo)
{
    Type _page = null;
    if (navItemTag == "settings")
    {
        _page = typeof(SettingsPage);
    }
    else
    {
        var item = _pages.FirstOrDefault(p => p.Tag.Equals(navItemTag));
        _page = item.Page;
    }
    // Get the page type before navigation so you can prevent duplicate
    // entries in the backstack.
    var preNavPageType = ContentFrame.CurrentSourcePageType;

    // Only navigate if the selected page isn't currently loaded.
    if (!(_page is null) && !Type.Equals(preNavPageType, _page))
    {
        ContentFrame.Navigate(_page, null, transitionInfo);
    }
}

private void NavView_BackRequested(muxc.NavigationView sender,
                                   muxc.NavigationViewBackRequestedEventArgs args)
{
    On_BackRequested();
}

private void BackInvoked(KeyboardAccelerator sender,
                         KeyboardAcceleratorInvokedEventArgs args)
{
    On_BackRequested();
    args.Handled = true;
}

private bool On_BackRequested()
{
    if (!ContentFrame.CanGoBack)
        return false;

    // Don't go back if the nav pane is overlayed.
    if (NavView.IsPaneOpen &&
        (NavView.DisplayMode == muxc.NavigationViewDisplayMode.Compact ||
         NavView.DisplayMode == muxc.NavigationViewDisplayMode.Minimal))
        return false;

    ContentFrame.GoBack();
    return true;
}

private void On_Navigated(object sender, NavigationEventArgs e)
{
    NavView.IsBackEnabled = ContentFrame.CanGoBack;

    if (ContentFrame.SourcePageType == typeof(SettingsPage))
    {
        // SettingsItem is not part of NavView.MenuItems, and doesn't have a Tag.
        NavView.SelectedItem = (muxc.NavigationViewItem)NavView.SettingsItem;
        NavView.Header = "Settings";
    }
    else if (ContentFrame.SourcePageType != null)
    {
        var item = _pages.FirstOrDefault(p => p.Page == e.SourcePageType);

        NavView.SelectedItem = NavView.MenuItems
            .OfType<muxc.NavigationViewItem>()
            .First(n => n.Tag.Equals(item.Tag));

        NavView.Header =
            ((muxc.NavigationViewItem)NavView.SelectedItem)?.Content?.ToString();
    }
}

Notes

Pour la version C++/WinRT de cet exemple de code, commencez par créer un projet basé sur le modèle de projet Application vide ( C++/WinRT) , puis ajoutez le code de la liste dans les fichiers de code source indiqués.For the C++/WinRT version of this code example, begin by creating a new project based on the Blank App (C++/WinRT) project template, and then add the code in the listing to the indicated source code files. Pour utiliser le code source exactement comme indiqué dans la liste, nommez votre nouveau projet NavigationViewCppWinRTTo use the source code exactly as shown in the listing, name your new project NavigationViewCppWinRT

// MainPage.idl
runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
{
    ...
    Double NavViewCompactModeThresholdWidth{ get; };
}

// pch.h
...
#include "winrt/Windows.UI.Xaml.Input.h"
#include "winrt/Windows.UI.Xaml.Media.Animation.h"
#include "winrt/Microsoft.UI.Xaml.Controls.h"
#include "winrt/Microsoft.UI.Xaml.XamlTypeInfo.h"

// MainPage.h
#pragma once

#include "MainPage.g.h"

namespace muxc
{
    using namespace winrt::Microsoft::UI::Xaml::Controls;
};

namespace wuxc
{
    using namespace winrt::Windows::UI::Xaml::Controls;
};

namespace winrt::NavigationViewCppWinRT::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();

        double NavViewCompactModeThresholdWidth();
        void ContentFrame_NavigationFailed(
            Windows::Foundation::IInspectable const& /* sender */,
            Windows::UI::Xaml::Navigation::NavigationFailedEventArgs const& args);
        void NavView_Loaded(
            Windows::Foundation::IInspectable const& /* sender */,
            Windows::UI::Xaml::RoutedEventArgs const& /* args */);
        void NavView_ItemInvoked(
            Windows::Foundation::IInspectable const& /* sender */,
            muxc::NavigationViewItemInvokedEventArgs const& args);

        // NavView_SelectionChanged is not used in this example, but is shown for completeness.
        // You'll typically handle either ItemInvoked or SelectionChanged to perform navigation,
        // but not both.
        void NavView_SelectionChanged(
            muxc::NavigationView const& /* sender */,
            muxc::NavigationViewSelectionChangedEventArgs const& args);
        void NavView_Navigate(
            std::wstring navItemTag,
            Windows::UI::Xaml::Media::Animation::NavigationTransitionInfo const& transitionInfo);
        void NavView_BackRequested(
            muxc::NavigationView const& /* sender */,
            muxc::NavigationViewBackRequestedEventArgs const& /* args */);
        void BackInvoked(
            Windows::UI::Xaml::Input::KeyboardAccelerator const& /* sender */,
            Windows::UI::Xaml::Input::KeyboardAcceleratorInvokedEventArgs const& args);
        bool On_BackRequested();
        void On_Navigated(
            Windows::Foundation::IInspectable const& /* sender */,
            Windows::UI::Xaml::Navigation::NavigationEventArgs const& args);

    private:
        // Vector of std::pair holding the Navigation Tag and the relative Navigation Page.
        std::vector<std::pair<std::wstring, Windows::UI::Xaml::Interop::TypeName>> m_pages;
    };
}

namespace winrt::NavigationViewCppWinRT::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

// MainPage.cpp
#include "pch.h"
#include "MainPage.h"
#include "MainPage.g.cpp"

namespace winrt::NavigationViewCppWinRT::implementation
{
    MainPage::MainPage()
    {
        InitializeComponent();
        m_pages.push_back(std::make_pair<std::wstring, Windows::UI::Xaml::Interop::TypeName>
            (L"home", winrt::xaml_typename<NavigationViewCppWinRT::HomePage>()));
        m_pages.push_back(std::make_pair<std::wstring, Windows::UI::Xaml::Interop::TypeName>
            (L"apps", winrt::xaml_typename<NavigationViewCppWinRT::AppsPage>()));
        m_pages.push_back(std::make_pair<std::wstring, Windows::UI::Xaml::Interop::TypeName>
            (L"games", winrt::xaml_typename<NavigationViewCppWinRT::GamesPage>()));
        m_pages.push_back(std::make_pair<std::wstring, Windows::UI::Xaml::Interop::TypeName>
            (L"music", winrt::xaml_typename<NavigationViewCppWinRT::MusicPage>()));
    }

    double MainPage::NavViewCompactModeThresholdWidth()
    {
        return NavView().CompactModeThresholdWidth();
    }

    void MainPage::ContentFrame_NavigationFailed(
        Windows::Foundation::IInspectable const& /* sender */,
        Windows::UI::Xaml::Navigation::NavigationFailedEventArgs const& args)
    {
        throw winrt::hresult_error(
            E_FAIL, winrt::hstring(L"Failed to load Page ") + args.SourcePageType().Name);
    }

    // List of ValueTuple holding the Navigation Tag and the relative Navigation Page
    std::vector<std::pair<std::wstring, Windows::UI::Xaml::Interop::TypeName>> m_pages;

    void MainPage::NavView_Loaded(
        Windows::Foundation::IInspectable const& /* sender */,
        Windows::UI::Xaml::RoutedEventArgs const& /* args */)
    {
        // You can also add items in code.
        NavView().MenuItems().Append(muxc::NavigationViewItemSeparator());
        muxc::NavigationViewItem navigationViewItem;
        navigationViewItem.Content(winrt::box_value(L"My content"));
        navigationViewItem.Icon(wuxc::SymbolIcon(static_cast<wuxc::Symbol>(0xF1AD)));
        navigationViewItem.Tag(winrt::box_value(L"content"));
        NavView().MenuItems().Append(navigationViewItem);
        m_pages.push_back(
            std::make_pair<std::wstring, Windows::UI::Xaml::Interop::TypeName>(
                L"content", winrt::xaml_typename<NavigationViewCppWinRT::MyContentPage>()));

        // Add handler for ContentFrame navigation.
        ContentFrame().Navigated({ this, &MainPage::On_Navigated });

        // NavView doesn't load any page by default, so load home page.
        NavView().SelectedItem(NavView().MenuItems().GetAt(0));
        // If navigation occurs on SelectionChanged, then this isn't needed.
        // Because we use ItemInvoked to navigate, we need to call Navigate
        // here to load the home page.
        NavView_Navigate(L"home",
            Windows::UI::Xaml::Media::Animation::EntranceNavigationTransitionInfo());

        // Add keyboard accelerators for backwards navigation.
        Windows::UI::Xaml::Input::KeyboardAccelerator goBack;
        goBack.Key(Windows::System::VirtualKey::GoBack);
        goBack.Invoked({ this, &MainPage::BackInvoked });
        KeyboardAccelerators().Append(goBack);

        // ALT routes here
        Windows::UI::Xaml::Input::KeyboardAccelerator altLeft;
        goBack.Key(Windows::System::VirtualKey::Left);
        goBack.Modifiers(Windows::System::VirtualKeyModifiers::Menu);
        goBack.Invoked({ this, &MainPage::BackInvoked });
        KeyboardAccelerators().Append(altLeft);
    }

    void MainPage::NavView_ItemInvoked(
        Windows::Foundation::IInspectable const& /* sender */,
        muxc::NavigationViewItemInvokedEventArgs const& args)
    {
        if (args.IsSettingsInvoked())
        {
            NavView_Navigate(L"settings", args.RecommendedNavigationTransitionInfo());
        }
        else if (args.InvokedItemContainer())
        {
            NavView_Navigate(
                winrt::unbox_value_or<winrt::hstring>(
                    args.InvokedItemContainer().Tag(), L"").c_str(),
                args.RecommendedNavigationTransitionInfo());
        }
    }

    // NavView_SelectionChanged is not used in this example, but is shown for completeness.
    // You will typically handle either ItemInvoked or SelectionChanged to perform navigation,
    // but not both.
    void MainPage::NavView_SelectionChanged(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewSelectionChangedEventArgs const& args)
    {
        if (args.IsSettingsSelected())
        {
            NavView_Navigate(L"settings", args.RecommendedNavigationTransitionInfo());
        }
        else if (args.SelectedItemContainer())
        {
            NavView_Navigate(
                winrt::unbox_value_or<winrt::hstring>(
                    args.SelectedItemContainer().Tag(), L"").c_str(),
                args.RecommendedNavigationTransitionInfo());
        }
    }

    void MainPage::NavView_Navigate(
        std::wstring navItemTag,
        Windows::UI::Xaml::Media::Animation::NavigationTransitionInfo const& transitionInfo)
    {
        Windows::UI::Xaml::Interop::TypeName pageTypeName;
        if (navItemTag == L"settings")
        {
            pageTypeName = winrt::xaml_typename<NavigationViewCppWinRT::SettingsPage>();
        }
        else
        {
            for (auto&& eachPage : m_pages)
            {
                if (eachPage.first == navItemTag)
                {
                    pageTypeName = eachPage.second;
                    break;
                }
            }
        }
        // Get the page type before navigation so you can prevent duplicate
        // entries in the backstack.
        Windows::UI::Xaml::Interop::TypeName preNavPageType =
            ContentFrame().CurrentSourcePageType();

        // Navigate only if the selected page isn't currently loaded.
        if (pageTypeName.Name != L"" && preNavPageType.Name != pageTypeName.Name)
        {
            ContentFrame().Navigate(pageTypeName, nullptr, transitionInfo);
        }
    }

    void MainPage::NavView_BackRequested(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewBackRequestedEventArgs const& /* args */)
    {
        On_BackRequested();
    }

    void MainPage::BackInvoked(
        Windows::UI::Xaml::Input::KeyboardAccelerator const& /* sender */,
        Windows::UI::Xaml::Input::KeyboardAcceleratorInvokedEventArgs const& args)
    {
        On_BackRequested();
        args.Handled(true);
    }

    bool MainPage::On_BackRequested()
    {
        if (!ContentFrame().CanGoBack())
            return false;

        // Don't go back if the nav pane is overlaid.
        if (NavView().IsPaneOpen() &&
            (NavView().DisplayMode() == muxc::NavigationViewDisplayMode::Compact ||
                NavView().DisplayMode() == muxc::NavigationViewDisplayMode::Minimal))
            return false;

        ContentFrame().GoBack();
        return true;
    }

    void MainPage::On_Navigated(
        Windows::Foundation::IInspectable const& /* sender */,
        Windows::UI::Xaml::Navigation::NavigationEventArgs const& args)
    {
        NavView().IsBackEnabled(ContentFrame().CanGoBack());

        if (ContentFrame().SourcePageType().Name ==
            winrt::xaml_typename<NavigationViewCppWinRT::SettingsPage>().Name)
        {
            // SettingsItem is not part of NavView.MenuItems, and doesn't have a Tag.
            NavView().SelectedItem(NavView().SettingsItem().as<muxc::NavigationViewItem>());
            NavView().Header(winrt::box_value(L"Settings"));
        }
        else if (ContentFrame().SourcePageType().Name != L"")
        {
            for (auto&& eachPage : m_pages)
            {
                if (eachPage.second.Name == args.SourcePageType().Name)
                {
                    for (auto&& eachMenuItem : NavView().MenuItems())
                    {
                        auto navigationViewItem =
                            eachMenuItem.try_as<muxc::NavigationViewItem>();
                        {
                            if (navigationViewItem)
                            {
                                winrt::hstring hstringValue =
                                    winrt::unbox_value_or<winrt::hstring>(
                                        navigationViewItem.Tag(), L"");
                                if (hstringValue == eachPage.first)
                                {
                                    NavView().SelectedItem(navigationViewItem);
                                    NavView().Header(navigationViewItem.Content());
                                }
                            }
                        }
                    }
                    break;
                }
            }
        }
    }
}

Autre implémentation de C++/WinRTAlternative C++/WinRT implementation

Le code C# et C++/WinRT montré ci-dessus est conçu pour vous permettre d’utiliser le même balisage XAML pour les deux versions.The C# and C++/WinRT code show above is designed so that you can use the same XAML markup for both versions. Toutefois, il existe une autre façon d’implémenter la version C++/WinRT décrite dans cette section, que vous préférerez peut-être.However, there is another way of implementing the C++/WinRT version described in this section, which you may prefer.

Vous trouverez ci-dessous une autre version du gestionnaire NavView_ItemInvoked.Below is an alternative version of the NavView_ItemInvoked handler. La technique de cette version du gestionnaire consiste d'abord à stocker (dans la balise de NavigationViewItem) le nom de type complet de la page vers laquelle vous voulez naviguer.The technique in this version of the handler involves you first storing (in the tag of the NavigationViewItem) the full type name of the page to which you want to navigate. Dans le gestionnaire, vous effectuez une conversion unboxing de cette valeur, la convertissez en un objet Windows::UI::Xaml::Interop::TypeName et l’utilisez pour accéder à la page de destination.In the handler, you unbox that value, turn it into a Windows::UI::Xaml::Interop::TypeName object, and use that to navigate to the destination page. Il n’est pas nécessaire de mapper la variable nommée _pages que vous voyez dans l’exemple ci-dessus, et vous pourrez créer des tests unitaires confirmant que les valeurs à l’intérieur de vos balises sont d’un type valide.There's no need for the mapping variable named _pages that you see in examples above; and you'll be able to create unit tests confirming that the values inside your tags are of a valid type. Voir aussi Conversions boxing et unboxing de valeurs scalaires vers IInspectable avec C++/WinRT.Also see Boxing and unboxing scalar values to IInspectable with C++/WinRT.

void MainPage::NavView_ItemInvoked(
    Windows::Foundation::IInspectable const & /* sender */,
    Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const & args)
{
    if (args.IsSettingsInvoked())
    {
        // Navigate to Settings.
    }
    else if (args.InvokedItemContainer())
    {
        Windows::UI::Xaml::Interop::TypeName pageTypeName;
        pageTypeName.Name = unbox_value<hstring>(args.InvokedItemContainer().Tag());
        pageTypeName.Kind = Windows::UI::Xaml::Interop::TypeKind::Primitive;
        ContentFrame().Navigate(pageTypeName, nullptr);
    }
}

Navigation hiérarchiqueHierarchical navigation

Certaines applications peuvent avoir une structure hiérarchique plus complexe qui nécessite plus qu’une simple liste plate d’éléments de navigation.Some apps may have a more complex hierarchical structure that requires more than just a flat list of navigation items. Vous souhaiterez peut-être utiliser des éléments de navigation de niveau supérieur pour afficher des catégories de pages, avec des éléments enfants affichant des pages spécifiques.You may want to use top-level navigation items to display categories of pages, with children items displaying specific pages. Cette approche est également utile si vous avez des pages de style hub uniquement liées à d’autres pages.It is also useful if you have hub-style pages that only link to other pages. Dans ces types de cas, vous devez créer un NavigationView hiérarchique.For these kinds of cases, you should create a hierarchical NavigationView.

Pour montrer une liste hiérarchique d’éléments de navigation imbriqués dans le volet, utilisez la propriété MenuItems ou la propriété MenuItemsSource de NavigationViewItem.To show a hierarchical list of nested navigation items in the pane, use either the MenuItems property or the MenuItemsSource property of NavigationViewItem. Chaque NavigationViewItem peut contenir d’autres NavigationViewItems et éléments d’organisation tels que des séparateurs et des en-têtes d’élément.Each NavigationViewItem can contain other NavigationViewItems and organizing elements like item headers and separators. Pour afficher une liste hiérarchique quand vous utilisez MenuItemsSource, définissez ItemTemplate en tant que NavigationViewItem et liez sa propriété MenuItemsSource au niveau suivant de la hiérarchie.To show a hierarchical list when using MenuItemsSource, set the ItemTemplate to be a NavigationViewItem, and bind its MenuItemsSource property to the next level of the hierarchy.

Bien que NavigationViewItem puisse contenir un nombre quelconque de niveaux imbriqués, nous vous recommandons de limiter la profondeur de la hiérarchie de navigation de votre application.Although NavigationViewItem can contain any number of nested levels, we recommend keeping your app’s navigation hierarchy shallow. Nous pensons que deux niveaux sont idéaux pour faciliter l’utilisation et la compréhension.We believe two levels is ideal for usability and comprehension.

NavigationView affiche la hiérarchie dans les modes d’affichage du volet Top, Left et LeftCompact.NavigationView shows hierarchy in Top, Left, and LeftCompact pane display modes. Voici à quoi ressemble une sous-arborescence développée dans chacun des modes d’affichage du volet :Here is what an expanded subtree looks like in each of the pane display modes:

NavigationView avec hiérarchie

Ajout d’une hiérarchie d’éléments dans le balisageAdding a hierarchy of items in markup

Déclarez la hiérarchie de navigation de l’application dans le balisage.Declare app navigation hierarchy in markup.

<!-- xmlns:muxc="using:Microsoft.UI.Xaml.Controls" -->
<muxc:NavigationView>
    <muxc:NavigationView.MenuItems>
        <muxc:NavigationViewItem Content="Home" Icon="Home" ToolTipService.ToolTip="Home"/>
        <muxc:NavigationViewItem Content="Collections" Icon="Keyboard" ToolTipService.ToolTip="Collections">
            <muxc:NavigationViewItem.MenuItems>
                <muxc:NavigationViewItem Content="Notes" Icon="Page" ToolTipService.ToolTip="Notes"/>
                <muxc:NavigationViewItem Content="Mail" Icon="Mail" ToolTipService.ToolTip="Mail"/>
            </muxc:NavigationViewItem.MenuItems>
        </muxc:NavigationViewItem>
    </muxc:NavigationView.MenuItems>
</muxc:NavigationView>

Ajout d’une hiérarchie d’éléments à l’aide de la liaison de donnéesAdding a hierarchy of items using data binding

Ajoutez une hiérarchie d’éléments de menu à NavigationView enAdd a hierarchy of menu items to the NavigationView by

  • liant la propriété MenuItemsSource aux données hiérarchiques ;binding the MenuItemsSource property to the hierarchical data
  • définissant le modèle d’élément en tant que NavigationViewMenuItem, avec son contenu (Content) défini sur l’étiquette de l’élément de menu et sa propriété MenuItemsSource liée au niveau suivant de la hiérarchie.defining the item template to be a NavigationViewMenuItem, with its Content set to be the label of the menu item, and its MenuItemsSource property bound to the next level of the hierarchy

Cet exemple montre également les événements de développement (Expanding) et de réduction (Collapsed).This example also demonstrates the Expanding and Collapsed events. Ces événements sont déclenchés pour un élément de menu avec enfants.These events are raised for a menu item with children.

<Page ... xmlns:muxc="using:Microsoft.UI.Xaml.Controls" ... >
    <Page.Resources>
        <DataTemplate x:Key="NavigationViewMenuItem" x:DataType="local:Category">
            <muxc:NavigationViewItem Content="{x:Bind Name}" MenuItemsSource="{x:Bind Children}"/>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <muxc:NavigationView x:Name="navview" 
    MenuItemsSource="{x:Bind Categories, Mode=OneWay}" 
    MenuItemTemplate="{StaticResource NavigationViewMenuItem}" 
    ItemInvoked="{x:Bind OnItemInvoked}" 
    Expanding="OnItemExpanding" 
    Collapsed="OnItemCollapsed" 
    PaneDisplayMode="Left">
            <StackPanel Margin="10,10,0,0">
                <TextBlock Margin="0,10,0,0" x:Name="ExpandingItemLabel" Text="Last Expanding: N/A"/>
                <TextBlock x:Name="CollapsedItemLabel" Text="Last Collapsed: N/A"/>
            </StackPanel>
        </muxc:NavigationView>
    </Grid>
</Page>
public class Category
{
    public String Name { get; set; }
    public String CategoryIcon { get; set; }
    public ObservableCollection<Category> Children { get; set; }
}

public sealed partial class HierarchicalNavigationViewDataBinding : Page
{
    public HierarchicalNavigationViewDataBinding()
    {
        this.InitializeComponent();
    }  

    public ObservableCollection<Category> Categories = new ObservableCollection<Category>()
    {
        new Category(){
            Name = "Menu item 1",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 2",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() {
                            Name  = "Menu item 3",
                            CategoryIcon = "Icon",
                            Children = new ObservableCollection<Category>() {
                                new Category() { Name  = "Menu item 4", CategoryIcon = "Icon" },
                                new Category() { Name  = "Menu item 5", CategoryIcon = "Icon" }
                            }
                        }
                    }
                }
            }
        },
        new Category(){
            Name = "Menu item 6",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 7",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() { Name  = "Menu item 8", CategoryIcon = "Icon" },
                        new Category() { Name  = "Menu item 9", CategoryIcon = "Icon" }
                    }
                }
            }
        },
        new Category(){ Name = "Menu item 10", CategoryIcon = "Icon" }
    };

    private void OnItemInvoked(object sender, NavigationViewItemInvokedEventArgs e)
    {
        var clickedItem = e.InvokedItem;
        var clickedItemContainer = e.InvokedItemContainer;
    }
    private void OnItemExpanding(object sender, NavigationViewItemExpandingEventArgs e)
    {
        var nvib = e.ExpandingItemContainer;
        var name = "Last expanding: " + nvib.Content.ToString();
        ExpandingItemLabel.Text = name;
    }
    private void OnItemCollapsed(object sender, NavigationViewItemCollapsedEventArgs e)
    {
        var nvib = e.CollapsedItemContainer;
        var name = "Last collapsed: " + nvib.Content;
        CollapsedItemLabel.Text = name;
    }
}
// Category.idl
namespace HierarchicalNavigationViewDataBinding
{
    runtimeclass Category
    {
        String Name;
        String CategoryIcon;
        Windows.Foundation.Collections.IObservableVector<Category> Children;
    }
}

// Category.h
#pragma once
#include "Category.g.h"

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    struct Category : CategoryT<Category>
    {
        Category();
        Category(winrt::hstring name,
            winrt::hstring categoryIcon,
            Windows::Foundation::Collections::
                IObservableVector<HierarchicalNavigationViewDataBinding::Category> children);

        winrt::hstring Name();
        void Name(winrt::hstring const& value);
        winrt::hstring CategoryIcon();
        void CategoryIcon(winrt::hstring const& value);
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> Children();
        void Children(Windows::Foundation::Collections:
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> const& value);

    private:
        winrt::hstring m_name;
        winrt::hstring m_categoryIcon;
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> m_children;
    };
}

// Category.cpp
#include "pch.h"
#include "Category.h"
#include "Category.g.cpp"

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    Category::Category()
    {
        m_children = winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    }

    Category::Category(
        winrt::hstring name,
        winrt::hstring categoryIcon,
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> children)
    {
        m_name = name;
        m_categoryIcon = categoryIcon;
        m_children = children;
    }

    hstring Category::Name()
    {
        return m_name;
    }

    void Category::Name(hstring const& value)
    {
        m_name = value;
    }

    hstring Category::CategoryIcon()
    {
        return m_categoryIcon;
    }

    void Category::CategoryIcon(hstring const& value)
    {
        m_categoryIcon = value;
    }

    Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
        Category::Children()
    {
        return m_children;
    }

    void Category::Children(
        Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
            const& value)
    {
        m_children = value;
    }
}

// MainPage.idl
import "Category.idl";

namespace HierarchicalNavigationViewDataBinding
{
    [default_interface]
    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
    {
        MainPage();
        Windows.Foundation.Collections.IObservableVector<Category> Categories{ get; };
    }
}

// MainPage.h
#pragma once

#include "MainPage.g.h"

namespace muxc
{
    using namespace winrt::Microsoft::UI::Xaml::Controls;
};

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();

        Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
            Categories();

        void OnItemInvoked(muxc::NavigationView const& sender, muxc::NavigationViewItemInvokedEventArgs const& args);
        void OnItemExpanding(
            muxc::NavigationView const& sender,
            muxc::NavigationViewItemExpandingEventArgs const& args);
        void OnItemCollapsed(
            muxc::NavigationView const& sender,
            muxc::NavigationViewItemCollapsedEventArgs const& args);

    private:
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> m_categories;
    };
}

namespace winrt::HierarchicalNavigationViewDataBinding::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

// MainPage.cpp
#include "pch.h"
#include "MainPage.h"
#include "MainPage.g.cpp"

#include "Category.h"

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    MainPage::MainPage()
    {
        InitializeComponent();

        m_categories = 
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();

        auto menuItem10 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 10", L"Icon", nullptr);

        auto menuItem9 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 9", L"Icon", nullptr);
        auto menuItem8 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 8", L"Icon", nullptr);
        auto menuItem7Children = 
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem7Children.Append(*menuItem9);
        menuItem7Children.Append(*menuItem8);

        auto menuItem7 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 7", L"Icon", menuItem7Children);
        auto menuItem6Children = 
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem6Children.Append(*menuItem7);

        auto menuItem6 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 6", L"Icon", menuItem6Children);

        auto menuItem5 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 5", L"Icon", nullptr);
        auto menuItem4 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 4", L"Icon", nullptr);
        auto menuItem3Children =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem3Children.Append(*menuItem5);
        menuItem3Children.Append(*menuItem4);

        auto menuItem3 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 3", L"Icon", menuItem3Children);
        auto menuItem2Children = 
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem2Children.Append(*menuItem3);

        auto menuItem2 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 2", L"Icon", menuItem2Children);
        auto menuItem1Children = 
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem1Children.Append(*menuItem2);

        auto menuItem1 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 1", L"Icon", menuItem1Children);

        m_categories.Append(*menuItem1);
        m_categories.Append(*menuItem6);
        m_categories.Append(*menuItem10);
    }

    Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
        MainPage::Categories()
    {
        return m_categories;
    }

    void MainPage::OnItemInvoked(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewItemInvokedEventArgs const& args)
    {
        auto clickedItem = args.InvokedItem();
        auto clickedItemContainer = args.InvokedItemContainer();
    }

    void MainPage::OnItemExpanding(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewItemExpandingEventArgs const& args)
    {
        auto nvib = args.ExpandingItemContainer();
        auto name = L"Last expanding: " + winrt::unbox_value<winrt::hstring>(nvib.Content());
        ExpandingItemLabel().Text(name);
    }

    void MainPage::OnItemCollapsed(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewItemCollapsedEventArgs const& args)
    {
        auto nvib = args.CollapsedItemContainer();
        auto name = L"Last collapsed: " + winrt::unbox_value<winrt::hstring>(nvib.Content());
        CollapsedItemLabel().Text(name);
    }
}

d’un certificat SSTPSelection

Par défaut, tous les éléments peuvent contenir des enfants, être appelés ou être sélectionnés.By default, any item can contain children, be invoked, or be selected.

Quand vous proposez aux utilisateurs une arborescence d’options de navigation, vous pouvez choisir de rendre les éléments parents non sélectionnables, par exemple quand votre application n’a pas de page de destination associée à l’élément parent concerné.When providing users with a hierarchical tree of navigation options, you may choose to make parent items non-selectable, for example when your app doesn't have a destination page associated with that parent item. Si vos éléments parents sont sélectionnables, nous vous recommandons d’utiliser les modes d’affichage Left-Expanded ou Top du volet.If your parent items are selectable, it's recommend you use the Left-Expanded or Top pane display modes. Avec le mode LeftCompact, l’utilisateur accède à l’élément parent pour ouvrir la sous-arborescence enfant chaque fois qu’il est appelé.LeftCompact mode will cause the user to navigate to the parent item in order to open the child subtree every time it's invoked.

Les éléments sélectionnés affichent leurs indicateurs de sélection le long de leur bord gauche quand ils sont disposés en mode Left ou de leur bord inférieur quand ils sont disposés en mode Top.Selected items will draw their selection indicators along their left edge when in left mode or their bottom edge when in top mode. Vous trouverez ci-dessous des NavigationViews en mode Left et Top dans lesquels un élément parent est sélectionné.Shown below are NavigationViews in left and top mode where a parent item is selected.

NavigationView en mode Left avec parent sélectionné

NavigationView en mode Top avec parent sélectionné

Il est possible que l’élément sélectionné ne soit pas toujours visible.The selected item may not always remain visible. Si un enfant d’une sous-arborescence réduite/non développée est sélectionné, son premier ancêtre visible s’affiche comme étant sélectionné.If a child in a collapsed/non-expanded subtree is selected, their first visible ancestor will show as selected. L’indicateur de sélection revient à l’élément sélectionné si/quand la sous-arborescence est développée.The selection indicator will move back to the selected item if/when the sub-tree is expanded.

Par exemple, dans l’image ci-dessus, l’élément Calendar peut être sélectionné par l’utilisateur, qui peut ensuite réduire la sous-arborescence.For example - in the above image, the Calendar item may be selected by the user, and then the user may collapse its subtree. Dans ce cas, l’indicateur de sélection s’affiche sous l’élément Account, car ce dernier est le premier ancêtre visible de l’élément Calendar.In this case, the selection indicator would show up underneath the Account item as Account is Calendar's first visible ancestor. L’indicateur de sélection revient à l’élément Calendar quand l’utilisateur redéveloppe la sous-arborescence.The selection indicator will move back to the Calendar item as the user expands the subtree again.

Le NavigationView entier n’affiche pas plus d’un indicateur de sélection.The entire NavigationView will show no more than one selection indicator.

Dans les deux modes Top et Left, un clic sur les flèches sur les NavigationViewItems permet de développer ou de réduire la sous-arborescence.In both Top and Left modes, clicking the arrows on NavigationViewItems will expand or collapse the subtree. En cliquant ou en appuyant ailleurs sur le NavigationViewItem, vous déclenchez l’événement ItemInvoked, qui entraîne également la réduction ou le développement de la sous-arborescence.Clicking or tapping elsewhere on the NavigationViewItem will trigger the ItemInvoked event, and it will also collapse or expand the subtree.

Pour empêcher un élément d’afficher l’indicateur de sélection quand il est appelé, affectez la valeur False à sa propriété SelectsOnInvoked, comme indiqué ci-dessous :To prevent an item from showing the selection indicator when invoked, set its SelectsOnInvoked property to False, as shown below:

<Page ... xmlns:muxc="using:Microsoft.UI.Xaml.Controls" ... >
    <Page.Resources>
        <DataTemplate x:Key="NavigationViewMenuItem" x:DataType="local:Category">
            <muxc:NavigationViewItem Content="{x:Bind Name}"
            MenuItemsSource="{x:Bind Children}"
            SelectsOnInvoked="{x:Bind IsLeaf}"/>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <muxc:NavigationView x:Name="navview" 
    MenuItemsSource="{x:Bind Categories, Mode=OneWay}" 
    MenuItemTemplate="{StaticResource NavigationViewMenuItem}">
        </muxc:NavigationView>
    </Grid>
</Page>
public class Category
{
    public String Name { get; set; }
    public String CategoryIcon { get; set; }
    public ObservableCollection<Category> Children { get; set; }
    public bool IsLeaf { get; set; }
}

public sealed partial class HierarchicalNavigationViewDataBinding : Page
{
    public HierarchicalNavigationViewDataBinding()
    {
        this.InitializeComponent();
    }  

    public ObservableCollection<Category> Categories = new ObservableCollection<Category>()
    {
        new Category(){
            Name = "Menu item 1",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 2",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() {
                            Name  = "Menu item 3",
                            CategoryIcon = "Icon",
                            Children = new ObservableCollection<Category>() {
                                new Category() { Name  = "Menu item 4", CategoryIcon = "Icon", IsLeaf = true },
                                new Category() { Name  = "Menu item 5", CategoryIcon = "Icon", IsLeaf = true }
                            }
                        }
                    }
                }
            }
        },
        new Category(){
            Name = "Menu item 6",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 7",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() { Name  = "Menu item 8", CategoryIcon = "Icon", IsLeaf = true },
                        new Category() { Name  = "Menu item 9", CategoryIcon = "Icon", IsLeaf = true }
                    }
                }
            }
        },
        new Category(){ Name = "Menu item 10", CategoryIcon = "Icon", IsLeaf = true }
    };
}
// Category.idl
namespace HierarchicalNavigationViewDataBinding
{
    runtimeclass Category
    {
        ...
        Boolean IsLeaf;
    }
}

// Category.h
...
struct Category : CategoryT<Category>
{
    ...
    Category(winrt::hstring name,
        winrt::hstring categoryIcon,
        Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category> children,
        bool isleaf = false);
    ...
    bool IsLeaf();
    void IsLeaf(bool value);

private:
    ...
    bool m_isleaf;
};

// Category.cpp
...
Category::Category(winrt::hstring name,
    winrt::hstring categoryIcon,
    Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category> children,
    bool isleaf) : m_name(name), m_categoryIcon(categoryIcon), m_children(children), m_isleaf(isleaf) {}
...
bool Category::IsLeaf()
{
    return m_isleaf;
}

void Category::IsLeaf(bool value)
{
    m_isleaf = value;
}

// MainPage.h and MainPage.cpp
// Delete OnItemInvoked, OnItemExpanding, and OnItemCollapsed.

// MainPage.cpp
...
MainPage::MainPage()
{
    InitializeComponent();

    m_categories = winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();

    auto menuItem10 = 
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 10", L"Icon", nullptr, true);

    auto menuItem9 = 
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 9", L"Icon", nullptr, true);
    auto menuItem8 = 
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 8", L"Icon", nullptr, true);
    auto menuItem7Children = 
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem7Children.Append(*menuItem9);
    menuItem7Children.Append(*menuItem8);

    auto menuItem7 = 
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 7", L"Icon", menuItem7Children);
    auto menuItem6Children = 
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem6Children.Append(*menuItem7);

    auto menuItem6 = 
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 6", L"Icon", menuItem6Children);

    auto menuItem5 = 
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 5", L"Icon", nullptr, true);
    auto menuItem4 = 
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 4", L"Icon", nullptr, true);
    auto menuItem3Children = 
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem3Children.Append(*menuItem5);
    menuItem3Children.Append(*menuItem4);

    auto menuItem3 = 
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 3", L"Icon", menuItem3Children);
    auto menuItem2Children = 
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem2Children.Append(*menuItem3);

    auto menuItem2 = 
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 2", L"Icon", menuItem2Children);
    auto menuItem1Children = 
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem1Children.Append(*menuItem2);

    auto menuItem1 = 
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 1", L"Icon", menuItem1Children);

    m_categories.Append(*menuItem1);
    m_categories.Append(*menuItem6);
    m_categories.Append(*menuItem10);
}
...

Utilisation du clavier avec un NavigationView hiérarchiqueKeyboarding within hierarchical NavigationView

Les utilisateurs peuvent déplacer le focus dans la vue de navigation à l’aide du clavier.Users can move focus around the navigation view using their keyboard. Les touches de direction exposent la « navigation interne » dans le volet et suivent les interactions fournies dans l’arborescence.The arrow keys expose "inner navigation" within the pane and follow the interactions provided in tree view. Les actions des touches changent quand vous naviguez dans le NavigationView ou dans son menu volant, qui s’affiche dans les modes Top and LeftCompact de HierarchicalNavigationView.The key actions change when navigating through the NavigationView or its flyout menu, which is displayed in Top and Left-compact modes of HierarchicalNavigationView. Voici les actions spécifiques que chaque touche peut effectuer dans un NavigationView hiérarchique :Below are the specific actions that each key can take in a hierarchical NavigationView:

CléKey En mode LeftIn Left Mode En mode TopIn Top Mode Dans le menu volantIn Flyout
HautUp Déplace le focus vers l’élément situé juste au-dessus de l’élément actif.Moves focus to the item directly above the item currently in focus. Ne fait rien.Does nothing. Déplace le focus vers l’élément situé juste au-dessus de l’élément actif.Moves focus to the item directly above the item currently in focus.
BasDown Déplace le focus juste au-dessous de l’élément actif.*Moves focus directly below the item currently in focus.* Ne fait rien.Does nothing. Déplace le focus juste au-dessous de l’élément actif.*Moves focus directly below the item currently in focus.*
DroitRight Ne fait rien.Does nothing. Déplace le focus vers l’élément situé juste à droite de l’élément actif.Moves focus to the item directly to the right of the item currently in focus. Ne fait rien.Does nothing.
GaucheLeft Ne fait rien.Does nothing. Déplace le focus vers l’élément situé juste à gauche de l’élément actif.Moves focus to the item directly to the left the item currently in focus. Ne fait rien.Does nothing.
Espace/EntréeSpace/Enter Si l’élément a des enfants, développe/réduit l’élément et ne change pas le focus.If item has children, expands/collapses item and does not change focus. Si l’élément a des enfants, développe les enfants dans un menu volant et place le focus sur le premier élément du menu.If item has children, expands children into a flyout and places focus on first item in flyout. Appelle/sélectionne un élément et ferme le menu volant.Invokes/selects item and closes flyout.
ÉchapEsc Ne fait rien.Does nothing. Ne fait rien.Does nothing. Ferme le menu volant.Closes flyout.

La touche Espace ou Entrée appelle/sélectionne toujours un élément.The space or enter key always invokes/selects an item.

*Notez que les éléments n’ont pas besoin d’être visuellement adjacents, car le focus se déplace du dernier élément de la liste du volet vers l’élément relatif aux paramètres.*Note that the items do not need to be visually adjacent, focus will move from the last item in the pane's list to the settings item.

Arrière-plans de volet de navigationPane Backgrounds

Par défaut, le volet NavigationView utilise un arrière-plan différent selon le mode d’affichage :By default, the NavigationView pane uses a different background depending on the display mode:

  • le volet est d'une couleur grise unie lorsqu'il est agrandi à gauche, côte à côte avec le contenu (en mode Left) ;the pane is a solid grey color when expanded on the left, side-by-side with the content (in Left mode).
  • le volet utilise l'acrylique dans l’application lorsqu'il est ouvert sous forme de superposition par rapport au contenu (en mode Top, Minimal ou Compact).the pane uses in-app acrylic when open as an overlay on top of content (in Top, Minimal, or Compact mode).

Pour modifier l'arrière-plan du volet, vous pouvez remplacer les ressources du thème XAML utilisées l’affichage de l'arrière-plan dans chaque mode.To modify the pane background, you can override the XAML theme resources used to render the background in each mode. (Cette technique est privilégiée par rapport à une propriété PaneBackground unique car elle prend en charge différents arrière-plans pour différents modes d'affichage.)(This technique is used rather than a single PaneBackground property in order to support different backgrounds for different display modes.)

Ce tableau indique quelle ressource de thème est utilisée dans chaque mode d'affichage.This table shows which theme resource is used in each display mode.

Mode d’affichageDisplay mode Ressource de thèmeTheme resource
GaucheLeft NavigationViewExpandedPaneBackgroundNavigationViewExpandedPaneBackground
LeftCompactLeftCompact
LeftMinimalLeftMinimal
NavigationViewDefaultPaneBackgroundNavigationViewDefaultPaneBackground
HautTop NavigationViewTopPaneBackgroundNavigationViewTopPaneBackground

Cet exemple montre comment remplacer les ressources de thème dans App.xaml.This example shows how to override the theme resources in App.xaml. Lorsque vous remplacez des ressources de thème, vous devez toujours fournir au minimum les dictionnaires de ressources « Default » et « HighContrast» , et les dictionnaires pour les ressources « Light » ou « Dark » si nécessaire.When you override theme resources, you should always provide "Default" and "HighContrast" resource dictionaries at a minimum, and dictionaries for "Light" or "Dark" resources as needed. Pour plus d’informations, consultez ResourceDictionary.ThemeDictionaries.For more info, see ResourceDictionary.ThemeDictionaries.

Important

Ce code montre comment utiliser la version Bibliothèque d’interface utilisateur Windows d’AcrylicBrush.This code shows how to use the Windows UI Library version of AcrylicBrush. Si vous utilisez la version plateforme d’AcrylicBrush à la place, la version minimale pour votre projet d'application doit être SDK 16299 ou supérieure.If you use the platform version of AcrylicBrush instead, the minimum version for your app project must be SDK 16299 or greater. Pour utiliser la version plateforme, supprimez toutes les références à muxm:.To use the platform version, remove all references to muxm:.

<Application ... xmlns:muxm="using:Microsoft.UI.Xaml.Media" ...>
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
                <ResourceDictionary>
                    <ResourceDictionary.ThemeDictionaries>
                        <ResourceDictionary x:Key="Default">
                            <!-- The "Default" theme dictionary is used unless a specific
                                 light, dark, or high contrast dictionary is provided. These
                                 resources should be tested with both the light and dark themes,
                                 and specific light or dark resources provided as needed. -->
                            <muxm:AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                                   BackgroundSource="Backdrop"
                                   TintColor="LightSlateGray"
                                   TintOpacity=".6"/>
                            <muxm:AcrylicBrush x:Key="NavigationViewTopPaneBackground"
                                   BackgroundSource="Backdrop"
                                   TintColor="{ThemeResource SystemAccentColor}"
                                   TintOpacity=".6"/>
                            <LinearGradientBrush x:Key="NavigationViewExpandedPaneBackground"
                                     StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="LightSlateGray" Offset="0.0" />
                                <GradientStop Color="White" Offset="1.0" />
                            </LinearGradientBrush>
                        </ResourceDictionary>
                        <ResourceDictionary x:Key="HighContrast">
                            <!-- Always include a "HighContrast" dictionary when you override
                                 theme resources. This empty dictionary ensures that the 
                                 default high contrast resources are used when the user
                                 turns on high contrast mode. -->
                        </ResourceDictionary>
                    </ResourceDictionary.ThemeDictionaries>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Espace supérieurTop whitespace

La propriété IsTitleBarAutoPaddingEnabled nécessite la bibliothèque d’IU Windows 2.2 ou version ultérieure.The IsTitleBarAutoPaddingEnabled property requires the Windows UI Library 2.2 or later.

Certaines applications choisissent de personnaliser la barre de titre de leur fenêtre, en étendant éventuellement leur contenu dans la zone de barre de titre.Some apps choose to customize their window's title bar, potentially extending their app content into the title bar area. Quand NavigationView est l’élément racine dans les applications qui étendent dans la barre de titre en utilisant l’API ExtendViewIntoTitleBar ,le contrôle ajuste automatiquement la position de ses éléments interactifs pour éviter le chevauchement avec la zone pouvant être glissée.When NavigationView is the root element in apps that extend into the title bar using the ExtendViewIntoTitleBar API , the control automatically adjusts the position of its interactive elements to prevent overlap with the draggable region.

Application qui s’étend dans la barre de titre

Si votre application spécifie la région qui peut être déplacée par glisser en appelant la méthode Window.SetTitleBar et que vous préférez que les boutons précédent et de menu soient plus près du haut de la fenêtre de votre application, définissez IsTitleBarAutoPaddingEnabled sur false.If your app specifies the draggable region by calling the Window.SetTitleBar method and you would prefer to have the back and menu buttons draw closer to the top of your app window, set IsTitleBarAutoPaddingEnabled to false.

Application qui s’étend dans la barre de titre sans remplissage supplémentaire

<muxc:NavigationView x:Name="NavView" IsTitleBarAutoPaddingEnabled="False">

RemarksRemarks

Pour ajuster davantage la position de la zone d’en-tête de NavigationView, remplacez la ressource de thème XAML NavigationViewHeaderMargin , par exemple dans vos ressources de page.To further adjust the position of NavigationView's header area, override the NavigationViewHeaderMargin XAML theme resource, for example in your Page resources.

<Page.Resources>
    <Thickness x:Key="NavigationViewHeaderMargin">12,0</Thickness>
</Page.Resources>

Cette ressource de thème modifie la marge autour de NavigationView.Header.This theme resource modifies the margin around NavigationView.Header.