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 em uma nota existente deve navegar até a página da nota e carregar a nota que foi clicada.
• Clicar no botão Nova nota deve navegar até a página da nota e carregar uma nota vazia e não salva.

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, você 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. (Consulte Adicionar manipuladores de eventos na etapa da página de anotações se precisar de um lembrete de como fazer isso.)

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

3. NewNoteButton_Click No método (em AllNotesPage.xaml.cs), adicione este 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 typeof operador.

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 o ItemsView com SelectionMode = None e IsItemInvokedEnabled = True.

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 você, o que pode acontecer se você copiar e colar o código, adicione-o na próxima etapa.)

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 de OnNavigatedTo método para manipular o Note que é passado pela chamada para 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, atribua-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 controle WinUI TitleBar inclui um botão Voltar que atende a 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 vinculados à 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 sempre verificar a propriedade CanGoBack antes de ligar GoBackpara .

Em seguida, você precisa atualizar o código para NotePage navegar de volta depois que a nota for excluída.

1. Abra NotePage.xaml.cs.

2. Atualize o DeleteButton_Click método manipulador de eventos com uma chamada para o método depois que Frame.CanGoBack a nota for excluída:

   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 links a seguir fornecem mais informações sobre como criar aplicativos com WinUI e o SDK de Aplicativo do Windows:

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