uwp 네비게이션뷰 화면변경 하기 / NavigationView Control

홈페이지도 그렇지만 모든 프로그램을 만들 때 메뉴와 화면이 필요합니다. uwp 네비게이션뷰 화면변경 하기 / NavigationView Control 은 그러한 작업을 하기 위한 기능을 가지고 있습니다. 메뉴화면을 구성하는 방법은 아래의 내용을 참고하시면 됩니다.

2021/02/05 - [CodinG.DEV/uwp] - uwp 네비게이션뷰 컨트롤 사용하기 / NavigationView Control

 

메뉴를 추가하고 그것에 해당하는 화면을 보여주기 위해서는 ItemInvoked 또는 SelectionChanged 를 사용하면 됩니다.
여기서는 메뉴를 4개 추가하고, 해당하는 화면 4가지를 보여주도록 하겠습니다.

화면구성

테스트를 위해 화면에는 웹화면을 보여줄 수 있는 WebView 컨트롤를 이용하여 네이버, 다음, 구글을 보여주도록 합니다.
먼저 메뉴를 만들고 이벤트를 연결합니다.
중요한 부분은 NavigationView 를 추가하여 메뉴의 위치와 이벤트롤 설정합니다.
NavigationView.MenuItem 내부에는 NavigationViewItem 으로 메뉴들을 설정합니다.
메뉴부분을 제외한 나머지 화면영역은 컨텐츠영역으로서 ScrollViewer 자리잡게 됩니다. 메뉴를 클릭한 후 변경되는 화면들은 이곳이 붙여집니다.

<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 Name="NavView"
                        PaneTitle="제목"
                        ItemInvoked="NavView_ItemInvoked">
            
            <NavigationView.MenuItems>
                <NavigationViewItemSeparator/>
                <NavigationViewItemHeader x:Name="PagesHeader1"
                                           Content="포털사이트"/>
                <NavigationViewItem Tag="NAVER" 
                                    Icon="Home" 
                                    Content="네이버"/>
                <NavigationViewItem Tag="DAUM" 
                                    Icon="Home" 
                                    Content="다음"/>
                <NavigationViewItem Tag="GOOGLE" 
                                    Icon="Home" 
                                    Content="구글"/>
            </NavigationView.MenuItems>

            <ScrollViewer>
                <Frame Name="ContentFrame" 
                       Padding="12,0,12,24" 
                       IsTabStop="True"/>
            </ScrollViewer>

        </NavigationView>

    </Grid>
</Page>

화면을 준비합니다.
NavigationViewItem 의 Tag를 이용합니다. Tag 가 NAVER 라면 네이버 화면을 연결하고, Tag가 DAUM, GOOGLE 를 클릭하면 그것에 맞는 화면을 연결합니다. 메뉴를 클릭했을 때 발생하는 이벤트는 ItemInvoked 입니다.
아래와 같은 형식으로 네이버, 다음, 구글 화면 xaml 파일을 만들어 줍니다.
- 네이버를 보여줄 화면 : pageNAVER.xaml
- 다음을 보여줄 화면 : pageDAUM.xaml
- 구글을 보여줄 화면 : pageGOOGLE.xaml

<Grid>
	<WebView Name="pgDaum" Source="https://www.daum.net" />
</Grid>

코드를 추가합니다.

코드에는 필수적은 하나의 List와 2개의 메서드가 존재합니다.
- _pages : 만들어진 화면을 List 목록으로 만들어 사용을 합니다.
- NavView_ItemInvoked() : 네이게이션뷰의 메뉴를 클릭했을 때 호출하고 Tag 에 설정된 값을 가져옵니다.

- NavView_Navigate() : ItemInvoked 메서드에서 호출되며, Tag 에 설정된 값과 _pages List 에 설정된 값을 비교한 후 ScrollViewer 에 붙이는 역할을 합니다.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.System;
using Windows.UI.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

// 빈 페이지 항목 템플릿에 대한 설명은 https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x412에 나와 있습니다.

namespace App1
{
    /// <summary>
    /// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        // 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)>
        {
            ("NAVER", typeof(PageNAVER)),
            ("DAUM", typeof(PageDAUM)),
            ("GOOGLE", typeof(PageGOOGLE))
        };

        private void NavView_ItemInvoked(NavigationView sender,
                                         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);
            }
        }

        private void NavView_Navigate(string navItemTag, NavigationTransitionInfo transitionInfo)
        {
            Type _page = null;
            if (navItemTag == "settings")
            {
                _page = typeof(PageCONTENT);
            }
            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);
            }
        }
    }
}

결과화면

위의 코드에 대한 결과화면입니다.
각각메뉴를 클릭하면 WebView에 설정된 포털사이트가 표시되도록 하였습니다.

참고문헌

탐색 보기 - UWP applications