ナビゲーション ビューNavigation view

NavigationView コントロールでは、ご利用のアプリの最上位のナビゲーションが提供されます。The NavigationView control provides top-level navigation for your app. これは、さまざまな画面サイズに適応し、_上部_のナビゲーション スタイルと_左側_のナビゲーション スタイルの両方をサポートしています。It adapts to a variety of screen sizes and supports both top and left navigation styles.

上部のナビゲーションtop navigation
ナビゲーション ビューでは上部と左側の両方のナビゲーションのウィンドウまたはメニューがサポートされますNavigation view supports both top and left navigation pane or menu

Windows UI ライブラリを入手するGet the Windows UI Library

WinUI ロゴ

NavigationView コントロールは、Windows アプリのための新しいコントロールと UI 機能を含む NuGet パッケージである Windows UI ライブラリの一部として含まれています。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. インストール手順などの詳細については、Windows UI ライブラリの概要に関するページを参照してください。For more info, including installation instructions, see the Windows UI Library overview.

プラットフォーム API: Windows.UI.Xaml.Controls.NavigationView クラスPlatform APIs: Windows.UI.Xaml.Controls.NavigationView class

Windows UI ライブラリ API: Microsoft.UI.Xaml.Controls.NavigationView クラスWindows UI Library APIs: Microsoft.UI.Xaml.Controls.NavigationView class

"上部" や "階層型" のナビゲーションなど、NavigationView の一部の機能には、Windows 10 バージョン 1809 (SDK 17763) 以降、または Windows UI ライブラリが必要です。Some features of NavigationView, such as top and hierarchical navigation, require Windows 10, version 1809 (SDK 17763) or later, or the Windows UI Library.

これは適切なコントロールですか?Is this the right control?

NavigationView は次の場合に役に立つアダプティブ ナビゲーション コントロールです。NavigationView is an adaptive navigation control that works well for:

  • ご利用のアプリ全体で一貫性のあるナビゲーション エクスペリエンスを提供する。Providing a consistent navigational experience throughout your app.
  • 小さいウィンドウの画面領域を節約する。Preserving screen real estate on smaller windows.
  • 多くのナビゲーション カテゴリへのアクセスを整理する。Organizing access to many navigation categories.

その他のナビゲーション パターンについては、ナビゲーション デザインの基本に関するページを参照してください。For other navigation patterns, see Navigation design basics.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、NavigationView の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the NavigationView in action.

表示モードDisplay modes

PaneDisplayMode プロパティには、Windows 10 バージョン 1809 (SDK 17763) 以降、または Windows UI ライブラリが必要です。The PaneDisplayMode property requires Windows 10, version 1809 (SDK 17763) or later, or the Windows UI Library.

PaneDisplayMode プロパティを使用すれば、NavigationView でさまざまなナビゲーション スタイルまたは表示モードを構成することができます。You can use the PaneDisplayMode property to configure different navigation styles, or display modes, for the NavigationView.

Top

ウィンドウはコンテンツの上に配置されます。The pane is positioned above the content.
PaneDisplayMode="Top"

上部のナビゲーションの例

次の場合に_上部_ナビゲーションをお勧めします。We recommend top navigation when:

  • 同じ重要度の最上位ナビゲーション カテゴリが 5 個以下であり、ドロップダウン オーバーフロー メニューとなる追加の最上位ナビゲーション カテゴリはいずれも、それほど重要ではないと考えられる。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.
  • 画面上にナビゲーション オプションをすべて表示する必要がある。You need to show all navigation options on screen.
  • ご利用のアプリのコンテンツ用にスペースを追加したい。You want more space for your app content.
  • アイコンでは、ご利用のアプリのナビゲーション カテゴリを明確に説明できない。Icons cannot clearly describe your app's navigation categories.

Left

ウィンドウはコンテンツの左側に展開および配置されます。The pane is expanded and positioned to the left of the content.
PaneDisplayMode="Left"

展開された左側のナビゲーションのウィンドウの例

次の場合に_左側_のナビゲーションをお勧めします。We recommend left navigation when:

  • 同じ重要度の最上位ナビゲーション カテゴリが 5 から 10 個ある。You have 5-10 equally important top-level navigation categories.
  • ナビゲーション カテゴリ以外のアプリ コンテンツ用のスペースを少なくして、ナビゲーション カテゴリを非常に目立つようにする。You want navigation categories to be very prominent, with less space for other app content.

LeftCompactLeftCompact

ウィンドウは開かれるまでアイコンのみを表示し、ウィンドウはコンテンツの左側に配置されます。The pane shows only icons until opened and is positioned to the left of the content.
PaneDisplayMode="LeftCompact"

コンパクトな左側のナビゲーションのウィンドウの例

LeftMinimalLeftMinimal

ウィンドウが開かれるまで、メニュー ボタンのみが表示されます。Only the menu button is shown until the pane is opened. 開かれると、コンテンツの左側に配置されます。When opened, it's positioned to the left of the content.
PaneDisplayMode="LeftMinimal"

最小化されている左側のナビゲーションのウィンドウの例

自動Auto

既定では、PaneDisplayMode は Auto に設定されます。自動モードでは、ナビゲーション ビューは、ウィンドウが狭いときは LeftMinimal または LeftCompact となり、ウィンドウが広くなると Left に切り替わります。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. 詳細については、「アダプティブ動作」セクションを参照してください。For more info, see the adaptive behavior section.

左側のナビゲーションの既定のアダプティブ動作Left navigation default adaptive behavior
ナビゲーション ビューの既定のアダプティブ動作Navigation view default adaptive behavior

構造Anatomy

これらのイメージは、_上部_または_左側_のナビゲーションが構成されている場合の、ウィンドウ、ヘッダー、およびコントロールのコンテンツ領域のレイアウトを示します。These images show the layout of the pane, header, and content areas of the control when configured for top or left navigation.

上部のナビゲーション ビューのレイアウトTop navigation view layout
上部のナビゲーションのレイアウトTop navigation layout

左側のナビゲーション ビューのレイアウトLeft navigation view layout
左側のナビゲーションのレイアウトLeft navigation layout

ウィンドウPane

PaneDisplayMode プロパティを使用すると、コンテンツの上またはコンテンツの左側にウィンドウを配置できます。You can use the PaneDisplayMode property to position the pane above the content or to the left of the content.

NavigationView ウィンドウには、次のものを含めることができます。The NavigationView pane can contain:

また、左側のウィンドウには次のものが含まれています。The left pane also contains:

  • ウィンドウの開閉を切り替えるメニュー ボタン。A menu button to toggle the pane opened and closed. IsPaneToggleButtonVisible プロパティを使うと、ウィンドウが開いたとき、大きなアプリ ウィンドウで、このボタンを非表示にすることを選択できます。On larger app windows when the pane is open, you may choose to hide this button using the IsPaneToggleButtonVisible property.

ナビゲーション ビューには、ウィンドウの左上隅に配置された [戻る] ボタンがあります。The navigation view has a back button that is placed in the top left-hand corner of the pane. ただし、これを使用しても、後方ナビゲーションの処理と、バック スタックへのコンテンツの追加は自動的には行われません。However, it does not automatically handle backwards navigation and add content to the back stack. 前に戻る処理を有効にするには、「後方ナビゲーション」セクションを参照してください。To enable backwards navigation, see the backwards navigation section.

ウィンドウが上部または左側に配置された場合の詳細なウィンドウ構造を以下に示します。Here is the detailed pane anatomy for the top and left pane positions.

上部のナビゲーションのウィンドウTop navigation pane

ナビゲーション ビューの上部のウィンドウの構造

  1. ヘッダーHeaders
  2. ナビゲーション項目Navigation items
  3. 区切り記号Separators
  4. AutoSuggestBox (オプション)AutoSuggestBox (optional)
  5. [設定] ボタン (オプション)Settings button (optional)

左側のナビゲーションのウィンドウLeft navigation pane

ナビゲーション ビューの左側のウィンドウの構造

  1. メニュー ボタンMenu button
  2. ナビゲーション項目Navigation items
  3. 区切り記号Separators
  4. ヘッダーHeaders
  5. AutoSuggestBox (オプション)AutoSuggestBox (optional)
  6. [設定] ボタン (オプション)Settings button (optional)

PaneFooter プロパティに自由形式のコンテンツを追加すると、それをウィンドウのフッターに配置することができます。You can place free-form content in the pane's footer by adding it to the PaneFooter property.

ウィンドウのフッターの上部のナビゲーションPane footer top nav
上部のウィンドウのフッターTop pane footer

ウィンドウのフッターの左側のナビゲーションPane footer left nav
左側のウィンドウのフッターLeft pane footer

ウィンドウのタイトルとヘッダーPane title and header

PaneTitle プロパティを設定することで、ウィンドウのヘッダー領域にテキスト コンテンツを配置できます。You can place text content in the pane header area by setting the PaneTitle property. このプロパティは文字列を取り、メニュー ボタンの横にテキストを表示します。It takes a string and shows the text next to the menu button.

画像やロゴなどのテキスト以外のコンテンツを追加するには、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.

PaneTitle と PaneHeader の両方を設定した場合、コンテンツはメニュー ボタンの横に水平に積み上げられ、PaneTitle はメニュー ボタンに最も近くなります。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.

ウィンドウのヘッダーの上部のナビゲーションPane header top nav
上部のウィンドウのヘッダーTop pane header

ウィンドウのヘッダーの左側のナビゲーションPane header left nav
左側のウィンドウのヘッダーLeft pane header

ウィンドウのコンテンツPane content

自由形式のコンテンツは、PaneCustomContent プロパティに追加することでウィンドウに配置できます。You can place free-form content in the pane by adding it to the PaneCustomContent property.

ウィンドウのカスタム コンテンツの上部のナビゲーションPane custom content top nav
上部のウィンドウのカスタム コンテンツTop pane custom content

ウィンドウのカスタム コンテンツの左側のナビゲーションPane custom content left nav
左側のウィンドウのカスタム コンテンツLeft pane custom content

Header プロパティを設定することで、ページのタイトルを追加できます。You can add a page title by setting the Header property.

ナビゲーション ビューのヘッダー領域の例Example of navigation view header area
ナビゲーション ビューのヘッダーNavigation view header

ヘッダー領域は、左側のウィンドウ位置では移動ボタンともに垂直方向に揃えられ、上部のウィンドウ位置ではウィンドウの下に置かれます。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. その高さは、52 ピクセルで固定です。It has a fixed height of 52 px. これは、選択されたナビゲーション カテゴリのページ タイトルを保持するためです。Its purpose is to hold the page title of the selected nav category. ヘッダーはページ上部に固定され、コンテンツ領域のスクロール クリッピング ポイントとして機能します。The header is docked to the top of the page and acts as a scroll clipping point for the content area.

ヘッダーは、NavigationView が Minimal モードのときはいつも表示されます。The header is visible any time the NavigationView is in Minimal display mode. ウィンドウの幅をもっと広げて使用される他のモードでは、ヘッダーを非表示にすることもできます。You may choose to hide the header in other modes, which are used on larger window widths. ヘッダーを非表示にするには、AlwaysShowHeader プロパティを false に設定します。To hide the header, set the AlwaysShowHeader property to false.

コンテンツContent

ナビゲーション ビューのコンテンツ領域の例Example of navigation view content area
ナビゲーション ビューのコンテンツNavigation view content

コンテンツ領域には、選んだナビゲーション カテゴリのほとんどの情報が表示されます。The content area is where most of the information for the selected nav category is displayed.

NavigationView がMinimal モードの場合はコンテンツ領域に 12 ピクセルの余白を設定し、それ以外の場合は 24 ピクセルの余白を設定することをお勧めします。We recommend 12px margins for your content area when NavigationView is in Minimal mode and 24px margins otherwise.

アダプティブ動作Adaptive behavior

既定では、ナビゲーション ビューは、利用可能な画面領域の大きさに基づいて自動的に表示モードが変わります。By default, the navigation view automatically changes its display mode based on the amount of screen space available to it. CompactModeThresholdWidth プロパティおよび ExpandedModeThresholdWidth プロパティでは、表示モードが変更されるブレークポイントが指定されます。The CompactModeThresholdWidth and ExpandedModeThresholdWidth properties specify the breakpoints at which the display mode changes. これらの値を変更することで、アダプティブ表示モードの動作をカスタマイズできます。You can modify these values to customize the adaptive display mode behavior.

既定Default

PaneDisplayMode を既定値である Auto に設定すると、アダプティブ動作は次のようになります。When PaneDisplayMode is set to its default value of Auto, the adaptive behavior is to show:

  • ウィンドウ幅が広い場合 (1008 ピクセル以上)、展開された左側のウィンドウが表示されます。An expanded left pane on large window widths (1008px or greater).
  • ウィンドウ幅が中くらいの場合 (641 ピクセルから 1007 ピクセル)、左側 (アイコンのみ) のナビゲーションのウィンドウ (LeftCompact) が表示されます。A left, icon-only, nav pane (LeftCompact) on medium window widths (641px to 1007px).
  • ウィンドウ幅が狭い場合 (640 ピクセル以下)、メニュー ボタン (LeftMinimal) のみが表示されます。Only a menu button (LeftMinimal) on small window widths (640px or less).

アダプティブ動作に対応するウィンドウ サイズの詳細については、「画面のサイズとブレークポイント」を参照してください。For more information about window sizes for adaptive behavior, see Screen sizes and breakpoints.

左側のナビゲーションの既定のアダプティブ動作Left navigation default adaptive behavior
ナビゲーション ビューの既定のアダプティブ動作Navigation view default adaptive behavior

最小Minimal

2 つ目の一般的なアダプティブ パターンは、ウィンドウ幅が広い場合は展開された左側のウィンドウを使用し、ウィンドウ幅が中くらいまたは狭い場合はメニュー ボタンのみを使用するというものです。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.

これは次の場合にお勧めします。We recommend this when:

  • ウィンドウ幅が小さい場合にアプリ コンテンツ用のスペースを広く確保したい。You want more space for app content on smaller window widths.
  • アイコンでは、ナビゲーション カテゴリを明確に表すことができない。Your navigation categories cannot be clearly represented with icons.

左側のナビゲーションの最小アダプティブ動作Left navigation minimal adaptive behavior
ナビゲーション ビューの "最小" アダプティブ動作Navigation view "minimal" adaptive behavior

この動作を設定するには、ウィンドウを折りたたむときの幅を CompactModeThresholdWidth に設定します。To configure this behavior, set CompactModeThresholdWidth to the width at which you want the pane to collapse. ここでは、既定の 640 から 1007 に変更されています。Here, it's changed from the default of 640 to 1007. また、値が競合しないように ExpandedModeThresholdWidth を設定する必要があります。You should also set ExpandedModeThresholdWidth to ensure the values don't conflict.

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

コンパクトCompact

3 つ目の一般的なアダプティブ パターンは、ウィンドウ幅が広い場合は展開された左側のウィンドウを使用し、ウィンドウ幅が中くらいの場合と狭い場合では LeftCompact (アイコンのみ) ナビゲーション ウィンドウを使用するというものです。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.

これは次の場合にお勧めします。We recommend this when:

  • 常にすべてのナビゲーション オプションを画面に表示することが重要。It is important to always show all navigation options on screen.
  • アイコンで、ナビゲーション カテゴリを明確に表すことができる。Your navigation categories can be clearly represented with icons.

左側のナビゲーションのコンパクト アダプティブ動作Left navigation compact adaptive behavior
ナビゲーション ビューの "コンパクト" アダプティブ動作Navigation view "compact" adaptive behavior

この動作を構成するには、CompactModeThresholdWidth を 0 に設定します。To configure this behavior, set CompactModeThresholdWidth to 0.

<NavigationView CompactModeThresholdWidth="0"/>

アダプティブ動作なしNo adaptive behavior

自動アダプティブ動作を無効にするには、PaneDisplayMode を Auto 以外の値に設定します。ここでは、LeftMinimal に設定されているので、ウィンドウの幅に関係なくメニュー ボタンのみが表示されます。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.

左側のナビゲーションのアダプティブ動作なしLeft navigation no adaptive behavior
PaneDisplayMode が LeftMinimal に設定されたナビゲーション ビューNavigation view with PaneDisplayMode set to LeftMinimal

<NavigationView PaneDisplayMode="LeftMinimal" />

表示モード」セクションで既に説明したように、ウィンドウが常に上部にある状態、常に展開された状態、常にコンパクトの状態、または常に最小の状態になるように設定することができます。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. ご自分のアプリ コード内で表示モードを自身で管理することもできます。You can also manage the display modes yourself in your app code. この例については、次のセクションで示します。An example of this is shown in the next section.

上部のナビゲーションから左側のナビゲーションへTop to left navigation

ご利用のアプリで上部のナビゲーションを使用すると、ウィンドウ幅が狭くなるにつれてナビゲーション項目がオーバーフロー メニューに折りたたまれます。When you use top navigation in your app, navigation items collapse into an overflow menu as the window width decreases. ご利用のアプリのウィンドウ幅が狭い場合は、すべての項目をオーバーフロー メニューに折りたたむのではなく、PaneDisplayMode を Top ナビゲーションから LeftMinimal ナビゲーションに切り替える方がユーザー エクスペリエンスが向上します。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.

次の場合、ウィンドウ サイズが大きいときは上部のナビゲーションを使用し、ウィンドウ サイズが小さいときは左側のナビゲーションを使用することをお勧めします。We recommend using top navigation on large window sizes and left navigation on small window sizes when:

  • 最上位ナビゲーション カテゴリのセット内の 1 つが画面に収まらない場合に、左側のナビゲーションに折りたたんで重要度を同じにして一緒に表示される必要のある同じ重要度のセットがある。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.
  • 小さいウィンドウ サイズでできるだけ多くのコンテンツスペースを確保したい。You wish to preserve as much content space as possible in small window sizes.

この例では、VisualStateManager プロパティと AdaptiveTrigger.MinWindowWidth プロパティを使用して、Top ナビゲーションと LeftMinimal ナビゲーションを切り替える方法を示します。This example shows how to use a VisualStateManager and AdaptiveTrigger.MinWindowWidth property to switch between Top and LeftMinimal navigation.

上部または左側のアダプティブ動作 1 の例

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

ヒント

AdaptiveTrigger.MinWindowWidth を使用すると、ウィンドウの幅が指定された最小幅よりも広くなったときに表示状態がトリガーされます。When you use AdaptiveTrigger.MinWindowWidth, the visual state is triggered when the window is wider than the specified minimum width. つまり、既定の XAML によって狭いウィンドウが定義され、VisualState によってウィンドウが広くなったときに適用する変更が定義されます。This means the default XAML defines the narrow window, and the VisualState defines the modifications that are applied when the window gets wider. ナビゲーション ビューの既定の PaneDisplayMode は Auto です。したがって、ウィンドウの幅が CompactModeThresholdWidth 以下である場合は、LeftMinimal ナビゲーションが使用されます。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. ウィンドウが広くなると、VisualState によって既定値がオーバーライドされ、Top ナビゲーションが使用されます。When the window gets wider, the VisualState overrides the default, and Top navigation is used.

ナビゲーション ビューではナビゲーション タスクは自動的に実行されません。The navigation view doesn't perform any navigation tasks automatically. ユーザーがナビゲーション項目をタップすると、ナビゲーション ビューではその項目が選択済みとして表示され、ItemInvoked イベントが発生します。When the user taps on a navigation item, the navigation view shows that item as selected and raises an ItemInvoked event. タップによって新しい項目が選択されると、SelectionChanged イベントも発生します。If the tap results in a new item being selected, a SelectionChanged event is also raised.

どちらのイベントを処理しても、要求されたナビゲーションに関連するタスクを実行できます。You can handle either event to perform tasks related to the requested navigation. どちらを処理する必要があるかは、ご利用のアプリに求める動作によって異なります。Which one you should handle depends on the behavior you want for your app. 通常は、要求されたページに移動し、これらのイベントに応じてナビゲーション ビューのヘッダーを更新します。Typically, you navigate to the requested page and update the navigation view header in response to these events.

ItemInvoked は、ユーザーがナビゲーション項目をタップするたびに、それが既に選択されている場合でも発生します。ItemInvoked is raised any time the user taps a navigation item, even if it's already selected. (項目は、マウス、キーボード、またはその他の入力を使用して同等の操作で呼び出すこともできます。(The item can also be invoked with an equivalent action using mouse, keyboard, or other input. 詳細については、「入力と操作」を参照してください)。ItemInvoked ハンドラー内を移動すると、既定ではページが再読み込みされ、重複エントリがナビゲーション スタックに追加されます。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. 項目が呼び出されたときに移動する場合は、ページの再読み込みを禁止するか、またはページが再読み込みされるときにナビゲーション バックスタック内に重複エントリが決して作成されないようにする必要があります。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. (コード例を参照してください)。(See code examples.)

SelectionChanged は、現在選択されていない項目をユーザーが呼び出すことで発生させることも、選択された項目をプログラムで変更することによって発生させることもできます。SelectionChanged can be raised by a user invoking an item that isn't currently selected, or by programmatically changing the selected item. ユーザーが項目を呼び出したために選択の変更が発生した場合は、最初に ItemInvoked イベントが発生します。If the selection change occurs because a user invoked an item, the ItemInvoked event occurs first. 選択の変更がプログラムによるものである場合、ItemInvoked は発生しません。If the selection change is programmatic, ItemInvoked is not raised.

逆方向のナビゲーションBackwards navigation

NavigationView には組み込みの [戻る] ボタンがありますが、前方ナビゲーションと同様に、後方ナビゲーションは自動的には実行されません。NavigationView has a built-in back button; but, as with forward navigation, it doesn't perform backwards navigation automatically. ユーザーが [戻る] ボタンをタップすると、BackRequested イベントが発生します。When the user taps the back button, the BackRequested event is raised. このイベントを処理して、後方ナビゲーションを実行します。You handle this event to perform backwards navigation. 詳細については、ナビゲーション履歴と後方ナビゲーションに関するページを参照してください。For more info and code examples, see Navigation history and backwards navigation.

Minimal モードまたは Compact モードでは、ナビゲーション ビュー ウィンドウはポップアップとして開きます。In Minimal or Compact mode, the navigation view Pane is open as a flyout. この場合、[戻る] ボタンをクリックすると、ウィンドウが閉じられ、代わりに PaneClosing イベントが発生します。In this case, clicking the back button will close the Pane and raise the PaneClosing event instead.

以下のプロパティを設定することで、[戻る] ボタンを非表示または無効にすることができます。You can hide or disable the back button by setting these properties:

  • IsBackButtonVisible: [戻る] ボタンを表示および非表示にするために使用します。IsBackButtonVisible: use to show and hide the back button. このプロパティは NavigationViewBackButtonVisible 列挙体の値を取り、既定では Auto に設定されています。This property takes a value of the NavigationViewBackButtonVisible enumeration, and is set to Auto by default. ボタンが折りたたまれると、このボタン用のスペースはレイアウト内に確保されません。When the button is collapsed, no space is reserved for it in the layout.
  • IsBackEnabled: [戻る] ボタンを有効または無効にするために使用します。IsBackEnabled: use to enable or disable the back button. このプロパティは、ご利用のナビゲーション フレームの CanGoBack プロパティにデータ バインドすることができます。You can data bind this property to the CanGoBack property of your navigation frame. IsBackEnabledfalse の場合、BackRequested は発生しません。BackRequested is not raised if IsBackEnabled is false.

左側のナビゲーション ウィンドウのナビゲーション ビューの [戻る] ボタンNavigation view back button in the left navigation pane
左側のナビゲーション ウィンドウの [戻る] ボタンThe back button in the left navigation pane

上部ナビゲーション ウィンドウのナビゲーション ビューの [戻る] ボタンNavigation view back button in the top navigation pane
上部ナビゲーション ウィンドウの [戻る] ボタンThe back button in the top navigation pane

コードの例Code example

重要

Windows UI (WinUI) ライブラリ ツールキットを活用するプロジェクトについては、同じ準備段階のセットアップの手順を実行します。For any project that makes use of the Windows UI (WinUI) Library toolkit, you go through the same preliminary setup setps. 背景、セットアップ、およびサポート情報の詳細については、「Windows UI ライブラリの概要」を参照してください。For more background, setup, and support info, see Getting started with the Windows UI Library.

この例では、ウィンドウ サイズが大きい場合の上部のナビゲーション ウィンドウとウィンドウ サイズが小さい場合の左側のナビゲーション ウィンドウの両方で NavigationView を使用する方法を示します。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. これは、VisualStateManager上部のナビゲーション設定を削除することにより、左側のみのナビゲーションに適応させることができます。It can be adapted to left-only navigation by removing the top navigation settings in the VisualStateManager.

この例は、一般的なシナリオの多くで機能するナビゲーション データを設定するための推奨方法を示しています。The example demonstrates a recommended way to set up navigation data that will work for many common scenarios. また、NavigationView の [戻る] ボタンとキーボード ナビゲーションを使用して後方ナビゲーションを実装する方法についても示します。It also demonstrates how to implement backwards navigation with NavigationView's back button and keyboard navigation.

このコードでは、移動先である次の名前を含むページが、ご利用のアプリに含まれていることを前提としています。HomePageAppsPageGamesPageMusicPageMyContentPage、および SettingsPageThis code assumes that your app contains pages with the following names to navigate to: HomePage, AppsPage, GamesPage, MusicPage, MyContentPage, and SettingsPage. これらのページのコードは示されていません。Code for these pages is not shown.

重要

アプリのページに関する情報は ValueTuple に格納されています。Information about the app's pages is stored in a ValueTuple. この構造体を使用するには、ご利用のアプリ プロジェクトの最小バージョンが SDK 17763 以上である必要があります。This struct requires that the minimum version for your app project must be SDK 17763 or greater. 前のバージョンの Windows 10 をターゲットとする NavigationView の WinUI バージョンを使用する場合は、代わりに System.ValueTuple NuGet パッケージを使用することができます。If you use the WinUI version of NavigationView to target earlier versions of Windows 10, you can use the System.ValueTuple NuGet package instead.

重要

このコードでは、NavigationView の Windows UI ライブラリ バージョンの使い方を示します。This code shows how to use the Windows UI Library version of NavigationView. プラットフォーム バージョンの NavigationView を代わりに使用する場合、アプリ プロジェクトの最小バージョンは SDK 17763 以上である必要があります。If you use the platform version of NavigationView instead, the minimum version for your app project must be SDK 17763 or greater. プラットフォーム バージョンを使用するには、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>

重要

このコードでは、NavigationView の Windows UI ライブラリ バージョンの使い方を示します。This code shows how to use the Windows UI Library version of NavigationView. プラットフォーム バージョンの NavigationView を代わりに使用する場合、アプリ プロジェクトの最小バージョンは SDK 17763 以上である必要があります。If you use the platform version of NavigationView instead, the minimum version for your app project must be SDK 17763 or greater. プラットフォーム バージョンを使用するには、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();
    }
}

注意

このコード例の C++/WinRT バージョンについては、最初に空のアプリ (C++/WinRT) プロジェクト テンプレートに基づいて新しいプロジェクトを作成してから、登録情報内のコードを指定されたソース コード ファイルに追加します。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. 登録情報に示されているとおりにソース コードを使用するには、新しいプロジェクトに NavigationViewCppWinRT という名前を付けますTo 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;
                }
            }
        }
    }
}

別の C++ /WinRT 実装Alternative C++/WinRT implementation

上記の C# および C++ /WinRT コードは、両方のバージョンで同じ XAML マークアップを使用できるように設計されています。The C# and C++/WinRT code show above is designed so that you can use the same XAML markup for both versions. ただし、このセクションに記載されている C++/WinRT バージョンを実装する別の方法があり、これが適切である場合もあります。However, there is another way of implementing the C++/WinRT version described in this section, which you may prefer.

次に示すのは、NavView_ItemInvoked ハンドラーの別のバージョンです。Below is an alternative version of the NavView_ItemInvoked handler. このバージョンのハンドラーの手法では、移動先のページの完全な型名を (NavigationViewItem のタグに) 最初に格納する必要があります。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. ハンドラーでは、その値のボックス化を解除し、それを Windows::UI::Xaml::Interop::TypeName オブジェクトに変換し、それを使用して目的のページに移動します。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. 上記の例に示した _pages という名前のマッピング変数は必要ありません。また、ご利用のタグ内の値が有効な型であることを確認するための単体テストを作成することができます。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. C++/WinRT を使用した IInspectable へのスカラー値のボックス化とボックス化解除」も参照してください。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);
    }
}

階層型ナビゲーションHierarchical navigation

アプリによっては、ナビゲーション項目の単純なリストだけでは対応しきれない、より複雑な階層構造が存在する場合があります。Some apps may have a more complex hierarchical structure that requires more than just a flat list of navigation items. 最上位レベルのナビゲーション項目を使用してページのカテゴリを表示し、特定のページを子項目で表示することができます。You may want to use top-level navigation items to display categories of pages, with children items displaying specific pages. これは、他のページにリンクされているだけのハブスタイルのページがある場合にも便利です。It is also useful if you have hub-style pages that only link to other pages. このような場合には、階層型の NavigationView を作成する必要があります。For these kinds of cases, you should create a hierarchical NavigationView.

入れ子になったナビゲーション項目の階層型リストをペインに表示するには、NavigationViewItemMenuItems プロパティか MenuItemsSource プロパティを使用します。To show a hierarchical list of nested navigation items in the pane, use either the MenuItems property or the MenuItemsSource property of NavigationViewItem. 各 NavigationViewItem には、他の NavigationViewItems と整理のための要素 (項目ヘッダーや区切り記号など) 含めることができます。Each NavigationViewItem can contain other NavigationViewItems and organizing elements like item headers and separators. MenuItemsSource を使用するときに階層型リストを表示するには、ItemTemplate が NavigationViewItem になるように設定し、その MenuItemsSource プロパティを階層の次のレベルにバインドします。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.

NavigationViewItem には入れ子になったレベルをいくつでも含めることができますが、アプリのナビゲーション階層は浅く保つことをお勧めします。Although NavigationViewItem can contain any number of nested levels, we recommend keeping your app’s navigation hierarchy shallow. 使いやすさと理解しやすさを考慮すると、レベルは 2 つが理想的でしょう。We believe two levels is ideal for usability and comprehension.

NavigationView では、Top、Left、LeftCompact のペイン表示モードで階層が表示されます。NavigationView shows hierarchy in Top, Left, and LeftCompact pane display modes. 各ペイン表示モードで展開されたサブツリーは次のようになります。Here is what an expanded subtree looks like in each of the pane display modes:

階層構造を備えた NavigationView

マークアップでの項目の階層の追加Adding a hierarchy of items in markup

マークアップでアプリのナビゲーション階層を宣言します。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>

データ バインディングを使用した項目の階層の追加Adding a hierarchy of items using data binding

メニュー項目の階層を NavigationView に追加する方法Add a hierarchy of menu items to the NavigationView by

  • MenuItemsSource プロパティを階層型データにバインドするbinding the MenuItemsSource property to the hierarchical data
  • 項目テンプレートを NavigationViewMenuItem として定義し、その内容をメニュー項目のラベルに設定し、その MenuItemsSource プロパティを階層の次のレベルにバインドする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

この例では、Expanding イベントと Collapsed イベントも示されています。This example also demonstrates the Expanding and Collapsed events. これらのイベントは、子があるメニュー項目に対して発生します。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);
    }
}

選択Selection

既定では、すべての項目に対して子を含めることができるほか、呼び出し、選択を行えます。By default, any item can contain children, be invoked, or be selected.

ナビゲーション オプションの階層型ツリーをユーザーに提供する場合、親項目を選択不可にすることができます。たとえば、アプリにその親項目に関連付けられたリンク先ページが存在しない場合などです。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. 親項目が選択可能 "である" 場合は、左展開または Top のペイン表示モードの使用をお勧めします。If your parent items are selectable, it's recommend you use the Left-Expanded or Top pane display modes. LeftCompact モードでは、その呼び出しのたびにユーザーが子サブツリーを開くために親項目に移動することになります。LeftCompact mode will cause the user to navigate to the parent item in order to open the child subtree every time it's invoked.

項目を選択すると、選択インジケーターが Left モードの場合は左端に沿って、Top モードの場合は下端に合わせて表示されます。Selected items will draw their selection indicators along their left edge when in left mode or their bottom edge when in top mode. 親項目が選択されている Left モードおよび Top モードの NavigationViews を次に示します。Shown below are NavigationViews in left and top mode where a parent item is selected.

親が選択された状態の Left モードの NavigationView

親が選択された状態の Top モードの NavigationView

選択した項目は、常に表示されたままとは限りません。The selected item may not always remain visible. 折りたたまれた、または展開されていないサブツリー内の子が選択された場合、最初に表示される先祖が選択済みとして表示されます。If a child in a collapsed/non-expanded subtree is selected, their first visible ancestor will show as selected. サブツリーが展開されている場合または展開された場合、選択インジケーターは選択された項目に戻ります。The selection indicator will move back to the selected item if/when the sub-tree is expanded.

たとえば、上の図では、ユーザーがカレンダー項目を選択した後、そのサブツリーを折りたたむことができます。For example - in the above image, the Calendar item may be selected by the user, and then the user may collapse its subtree. この場合、カレンダーで最初に表示される先祖はアカウントなので、選択インジケーターはアカウント項目の下に表示されます。In this case, the selection indicator would show up underneath the Account item as Account is Calendar's first visible ancestor. ユーザーがサブツリーを再度展開すると、選択インジケーターはカレンダー項目に戻ります。The selection indicator will move back to the Calendar item as the user expands the subtree again.

NavigationView では、選択インジケーターは全体で 1 つだけ表示されます。The entire NavigationView will show no more than one selection indicator.

Top と Left どちらのモードも、NavigationViewItems の矢印をクリックすると、サブツリーが展開されるか折りたたまれます。In both Top and Left modes, clicking the arrows on NavigationViewItems will expand or collapse the subtree. NavigationViewItem の "別の場所" をクリックまたはタップすると、ItemInvoked イベントがトリガーされ、サブツリーも折りたたまれるか展開されます。Clicking or tapping elsewhere on the NavigationViewItem will trigger the ItemInvoked event, and it will also collapse or expand the subtree.

項目が呼び出されたときに選択インジケーターが表示されないようにするには、その項目の SelectsOnInvoked プロパティを次のように False に設定します。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);
}
...

階層型 NavigationView 内でのキーボード操作Keyboarding within hierarchical NavigationView

ユーザーは、キーボードを使用してナビゲーション ビューの周囲にフォーカスを移動できます。Users can move focus around the navigation view using their keyboard. 方向キーはペイン内の "内部ナビゲーション" を表示し、ツリー ビューでのアクションに従います。The arrow keys expose "inner navigation" within the pane and follow the interactions provided in tree view. キー アクションは、NavigationView 内を移動するとき、または HierarchicalNavigationView の Top および LeftCompact モードで表示されるポップアップ メニュー内を移動するときに変更されます。The key actions change when navigating through the NavigationView or its flyout menu, which is displayed in Top and Left-compact modes of HierarchicalNavigationView. 階層型の NavigationView で各キーが実行できる特定のアクションを次に示します。Below are the specific actions that each key can take in a hierarchical NavigationView:

キーKey Left モードIn Left Mode Top モードIn Top Mode ポップアップIn Flyout
[上へ]Up 現在フォーカスされている項目のすぐ上の項目にフォーカスを移動します。Moves focus to the item directly above the item currently in focus. 何も実行しません。Does nothing. 現在フォーカスされている項目のすぐ上の項目にフォーカスを移動します。Moves focus to the item directly above the item currently in focus.
[下へ]Down 現在フォーカスされている項目のすぐ下にフォーカスを移動します。*Moves focus directly below the item currently in focus.* 何も実行しません。Does nothing. 現在フォーカスされている項目のすぐ下にフォーカスを移動します。*Moves focus directly below the item currently in focus.*
権限Right 何も実行しません。Does nothing. 現在フォーカスされている項目の右隣の項目にフォーカスを移動します。Moves focus to the item directly to the right of the item currently in focus. 何も実行しません。Does nothing.
Left 何も実行しません。Does nothing. 現在フォーカスされている項目の左隣の項目にフォーカスを移動します。Moves focus to the item directly to the left the item currently in focus. 何も実行しません。Does nothing.
Space または EnterSpace/Enter 項目に子がある場合、フォーカスを変更せずに項目を展開するか折りたたみます。If item has children, expands/collapses item and does not change focus. 項目に子がある場合、子をポップアップとして展開し、ポップアップの最初の項目にフォーカスを置きます。If item has children, expands children into a flyout and places focus on first item in flyout. 項目を呼び出すか選択して、ポップアップを閉じます。Invokes/selects item and closes flyout.
EscEsc 何も実行しません。Does nothing. 何も実行しません。Does nothing. ポップアップを閉じます。Closes flyout.

Space または Enter キーでは常に項目の呼び出しまたは選択を行います。The space or enter key always invokes/selects an item.

* 項目が視覚的に隣接している必要はありません。ペインの一覧の最後の項目にあるフォーカスは設定項目に移動します。*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.

ウィンドウの背景Pane Backgrounds

既定では、NavigationView ウィンドウでは表示モードに応じて次のようにさまざまな背景が使用されます。By default, the NavigationView pane uses a different background depending on the display mode:

  • ウィンドウは、コンテンツと横並びに左側に展開されると灰色の単色になります (Left モード)。the pane is a solid grey color when expanded on the left, side-by-side with the content (in Left mode).
  • コンテンツの上部にオーバーレイとして開かれたウィンドウでは、アプリ内アクリルが使用されます (Top モード、Minimal モード、または Compact モード)。the pane uses in-app acrylic when open as an overlay on top of content (in Top, Minimal, or Compact mode).

ウィンドウの背景を変更するには、各モードで背景をレンダリングするのに使用される XAML テーマ リソースをオーバーライドしますTo modify the pane background, you can override the XAML theme resources used to render the background in each mode. (各種表示モードに対してさまざまな背景をサポートするには、単一の PaneBackground プロパティではなくこの手法が使用されます)。(This technique is used rather than a single PaneBackground property in order to support different backgrounds for different display modes.)

次の表に、各表示モードで使用されるテーマ リソースを示します。This table shows which theme resource is used in each display mode.

表示モードDisplay mode テーマ リソースTheme resource
Left NavigationViewExpandedPaneBackgroundNavigationViewExpandedPaneBackground
LeftCompactLeftCompact
LeftMinimalLeftMinimal
NavigationViewDefaultPaneBackgroundNavigationViewDefaultPaneBackground
Top NavigationViewTopPaneBackgroundNavigationViewTopPaneBackground

この例では、App.xaml 内でテーマ リソースをオーバーライドする方法を示します。This example shows how to override the theme resources in App.xaml. テーマ リソースをオーバーライドする場合、最低でも "Default" および "HighContrast" のリソース辞書は常に指定し、"Light" または "Dark" リソース用の辞書は必要に応じて指定します。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. 詳細については、ResourceDictionary.ThemeDictionaries に関するページを参照してください。For more info, see ResourceDictionary.ThemeDictionaries.

重要

このコードでは、AcrylicBrush の Windows UI ライブラリ バージョンの使い方を示します。This code shows how to use the Windows UI Library version of AcrylicBrush. プラットフォーム バージョンの AcrylicBrush を代わりに使用する場合、アプリ プロジェクトの最小バージョンは SDK 16299 以上である必要があります。If you use the platform version of AcrylicBrush instead, the minimum version for your app project must be SDK 16299 or greater. プラットフォーム バージョンを使用するには、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>

先頭の空白Top whitespace

IsTitleBarAutoPaddingEnabled プロパティには、Windows UI ライブラリ 2.2 以降が必要です。The IsTitleBarAutoPaddingEnabled property requires the Windows UI Library 2.2 or later.

一部のアプリでは、そのウィンドウのタイトル バーをカスタマイズするように選択できるため、そのアプリのコンテンツがタイトル バー領域に拡張される可能性があります。Some apps choose to customize their window's title bar, potentially extending their app content into the title bar area. NavigationView が、 ExtendViewIntoTitleBar API を使用してタイトル バーに拡張されるアプリ内のルート要素である場合、ドラッグ可能な領域との重なりを避けるためその対話型要素の位置が自動的に調整されます。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.

アプリのタイトル バーへの拡張

ドラッグ可能な領域が Window.SetTitleBar メソッドを呼び出すことによってアプリで指定されている場合、戻るボタンやメニュー ボタンをアプリ ウィンドウの上部近くに配置するには、IsTitleBarAutoPaddingEnabledfalse に設定します。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.

余白なしのアプリのタイトル バーへの拡張

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

コメントRemarks

NavigationView のヘッダー領域の位置をさらに調整するには、Page リソース内などの NavigationViewHeaderMargin XAML テーマ リソースをオーバーライドします。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>

このテーマ リソースによって、NavigationView.Header の周囲の余白が変更されます。This theme resource modifies the margin around NavigationView.Header.