ナビゲーション ビュー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

プラットフォーム 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 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.

TopTop

ウィンドウはコンテンツの上に配置されます。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.

LeftLeft

ウィンドウはコンテンツの左側に展開および配置されます。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"

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

AutoAuto

既定では、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.

DefaultDefault

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

この例では、ウィンドウ サイズが大きい場合の上部のナビゲーション ウィンドウとウィンドウ サイズが小さい場合の左側のナビゲーション ウィンドウの両方で 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:.

<!-- 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 NavView.CompactModeThresholdWidth}"/>
                </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>

重要

このコードでは、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 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 EntranceNavigationTransitionInfo());

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

    // ALT routes here
    var altLeft = new KeyboardAccelerator
    {
        Key = VirtualKey.Left,
        Modifiers = 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, 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# コード例の NavView_ItemInvoked ハンドラーの C++/WinRT バージョンです。Below is a C++/WinRT version of the NavView_ItemInvoked handler from the C# code example above. C++/WinRT ハンドラーの手法では、移動先のページの完全な型名を (NavigationViewItem のタグに) 最初に格納する必要があります。The technique in the C++/WinRT 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. C# の例に示した _pages という名前のマッピング変数は必要ありません。また、ご利用のタグ内の値が有効な型であることを確認するための単体テストを作成することができます。There's no need for the mapping variable named _pages that you see in the C# example; 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);
    }
}

ウィンドウの背景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
LeftLeft NavigationViewExpandedPaneBackgroundNavigationViewExpandedPaneBackground
LeftCompactLeftCompact
LeftMinimalLeftMinimal
NavigationViewDefaultPaneBackgroundNavigationViewDefaultPaneBackground
TopTop 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

一部のアプリでは、そのウィンドウのタイトル バーをカスタマイズするように選択できるため、そのアプリのコンテンツがタイトル バー領域に拡張される可能性があります。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. アプリのタイトル バーへの拡張An app extending into the title bar

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

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

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