Navegar entre páginas

Esta parte do tutorial adiciona a peça final ao aplicativo, a navegação entre a página de todas as anotações e a página de notas individuais.

Antes de escrever qualquer código para lidar com a navegação no aplicativo, vamos descrever o comportamento de navegação esperado.

No AllNotesPage, há a coleção de notas existentes e um botão Nova nota .

• Clicar numa nota existente deve redirecionar para a página da nota e carregar a nota clicada.
• Clicar no botão Nova nota deve ir para a página da nota e carregar uma nota vazia e não guardada.

Na página de notas, você adicionará um botão Voltar e haverá botões Salvar e Excluir .

• Clicar no botão Voltar deve navegar de volta para a página de todas as notas, descartando quaisquer alterações feitas na nota.
• Clicar no botão Excluir deve excluir a nota e, em seguida, navegar de volta.

Nova nota

Primeiro, irás lidar com a navegação para uma nova nota.

1. Em AllNotesPage.xaml, localize o AppBarButton para uma nova nota.

2. Adicione um manipulador de Click eventos e renomeie-o para NewNoteButton_Click. (Veja Adicionar gestores de eventos no passo da página de notas se precisar de um lembrete de como to do isto.)

   <AppBarButton Icon="Add" Label="New note"
                 Click="NewNoteButton_Click"/>
   

3. No método NewNoteButton_Click (em AllNotesPage.xaml.cs), adicione o seguinte código:

   private void NewNoteButton_Click(object sender, RoutedEventArgs e)
   {
       // ↓ Add this. ↓
       Frame.Navigate(typeof(NotePage));
   }
   

Cada Page tem uma propriedade Frame que fornece uma referência à ocorrência de Frame à qual pertence Page (se houver). Isso é o Frame que você chama de método Navigate aqui. O Navigate método usa o Tipo da página para a qual você deseja navegar. Você obtém isso Type em C# usando o operador typeof.

Se você executar o aplicativo agora, poderá clicar no botão Nova nota para navegar até a página de anotações e digitar no editor de notas. No entanto, se você tentar salvar a nota, nada acontecerá. Isso ocorre porque uma instância do Note modelo ainda não foi criada na página de anotações. Você vai fazer isso agora.

1. Abra NotePage.xaml.cs.

2. Adicione código para substituir o método OnNavigatedTo da página.

   public NotePage()
   {
       this.InitializeComponent();
   }
   //  ↓ Add this. ↓
   protected override void OnNavigatedTo(NavigationEventArgs e)
   {
       base.OnNavigatedTo(e);
   
       noteModel = new Note();
   }
   

Agora, quando você navega para NotePage, uma nova instância do Note modelo é criada.

Notas existentes

Agora você adicionará navegação para anotações existentes. Atualmente, quando você clica na nota no ItemsView, a nota é selecionada, mas nada acontece. O comportamento padrão para a maioria dos controles de coleção é a seleção única, o que significa que um item é selecionado de cada vez. Você atualizará o ItemsView para que, em vez de selecioná-lo, você possa clicar em um item como um botão.

1. Abra AllNotesPage.xaml.

2. Atualize o XAML para ItemsView definindo SelectionMode = como None e IsItemInvokedEnabled = .

3. Adicione um manipulador para o evento ItemInvoked .

   <ItemsView ItemsSource="{x:Bind notesModel.Notes}"
              Grid.Row="1" Margin="24" 
              ItemTemplate="{StaticResource NoteItemTemplate}"
              <!-- ↓ Add this. ↓ -->
              SelectionMode="None"
              IsItemInvokedEnabled="True"
              ItemInvoked="ItemsView_ItemInvoked">
   

4. Em AllNotesPage.xaml.cs, encontre o ItemsView_ItemInvoked método. (Se o Visual Studio não o criou para si, o que pode acontecer se copiar e colar o código, adicione-o no passo seguinte.)

5. No método, adicione código ItemsView_ItemInvoked para navegar até NotePage. Desta vez, você usará uma sobrecarga do método Navigate que permite passar um objeto para a outra página. Passe o invocado Note como o segundo parâmetro de navegação.

   private void ItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs args)
   {
       Frame.Navigate(typeof(NotePage), args.InvokedItem);
   }
   

6. Abra NotePage.xaml.cs.

7. Atualize a substituição do método OnNavigatedTo para lidar com o Note que é passado pela chamada de Navigate.

   protected override void OnNavigatedTo(NavigationEventArgs e)
   {
       base.OnNavigatedTo(e);
   
       //  ↓ Update this. ↓
       if (e.Parameter is Note note)
       {
           noteModel = note;
       }
       else
       {
           noteModel = new Note();
       }
      // ↑ Update this. ↑
   }
   

   Neste código, você primeiro verifica se o parâmetro passado é um Note objeto. Se for, defina-o como modelo Note para a página. Se for null ou não um Note, crie um novo Note como antes.

Navegação traseira

Por fim, você precisa atualizar o aplicativo para que você possa navegar de volta de uma nota individual para a página de todas as notas.

O controlo WinUI 3 TitleBar inclui um botão de voltar que cumpre todas as diretrizes do Fluent Design para posicionamento e aparência. Você usará este botão integrado para navegação de volta.

1. Abra MainWindow.xaml.

2. Atualize o XAML para o TitleBar com IsBackButtonVisible = True e IsBackButtonEnabled associados à propriedade Frame.CanGoBack.

3. Adicione um manipulador para o evento BackRequested . Seu XAML deve ter esta aparência:

   <TitleBar x:Name="AppTitleBar"
             Title="WinUI Notes"
             IsBackButtonVisible="True"
             IsBackButtonEnabled="{x:Bind rootFrame.CanGoBack, Mode=OneWay}"
             BackRequested="AppTitleBar_BackRequested">
   

   Aqui, a propriedade IsBackButtonVisible é definida como true. Isso faz com que o botão Voltar apareça no canto superior esquerdo da janela do aplicativo.

   Em seguida, a propriedade IsBackButtonEnabled está vinculada à propriedade Frame.CanGoBack , portanto, o botão Voltar é habilitado somente se o quadro puder navegar de volta.

   Finalmente, o manipulador de eventos BackRequested é adicionado. É aqui que você coloca o código para navegar de volta.

4. No MainWindow.xaml.cs, adicione este código ao AppTitleBar_BackRequested método:

   private void AppTitleBar_BackRequested(TitleBar sender, object args)
   {
       // ↓ Add this. ↓
       if (rootFrame.CanGoBack == true)
       {
           rootFrame.GoBack();
       }
       // ↑ Add this. ↑
   }
   

   A Frame classe mantém o controle da navegação em seu BackStack, para que você possa navegar de volta para páginas anteriores simplesmente chamando o método GoBack . É uma prática recomendada verificar sempre a propriedade CanGoBack antes de chamar GoBack.

Em seguida, é necessário atualizar o código em NotePage para navegar de volta depois de a nota ser eliminada.

1. Abra NotePage.xaml.cs.

2. Atualize o método DeleteButton_Click do manipulador de eventos com uma chamada para o método Frame.CanGoBack após a nota ser eliminada.

   private async void DeleteButton_Click(object sender, RoutedEventArgs e)
   {
       if (noteModel is not null)
       {
           await noteModel.DeleteAsync();
       }
       // ↓ Add this. ↓
       if (Frame.CanGoBack == true)
       {
           Frame.GoBack();
       }
       // ↑ Add this. ↑
   }
   

Agora você pode executar seu aplicativo. Tente adicionar novas notas, navegar entre notas e eliminar notas.

Saiba mais nos documentos:

• Implementar navegação entre duas páginas
• Histórico de navegação e navegação para retroceder
• Classe Frame, classe Page

Próximos passos

Parabéns! Você concluiu o tutorial Criar um aplicativo WinUI !

Os seguintes links fornecem mais informações sobre como criar aplicações com o WinUI e o Windows App SDK:

• Exemplos e recursos
• Design para aplicativos do Windows
• Desenvolver aplicativos da área de trabalho do Windows
• Controles para aplicativos do Windows