탐색 보기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 Controls GalleryXAML 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는 자동으로 설정됩니다. 자동 모드에서 탐색 보기는 창이 좁을 때 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)

FooterMenuItems를 사용하면 창 시작 부분에 항목을 배치하는 MenuItems 속성과 달리 탐색 창 끝에 탐색 항목을 배치할 수 있습니다.You can use FooterMenuItems to place navigation items at the end of the navigation pane, contrasted with the MenuItems property which places items at the start of the pane.

FooterMenuItems는 기본적으로 설정 항목 앞에 표시됩니다.FooterMenuItems will be displayed before the Settings item by default. IsSettingsVisible 속성을 사용하면 설정 항목을 계속 설정/해제할 수 있습니다.The Settings item can still be toggled using the IsSettingsVisible property.

탐색 항목만 FooterMenuItems에 배치되어야 합니다. 창의 바닥글에 맞춰야 하는 다른 모든 콘텐츠는 PaneFooter에 배치해야 합니다.Only Navigation items should be placed in FooterMenuItems - any other content that needs to align to the footer of the pane should be placed in PaneFooter.

NavigationView에 FooterMenuItems를 추가하는 방법에 대한 예는 FooterMenuItems 클래스를 참조하세요.For an example of how to add FooterMenuItems to your NavigationView, see the FooterMenuItems class.

아래 이미지는 바닥글 메뉴에 계정, 카트 및 도움말 탐색 항목이 있는 NavigationView를 보여줍니다.The image below shows a NavigationView with Account, Your Cart, and Help navigation items in the footer menu.

FooterMenuItems가 있는 NavigationView

자유 형식 콘텐츠를 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. 헤더 영역에는 고정 높이 52px이 사용됩니다.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가 최소 디스플레이 모드이면 항상 헤더가 표시됩니다.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가 최소 모드이고 여백이 24px일 경우 콘텐츠 영역에 대해 12px 여백이 적당합니다.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. CompactModeThresholdWidthExpandedModeThresholdWidth 속성은 디스플레이 모드가 변경되는 중단점을 지정합니다.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가 기본값인 자동 으로 설정되면 적응형 동작은 다음을 표시합니다.When PaneDisplayMode is set to its default value of Auto, the adaptive behavior is to show:

  • 큰 창 너비(1008px 이상)의 확장된 왼쪽 창.An expanded left pane on large window widths (1008px or greater).
  • 중간 창 너비(641px-1007px)의 왼쪽, 아이콘 전용, 탐색 창(LeftCompact).A left, icon-only, nav pane (LeftCompact) on medium window widths (641px to 1007px).
  • 작은 창 너비(640px 이하)의 메뉴 단추만(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

두 번째 일반적인 적응형 패턴은 큰 창 너비에서는 확장된 왼쪽 창을 사용하고 중간 및 작은 창 너비에서는 메뉴 단추만 사용하는 것입니다.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

세 번째 일반적인 적응형 패턴은 큰 창 너비에서는 확장된 왼쪽 창을 사용하고 중간 및 작은 창 너비에서는 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를 자동 이외의 값으로 설정합니다. 여기서는 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. 앱 창이 좁은 경우에는 모든 항목이 오버플로 메뉴로 축소되게 하지 않고 위쪽에서 LeftMinimal 탐색으로 PaneDisplayMode를 전환하도록 향상된 사용자 환경을 제공할 수 있습니다.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:

  • 중요성이 같은 최상위 탐색 범주 세트를 함께 표시하려는 경우, 이 세트의 한 범주가 화면에 맞춰지지 않으면 왼쪽 탐색으로 축소하여 같은 중요성을 부여합니다.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.

이 예제에서는 VisualStateManagerAdaptiveTrigger.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는 자동이므로, 창 너비가 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.

모든 탐색 항목은 MenuItems의 일부이든 FooterMenuItems의 일부이든 동일한 선택 모델의 일부입니다.All navigation items are part of the same selection model, whether they are a part of MenuItems or FooterMenuItems. 한 번에 하나의 탐색 항목만 선택할 수 있습니다.Only one navigation item can be selected at a time.

뒤로 탐색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.

최소 또는 컴팩트 모드에서는 탐색 보기 창이 플라이아웃으로 열립니다.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 열거형 값을 사용하며 기본적으로 자동 으로 설정됩니다.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 steps. 자세한 배경, 설정 및 지원 정보는 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.

이 코드에서는 앱에 포함된 이동할 페이지가 이름으로 HomePage, AppsPage, GamesPage, MusicPage, MyContentPageSettingsPage 를 사용한다고 가정합니다.This 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. NavigationView의 WinUI 버전을 사용하여 초기 버전의 Windows 10을 대상으로 하는 경우 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());

    // Listen to the window directly so the app responds
    // to accelerator keys regardless of which element has focus.
    Window.Current.CoreWindow.Dispatcher.AcceleratorKeyActivated +=
        CoreDispatcher_AcceleratorKeyActivated;

    Window.Current.CoreWindow.PointerPressed += CoreWindow_PointerPressed;

    SystemNavigationManager.GetForCurrentView().BackRequested += System_BackRequested;
}

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)
{
    TryGoBack();
}

private void CoreDispatcher_AcceleratorKeyActivated(CoreDispatcher sender, AcceleratorKeyEventArgs e)
{
    // When Alt+Left are pressed navigate back
    if (e.EventType == CoreAcceleratorKeyEventType.SystemKeyDown
        && e.VirtualKey == VirtualKey.Left
        && e.KeyStatus.IsMenuKeyDown == true
        && !e.Handled)
    {
        e.Handled = TryGoBack();
    }
}

private void System_BackRequested(object sender, BackRequestedEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = TryGoBack();
    }
}

private void CoreWindow_PointerPressed(CoreWindow sender, PointerEventArgs e)
{
    // Handle mouse back button.
    if (e.CurrentPoint.Properties.IsXButton1Pressed)
    {
        e.Handled = TryGoBack();
    }
}

private bool TryGoBack();
{
    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 버전의 경우 Blank App(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"
#include <winrt/Windows.UI.Core.h>
#include "winrt/Windows.UI.Input.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 On_Navigated(
            Windows::Foundation::IInspectable const& /* sender */,
            Windows::UI::Xaml::Navigation::NavigationEventArgs const& args);
        void CoreDispatcher_AcceleratorKeyActivated(
            Windows::UI::Core::CoreDispatcher const& /* sender */,
            Windows::UI::Core::AcceleratorKeyEventArgs const& args);
        void CoreWindow_PointerPressed(
            Windows::UI::Core::CoreWindow const& /* sender */,
            Windows::UI::Core::PointerEventArgs const& args);
        void System_BackRequested(
            Windows::Foundation::IInspectable const& /* sender */,
            Windows::UI::Core::BackRequestedEventArgs const& args);
        bool TryGoBack();

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

        // Listen to the window directly so the app responds
        // to accelerator keys regardless of which element has focus.
        winrt::Windows::UI::Xaml::Window::Current().CoreWindow().Dispatcher().
            AcceleratorKeyActivated({ this, &MainPage::CoreDispatcher_AcceleratorKeyActivated });
 
        winrt::Windows::UI::Xaml::Window::Current().CoreWindow().
            PointerPressed({ this, &MainPage::CoreWindow_PointerPressed });
 
        Windows::UI::Core::SystemNavigationManager::GetForCurrentView().
            BackRequested({ this, &MainPage::System_BackRequested });

    }

    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 */)
    {
        TryGoBack();
    }

    void MainPage::CoreDispatcher_AcceleratorKeyActivated(
        Windows::UI::Core::CoreDispatcher const& /* sender */,
        Windows::UI::Core::AcceleratorKeyEventArgs const& args)
    {
        // When Alt+Left are pressed navigate back
        if (args.EventType() == Windows::UI::Core::CoreAcceleratorKeyEventType::SystemKeyDown
            && args.VirtualKey() == Windows::System::VirtualKey::Left
            && args.KeyStatus().IsMenuKeyDown
            && !args.Handled())
        {
            args.Handled(TryGoBack());
        }
    }
 
    void MainPage::CoreWindow_PointerPressed(
        Windows::UI::Core::CoreWindow const& /* sender */,
        Windows::UI::Core::PointerEventArgs const& args)
    {
        // Handle mouse back button.
        if (args.CurrentPoint().Properties().IsXButton1Pressed())
        {
            args.Handled(TryGoBack());
        }
    }
 
    void MainPage::System_BackRequested(
        Windows::Foundation::IInspectable const& /* sender */,
        Windows::UI::Core::BackRequestedEventArgs const& args)
    {
        if (!args.Handled())
        {
            args.Handled(TryGoBack());
        }
    }
 
    bool MainPage::TryGoBack()
    {
        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;
    }  

    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 shown 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. 처리기에서는 해당 값을 unboxing하고 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로 boxing 및 unboxing을 참조하세요.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.

창에서 중첩된 탐색 항목의 계층적 목록을 표시하려면 MenuItems 속성 또는 NavigationViewItemMenuItemsSource 속성을 사용합니다.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. 두 수준이 유용성과 이해력에 이상적입니다.We believe two levels is ideal for usability and comprehension.

NavigationView는 위쪽, 왼쪽 및 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

또한 이 예에서는 ExpandingCollapsed 이벤트를 설명합니다.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. 부모 항목을 선택할 수 있는 경우 왼쪽 확장 또는 위쪽 창 표시 모드를 사용하는 것이 좋습니다.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.

선택 항목을 선택하면 왼쪽 모드의 경우 왼쪽 가장자리를 따라, 위쪽 모드에서는 아래쪽 가장자리를 따라 선택 표시기가 표시됩니다.Selected items will draw their selection indicators along their left edge when in left mode or their bottom edge when in top mode. 아래에는 부모 항목이 선택된 왼쪽 및 위쪽 모드의 NavigationViews가 나와 있습니다.Shown below are NavigationViews in left and top mode where a parent item is selected.

부모가 선택된 왼쪽 모드의 NavigationView

부모가 선택된 위쪽 모드의 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에는 둘 이상의 선택 표시기가 표시되지 않습니다.The entire NavigationView will show no more than one selection indicator.

위쪽과 왼쪽 모드 모두에서 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. 키 동작은 HierarchicalNavigationView의 위쪽 및 왼쪽 컴팩트 모드에서 표시되는 NavigationView 또는 플라이아웃 메뉴를 통해 탐색할 때 변경됩니다.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 왼쪽 모드에서In Left Mode 위쪽 모드에서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.
스페이스바/Enter 키Space/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.

스페이스바 또는 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의 헤더 영역 위치를 추가로 조정하려면 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.