Desenvolvimento do Windows 10 - Navegação

Em aplicativos da Plataforma Universal do Windows (UWP), a navegação é um modelo flexível de estruturas de navegação, elementos de navegação e recursos de nível de sistema. Ele permite uma variedade de experiências intuitivas do usuário para se mover entre aplicativos, páginas e conteúdo.

Existem algumas situações e cenários em que todo o conteúdo e funcionalidade podem caber facilmente em uma única página e não há necessidade de os desenvolvedores criarem várias páginas. No entanto, na maioria dos aplicativos, várias páginas são usadas para interação entre diferentes conteúdos e funcionalidades.

Quando um aplicativo tem mais de uma página, é muito importante para os desenvolvedores fornecer a experiência de navegação certa.

Modelos de página

Normalmente, em aplicativos da Plataforma Universal do Windows (UWP), o modelo de navegação de página única é usado.

Recursos importantes são -

  • Um modelo de navegação de página única mantém todo o contexto de seu aplicativo e conteúdo e dados adicionais em um quadro central.

  • Você pode dividir o conteúdo do seu aplicativo em várias páginas. No entanto, ao passar de uma página para outra, seu aplicativo carrega as páginas em um formulário de página principal.

  • Nem a página principal do seu aplicativo é descarregada nem o código e os dados são descarregados, isso torna mais fácil gerenciar o estado e fornece animações de transição mais suaves entre as páginas.

A navegação de várias páginas também é usada para navegar entre diferentes páginas ou telas sem se preocupar com o contexto do aplicativo. Na navegação de várias páginas, cada página tem seu próprio conjunto de funções, interface de usuário e dados, etc.

A navegação de várias páginas é normalmente usada em páginas da web dentro do site.

Estrutura de Navegação

Na navegação de várias páginas, cada página tem seu próprio conjunto de funções, interface de usuário e dados etc. Por exemplo, um aplicativo de fotos pode ter uma página para capturar fotos, então, quando o usuário deseja editar a foto, ele navega para outra página e para manter a biblioteca de imagens, possui outra página.

A estrutura de navegação de seu aplicativo é definida pela forma como essas páginas são organizadas.

A seguir estão as maneiras de estruturar a navegação em seu aplicativo -

Hierarquia

Neste tipo de estruturação de navegação,

  • As páginas são organizadas em uma estrutura de árvore.

  • Cada página filha tem apenas um pai, mas um pai pode ter uma ou mais páginas filho.

  • Para chegar a uma página filha, você precisa passar pelo pai.

Par

Neste tipo de navegação -

  • As páginas existem lado a lado.
  • Você pode ir de uma página para outra em qualquer ordem.

Na maioria dos aplicativos de várias páginas, ambas as estruturas são usadas simultaneamente. Algumas das páginas são organizadas como pares e algumas delas são organizadas em hierarquias.

Tomemos um exemplo que contém três páginas.

  • Crie um aplicativo UWP em branco com o nome UWPNavigation.

  • Adicione mais duas páginas em branco clicando com o botão direito do mouse no projeto em Solution Explorer e selecione Add > New Item opção do menu, que irá abrir a seguinte janela de diálogo.

  • Selecione a página em branco no painel do meio e clique no botão Add botão.

  • Agora adicione mais uma página seguindo as etapas fornecidas acima.

Você verá três páginas no Solution Explorer - MainPage, BlankPage1e BlankPage2.

A seguir está o código XAML para MainPage em que dois botões são adicionados.

<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>

A seguir está o código C # para dois botões em MainPage, que irá navegar para as outras duas páginas.

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)); 
      } 
		
   } 
}

O código XAML para blank page 1 é mostrado abaixo.

<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ódigo C # para botão - clique no evento blank page 1, que irá navegar para a página principal é mostrado abaixo.

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)); 
      }
		
   } 
}

A seguir está o código XAML para 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>

A seguir está o código C # para o evento de clique de botão em blank page 2, que irá navegar para a página principal.

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)); 
      }
		
   } 
}

Quando o código acima for compilado e executado, você verá a seguinte janela.

Ao clicar em qualquer botão, ele o levará para a página respectiva. Vamos clicar emGo to Page 1 e a página seguinte será exibida.

Quando você clica no botão 'Go to Main Page', ele irá navegar de volta para a página principal.