개발하는 두더지

[C/C++/C#/UWP] UWP 네비게이션 구현하기 본문

C,C++

[C/C++/C#/UWP] UWP 네비게이션 구현하기

덜지 2016. 10. 25. 14:48

페이지를 이동하면서 파라미터를 전달하고 뒤로가기 버튼을 사용해서 다시 메인 페이지로 돌아오는 방법에 대해서 알아보겠습니다.




< 메인페이지 >



< Next Page 버튼을 클릭 후 출력된 두번째 페이지 .






어떠한 기능이 필요한가?


메인 페이지에서 다음 페이지로 이동하는 기능


파라미터를 관리할 클래스


두번째 페이지에서 파라미터를 전달 받는 기능


두번째 페이지에서 다시 원래 페이지로 돌아가는 기능






전체코드


MainPage.xaml


다음 페이지로 이동할 수 있는 버튼으로만 구성되어 있습니다.

1
2
3
4
    <Grid Background="BurlyWood">
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" Height="100" FontSize="64" Text="MainPage"/>
        <Button Content="Next Page" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,110,0,0" Click="NextPage_Click"/>
    </Grid>
cs



Student.cs


학생정보에는 이름, 학생식별값, 주소로 구성되어 있습니다.

1
2
3
4
5
6
    class Student
    {
        public string Name { get; set; }
        public int ID { get; set; }
        public string Address { get; set; }
    }
cs




Student 클래스 내부에서 'prop' 이라 쓰고 두 번 탭을 누르면 간편하게 Setter, Getter 를 만들 수 있습니다.





MainPage.xaml.cs


학생 객체를 생성하고 초기화 합니다.


활성화 되어있는 현재 창의 프레임을 가져옵니다.


그리고 SecondPage2로 페이지 이동을 하면서 학생 객체를 파라미터로 넘깁니다.


1
2
3
4
5
6
7
8
9
        private void NextPage_Click(object sender, RoutedEventArgs e)
        {
            var student = new Student { Name = "홍길동", ID = 20161025, Address = "서울" };
 
            Frame rootFrame = Window.Current.Content as Frame;
            rootFrame.Navigate(typeof(SecondPage2), student);
 
            //this.Frame.Navigate(typeof(SecondPage2), student);
        }
cs




App.xaml.cs


프레임에 Back 버튼을 표시하고 이벤트를 설정하는 코드입니다.


핵심적인 이벤트가 2가지 있습니다.


1
2
3
4
//
// 요약:
//     탐색 대상 콘텐츠를 찾았고, 아직 완전히 로드되지 않았지만 Content 속성을 통해 콘텐츠를 사용할 수 있으면 발생합니다.
public event NavigatedEventHandler Navigated;
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public sealed class SystemNavigationManager : ISystemNavigationManager, ISystemNavigationManager2
    {
        //
        // 요약:
        //     뒤로 단추가 시스템 UI에 표시되는지 여부를 나타내는 값을 가져오거나 설정합니다.
        //
        // 반환 값:
        //     시스템 UI에서 뒤로 단추를 표시할지 여부를 지정하는 열거형 값 중 하나입니다. 기본값은 Collapsed입니다.
        public AppViewBackButtonVisibility AppViewBackButtonVisibility { get; set; }
 
        //
        // 요약:
        //     뒤로 탐색에 대해 사용자가 시스템 제공 단추, 제스처 또는 음성 명령을 호출할 때 발생합니다.
        public event EventHandler<BackRequestedEventArgs> BackRequested;
 
        //
        // 요약:
        //     현재 창과 연결된 SystemNavigationManager 개체를 반환합니다.
        //
        // 반환 값:
        //     현재 창과 연결된 SystemNavigationManager 개체입니다.
        public static SystemNavigationManager GetForCurrentView();
    }
cs




페이지가 로드되는 시점에 현재 창과 연결된 시스템 네비게이션 매니저의 개체를 가져와서 시스템 UI의 뒤로가기 버튼을 활성화 시키고

뒤로 갈 페이지가 없다면 뒤로가기 버튼을 비활성화 시키는 것이 핵심입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
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.Navigation;
 
namespace PageNavigation2
{
    /// <summary>
    /// 기본 응용 프로그램 클래스를 보완하는 응용 프로그램별 동작을 제공합니다.
    /// </summary>
    sealed partial class App : Application
    {
        /// <summary>
        /// Singleton 응용 프로그램 개체를 초기화합니다. 이것은 실행되는 작성 코드의 첫 번째
        /// 줄이며 따라서 main() 또는 WinMain()과 논리적으로 동일합니다.
        /// </summary>
        public App()
        {
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }
 
        /// <summary>
        /// 최종 사용자가 응용 프로그램을 정상적으로 시작할 때 호출됩니다. 다른 진입점은
        /// 특정 파일을 여는 등 응용 프로그램을 시작할 때
        /// </summary>
        /// <param name="e">시작 요청 및 프로세스에 대한 정보입니다.</param>
        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
#if DEBUG
            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = true;
            }
#endif
            Frame rootFrame = Window.Current.Content as Frame;
 
            // 창에 콘텐츠가 이미 있는 경우 앱 초기화를 반복하지 말고,
            // 창이 활성화되어 있는지 확인하십시오.
            if (rootFrame == null)
            {
                // 탐색 컨텍스트로 사용할 프레임을 만들고 첫 페이지로 이동합니다.
                rootFrame = new Frame();
 
                rootFrame.NavigationFailed += OnNavigationFailed;
 
                // 탐색 대상 콘텐츠를 찾았고, 아직 완전히 로드되지 않았지만 Content 속성을 통해 콘텐츠를 사용할 수 있으면 발생합니다.
                rootFrame.Navigated += OnNavigated;
 
                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: 이전에 일시 중지된 응용 프로그램에서 상태를 로드합니다.
                }
 
                // 현재 창에 프레임 넣기
                Window.Current.Content = rootFrame;
 
                // 뒤로 탐색에 대해 사용자가 시스템 제공 단추, 제스쳐 또는 음성 명령을 호출할 때 발생합니다.
                SystemNavigationManager.GetForCurrentView().BackRequested += OnBackRequested;
                SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
                    rootFrame.CanGoBack ? AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;
            }
 
            if (e.PrelaunchActivated == false)
            {
                if (rootFrame.Content == null)
                {
                    // 탐색 스택이 복원되지 않으면 첫 번째 페이지로 돌아가고
                    // 필요한 정보를 탐색 매개 변수로 전달하여 새 페이지를
                    // 구성합니다.
                    rootFrame.Navigate(typeof(MainPage), e.Arguments);
                }
                // 현재 창이 활성 창인지 확인
                Window.Current.Activate();
            }
        }
 
        private void OnBackRequested(object sender, BackRequestedEventArgs e)
        {
            Frame rootFrame = Window.Current.Content as Frame;
 
            if(rootFrame.CanGoBack)
            {
                // 앱에서 요청한 뒤로 탐색을 수행했는지 여부를 나타내는 값을 가져오거나 설정합니다.
                e.Handled = true;
                rootFrame.GoBack();
            }
 
        }
 
        private void OnNavigated(object sender, NavigationEventArgs e)
        {
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
                ((Frame)sender).CanGoBack ? AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;
        }
 
        /// <summary>
        /// 특정 페이지 탐색에 실패한 경우 호출됨
        /// </summary>
        /// <param name="sender">탐색에 실패한 프레임</param>
        /// <param name="e">탐색 실패에 대한 정보</param>
        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
        }
 
        /// <summary>
        /// 응용 프로그램 실행이 일시 중단된 경우 호출됩니다.  응용 프로그램이 종료될지
        /// 또는 메모리 콘텐츠를 변경하지 않고 다시 시작할지 여부를 결정하지 않은 채
        /// 응용 프로그램 상태가 저장됩니다.
        /// </summary>
        /// <param name="sender">일시 중단 요청의 소스입니다.</param>
        /// <param name="e">일시 중단 요청에 대한 세부 정보입니다.</param>
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            //TODO: 응용 프로그램 상태를 저장하고 백그라운드 작업을 모두 중지합니다.
            deferral.Complete();
        }
    }
}
 
cs



SecondPage2.xaml


넘겨받은 학생 객체의 멤버 변수 값을 출력할 TextBlock 으로 구성되어 있습니다.


1
2
3
4
5
6
    <Grid Background="Beige">
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" Height="100" FontSize="64" Text="SecondPage"/>
        <TextBlock x:Name="tb1" HorizontalAlignment="Left" Margin="10,110,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="50" Width="302" FontSize="20"/>
        <TextBlock x:Name="tb2" HorizontalAlignment="Left" Margin="10,165,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="50" Width="302" FontSize="20"/>
        <TextBlock x:Name="tb3" HorizontalAlignment="Left" Margin="10,220,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="50" Width="302" FontSize="20"/>
    </Grid>
cs



SecondPage2.xaml.cs


프레임의 페이지가 활성 페이지가 될때 호출되는 'OnNavigatedTo' 메서드를 재정의 합니다.


파라미터를 Student 타입으로 형변환을 시켜줍니다. 

var student = e.Parameter as Student; 도 가능


넘겨받은 값을 출력시켜줍니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            var student = (Student)e.Parameter;
 
            if(!string.IsNullOrWhiteSpace(student.Name))
            {
                tb1.Text = "Hello. " + student.Name;
                tb2.Text = "Your Id  : " + student.ID;
                tb3.Text = "Your Address : " + student.Address;
            }
            else
            {
                tb1.Text = "Name is required. Go back and enter a name";
            }
        }
cs











Comments