uwp 네비게이션뷰 컨트롤 사용하기 / NavigationView Control

앱을 만들다 보면 메뉴가 필요하고 그에 부합하는 화면이 필요합니다.
uwp 네비게이션뷰 컨트롤 / NavigationView Control 은 앱의 최상위단의 메뉴를 만들어 주고 해당메뉴로 용도에 맞는 화면을 보여주도록 하고 있습니다.

NavigationView 컨트롤은 위치를 변경할 수 있으며 그에 맞는 형태로 자동으로 배치를 시켜주는 역활을 합니다.

NavigationView 를 배치하는 방법은 5가지로 되어 있으며, 기본값은 PaneDisplayMode="Left" 입니다.
화면을 축소하거나 늘려질 때를 대비하면 PaneDisplayMode="Auto" 하는 것이 괜찮겠다는 생각입니다.

사용법은 위의 소스와 같습니다.

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
    
        <!-- 최상단 메뉴를 화면 상단에 배치 
        <NavigationView PaneDisplayMode="Top" />
        -->
        <!-- 최상단 메뉴를 화면 좌측에 배치 
        <NavigationView PaneDisplayMode="Left" />
        -->
        <!-- 최상단 메뉴를 화면 좌측에 아이콘 배치 
        <NavigationView PaneDisplayMode="LeftCompact" />
        -->
        <!-- 최상단 메뉴를 화면 좌측에 최소화 배치-->
        <NavigationView PaneDisplayMode="LeftMinimal" />
        -->
        <!-- 최상단 메뉴를 화면 좌측에 반응형 배치-->
        <NavigationView PaneDisplayMode="Auto" />


    </Grid>
</Page>

 

메뉴를 넣기 위해 NavigationViewItem 을 사용합니다. 만들어질 화면이 4종류이고 그에 맞는 메뉴를 구성하고자 한다면 NavigationViewItem 를 추가하여 탐색메뉴를 만들 수 있습니다.

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>

        <NavigationView PaneDisplayMode="Auto"
                        PaneTitle="제목">
            
            <NavigationView.MenuItems>
                <NavigationViewItem Tag="Home" 
                                    Icon="Home" 
                                    Content="홈"/>
                <NavigationViewItem Tag="Clock" 
                                    Icon="Clock" 
                                    Content="시계"/>
                <NavigationViewItem Tag="Emoji" 
                                    Icon="Emoji"
                                    Content="이모지"/>
                <NavigationViewItem Tag="Keyboard" 
                                    Icon="Keyboard"
                                    Content="키보드"/>
            </NavigationView.MenuItems>
            
        </NavigationView>

    </Grid>
</Page>

메뉴를 그룹화하여 표시하고 그룹제목을 설정하기 위해서는 NavigationViewItemSeparator, NavigationViewItemHeader 을 사용합니다. NavigationViewItemSeparator은 구분선을 표시하여 그룹의 경계를 표시하고 NavigationViewItemHeader을 지정함으로써 그룹의 제목을 표시할 수 있습니다.

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>

        <NavigationView PaneTitle="제목">
            
            <NavigationView.MenuItems>
                <NavigationViewItemSeparator/>
                <NavigationViewItemHeader x:Name="PagesHeader1"
                                           Content="홈.설정"/>
                <NavigationViewItem Tag="Home" 
                                    Icon="Home" 
                                    Content="홈"/>
                <NavigationViewItem Tag="Home" 
                                    Icon="Home" 
                                    Content="설정"/>
                <NavigationViewItemSeparator/>
                <NavigationViewItemHeader x:Name="PagesHeader2"
                                           Content="시계.설정"/>
                <NavigationViewItem Tag="Clock" 
                                    Icon="Clock" 
                                    Content="시계"/>
                <NavigationViewItem Tag="Clock" 
                                    Icon="Clock" 
                                    Content="설정"/>
                <NavigationViewItemSeparator/>
                <NavigationViewItemHeader x:Name="PagesHeader3"
                                           Content="이모지.설정"/>
                <NavigationViewItem Tag="Emoji" 
                                    Icon="Emoji"
                                    Content="이모지"/>
                <NavigationViewItem Tag="Emoji" 
                                    Icon="Emoji"
                                    Content="설정"/>
                <NavigationViewItemSeparator/>
                <NavigationViewItemHeader x:Name="PagesHeader4"
                                           Content="키보드.설정"/>
                <NavigationViewItem Tag="Keyboard" 
                                    Icon="Keyboard"
                                    Content="키보드"/>
                <NavigationViewItem Tag="Keyboard" 
                                    Icon="Keyboard"
                                    Content="설정"/>
            </NavigationView.MenuItems>
            
        </NavigationView>

    </Grid>
</Page>

위의 코드에 대한 캡쳐화면은 아래와 같습니다.

uwp 는 다른 윈도우프로그래밍과는 다르게 뭔가 좀 어색함 느낌이 있습니다.
처음이라 그런가. 뭔가 색다른면도 있지만, 플랫폼화에 대한 마이크로소프트의 계획이 어디까지인지 살펴볼 필요가 있어 보입니다.