Windows 10 개발-탐색

UWP (유니버설 Windows 플랫폼) 애플리케이션에서 탐색은 탐색 구조, 탐색 요소 및 시스템 수준 기능의 유연한 모델입니다. 앱, 페이지 및 콘텐츠간에 이동하기위한 다양하고 직관적 인 사용자 경험을 가능하게합니다.

모든 콘텐츠와 기능이 단일 페이지에 쉽게 들어갈 수 있고 개발자가 여러 페이지를 만들 필요가없는 상황과 시나리오가 있습니다. 그러나 대부분의 응용 프로그램에서는 서로 다른 콘텐츠와 기능 간의 상호 작용에 여러 페이지가 사용됩니다.

앱에 두 개 이상의 페이지가있는 경우 개발자가 올바른 탐색 환경을 제공하는 것이 매우 중요합니다.

페이지 모델

일반적으로 UWP (유니버설 Windows 플랫폼) 애플리케이션에서는 단일 페이지 탐색 모델이 사용됩니다.

중요한 기능은-

단일 페이지 탐색 모델은 애플리케이션의 모든 컨텍스트와 추가 컨텐츠 및 데이터를 중앙 프레임에 유지합니다.
애플리케이션의 콘텐츠를 여러 페이지로 나눌 수 있습니다. 그러나 한 페이지에서 다른 페이지로 이동할 때 애플리케이션은 페이지를 기본 페이지 양식으로로드합니다.
애플리케이션의 메인 페이지가 언로드되거나 코드 및 데이터가 언로드되지 않으므로 상태를보다 쉽게 관리 할 수 있으며 페이지간에 더 부드러운 전환 애니메이션을 제공 할 수 있습니다.

다중 페이지 탐색은 애플리케이션 컨텍스트에 대한 걱정없이 다른 페이지 또는 화면 사이를 탐색하는데도 사용됩니다. 다중 페이지 탐색에서 각 페이지에는 고유 한 기능 세트, 사용자 인터페이스 및 데이터 등이 있습니다.

다중 페이지 탐색은 일반적으로 웹 사이트 내의 웹 페이지에서 사용됩니다.

탐색 구조

다중 페이지 탐색에서 각 페이지에는 고유 한 기능 세트, 사용자 인터페이스 및 데이터 등이 있습니다. 예를 들어 사진 응용 프로그램에는 사진을 캡처하기위한 한 페이지가있을 수 있으며 사용자가 사진을 편집하려는 경우 다른 페이지로 이동합니다. 이미지 라이브러리를 유지하기 위해 다른 페이지가 있습니다.

애플리케이션의 탐색 구조는 이러한 페이지가 구성되는 방식에 의해 정의됩니다.

다음은 애플리케이션에서 탐색을 구성하는 방법입니다.

계층

이러한 유형의 탐색 구조에서

페이지는 구조와 같은 트리로 구성됩니다.
각 하위 페이지에는 하나의 상위 페이지 만 있지만 상위에는 하나 이상의 하위 페이지가있을 수 있습니다.
자식 페이지에 도달하려면 부모를 통해 이동해야합니다.

동료

이 유형의 탐색에서-

페이지는 나란히 존재합니다.
순서에 상관없이 한 페이지에서 다른 페이지로 이동할 수 있습니다.

대부분의 다중 페이지 응용 프로그램에서 두 구조가 동시에 사용됩니다. 일부 페이지는 피어로 구성되고 일부는 계층 구조로 구성됩니다.

세 페이지가 포함 된 예를 들어 보겠습니다.

이름이있는 빈 UWP 애플리케이션 만들기 UWPNavigation.
프로젝트를 마우스 오른쪽 버튼으로 클릭하여 빈 페이지를 두 개 더 추가하십시오. Solution Explorer 그리고 선택 Add > New Item 메뉴에서 옵션을 선택하면 다음 대화 창이 열립니다.

가운데 창에서 빈 페이지를 선택하고 Add 단추.
이제 위에 주어진 단계에 따라 페이지를 하나 더 추가하십시오.

솔루션 탐색기에서 세 페이지를 볼 수 있습니다. MainPage, BlankPage1, 및 BlankPage2.

다음은 XAML 코드입니다. MainPage 두 개의 버튼이 추가됩니다.

<Page 
   x:Class = "UWPNavigation.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">  
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <Hub Header = "Hi, this Main Page"/> 
      <Button Content = "Go to Page 1" Margin = "64,131,0,477" Click = "Button_Click"/>
      <Button Content = "Go to Page 2" Margin = "64,210,0,398" Click = "Button_Click_1"/> 
   </Grid> 
	
</Page>

아래에 두 개의 버튼에 대한 C # 코드가 있습니다. MainPage, 다른 두 페이지로 이동합니다.

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls;
  
// The Blank Page item template is documented at 
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  

namespace UWPNavigation {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
      }  
		
      private void Button_Click(object sender, RoutedEventArgs e){ 
         this.Frame.Navigate(typeof(BlankPage1)); 
      } 
		
      private void Button_Click_1(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(BlankPage2)); 
      } 
		
   } 
}

에 대한 XAML 코드 blank page 1 아래에 나와 있습니다.

<Page 
   x:Class = "UWPNavigation.BlankPage1" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <Hub Header = "Hi, this is page 1"/> 
      <Button Content = "Go to Main Page" Margin = "64,94,0,514" Click = "Button_Click"/> 
   </Grid> 
	
</Page>

버튼에 대한 C # 코드-클릭 이벤트 blank page 1메인 페이지로 이동하는은 아래와 같습니다.

using System; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
 
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=234238 
	
namespace UWPNavigation {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class BlankPage1 : Page {
    
      public BlankPage1() {
         this.InitializeComponent(); 
      }
		
      private void Button_Click(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(MainPage)); 
      }
		
   } 
}

다음은 XAML 코드입니다. blank page 2.

<Page 
   x:Class = "UWPNavigation.BlankPage2" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <Hub Header = "Hi, this is page 2"/>
      <Button Content = "Go to Main Page" Margin = "64,94,0,514" Click = "Button_Click"/> 
   </Grid> 
	
</Page>

아래에 버튼 클릭 이벤트에 대한 C # 코드가 있습니다. blank page 2, 메인 페이지로 이동합니다.

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
 
// The Blank Page item template is documented at  
   http://go.microsoft.com/fwlink/?LinkId=234238
	
namespace UWPNavigation {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary>
	
   public sealed partial class BlankPage2 : Page {
   
      public BlankPage2(){ 
         this.InitializeComponent(); 
      } 
		
      private void Button_Click(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(MainPage)); 
      }
		
   } 
}

위의 코드를 컴파일하고 실행하면 다음과 같은 창이 나타납니다.

아무 버튼이나 클릭하면 해당 페이지로 이동합니다. 클릭하자Go to Page 1 다음 페이지가 표시됩니다.

버튼을 클릭하면 'Go to Main Page', 기본 페이지로 돌아갑니다.