Разработка Windows 10 — Навигация

В приложениях универсальной платформы Windows (UWP) навигация представляет собой гибкую модель структур навигации, элементов навигации и функций системного уровня. Он обеспечивает различные интуитивно понятные пользовательские интерфейсы для перемещения между приложениями, страницами и контентом.

Существуют некоторые ситуации и сценарии, когда весь контент и функциональные возможности легко помещаются на одной странице, и разработчикам не нужно создавать несколько страниц. Однако в большинстве приложений несколько страниц используются для взаимодействия между различным контентом и функциями.

Когда приложение имеет более одной страницы, для разработчиков очень важно обеспечить правильную навигацию.

Модели страниц

Как правило, в приложениях универсальной платформы Windows (UWP) используется одностраничная модель навигации.

Важные особенности —

• Одностраничная модель навигации поддерживает весь контекст вашего приложения, а также дополнительный контент и данные в центральном фрейме.

• Вы можете разделить содержимое вашего приложения на несколько страниц. Однако при переходе с одной страницы на другую ваше приложение загружает страницы в форму главной страницы.

• Ни главная страница вашего приложения не выгружена, ни код и данные не выгружены, это облегчает управление состоянием и обеспечивает более плавную анимацию перехода между страницами.

Одностраничная модель навигации поддерживает весь контекст вашего приложения, а также дополнительный контент и данные в центральном фрейме.

Вы можете разделить содержимое вашего приложения на несколько страниц. Однако при переходе с одной страницы на другую ваше приложение загружает страницы в форму главной страницы.

Ни главная страница вашего приложения не выгружена, ни код и данные не выгружены, это облегчает управление состоянием и обеспечивает более плавную анимацию перехода между страницами.

Многостраничная навигация также используется для навигации между различными страницами или экранами, не беспокоясь о контексте приложения. В многостраничной навигации каждая страница имеет свой собственный набор функций, пользовательский интерфейс и данные и т. Д.

Многостраничная навигация обычно используется на веб-страницах внутри сайта.

Структура навигации

При многостраничной навигации каждая страница имеет свой собственный набор функций, пользовательский интерфейс, данные и т. Д. Например, приложение для обработки фотографий может иметь одну страницу для захвата фотографий, а затем, когда пользователь хочет редактировать фотографию, он переходит на другую страницу. и для поддержки библиотеки изображений у нее есть другая страница.

Структура навигации вашего приложения определяется тем, как организованы эти страницы.

Ниже приведены способы структурирования навигации в вашем приложении.

иерархия

В этом типе структуры навигации,

• Страницы организованы в древовидную структуру.

• Каждая дочерняя страница имеет только одного родителя, но родитель может иметь одну или несколько дочерних страниц.

• Чтобы добраться до дочерней страницы, вы должны путешествовать через родителя.

Страницы организованы в древовидную структуру.

Каждая дочерняя страница имеет только одного родителя, но родитель может иметь одну или несколько дочерних страниц.

Чтобы добраться до дочерней страницы, вы должны путешествовать через родителя.

вглядываться

В этом типе навигации —

• Страницы существуют рядом.
• Вы можете переходить с одной страницы на другую в любом порядке.

В большинстве многостраничных приложений обе структуры используются одновременно. Некоторые страницы организованы как одноранговые, а некоторые организованы в иерархии.

Давайте возьмем пример, который содержит три страницы.

• Создайте пустое приложение UWP с именем UWPNavigation .

• Добавьте еще две пустые страницы, щелкнув правой кнопкой мыши проект в обозревателе решений и в меню выберите « Добавить»> «Новый элемент» , после чего откроется следующее диалоговое окно.

Создайте пустое приложение UWP с именем UWPNavigation .

Добавьте еще две пустые страницы, щелкнув правой кнопкой мыши проект в обозревателе решений и в меню выберите « Добавить»> «Новый элемент» , после чего откроется следующее диалоговое окно.

• Выберите пустую страницу из средней панели и нажмите кнопку Добавить .

• Теперь добавьте еще одну страницу, выполнив приведенные выше шаги.

Выберите пустую страницу из средней панели и нажмите кнопку Добавить .

Теперь добавьте еще одну страницу, выполнив приведенные выше шаги.

В обозревателе решений вы увидите три страницы — 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 # для двух кнопок на главной странице , которые будут перемещаться на две другие страницы.

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 для пустой страницы 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 # для нажатия кнопки на пустой странице 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 для пустой страницы 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 # для события нажатия кнопки на пустой странице 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)); 
      }
		
   } 
}

Когда приведенный выше код скомпилирован и выполнен, вы увидите следующее окно.

Когда вы нажимаете на любую кнопку, вы переходите на соответствующую страницу. Давайте нажмем Перейти на страницу 1, и будет отображена следующая страница.

Если вы нажмете кнопку «Перейти на главную страницу» , она вернется на главную страницу.