Compartilhar via

Navegar entre páginas

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

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

Em AllNotesPage, há a coleção de anotações existentes e um botão Nova anotação .

  • Clicar em uma nota existente deve navegar até a página de anotação e carregar a nota que foi clicada.
  • Clicar no botão Nova anotação deve navegar até a página de anotação 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 todas as anotações, descartando as alterações feitas na anotação.
  • Clicar no botão Excluir deve excluir a anotação e, em seguida, navegar de volta.

Nova anotação

Primeiro, você lidará com a navegação para obter uma nova nota.

Dica

Você pode baixar ou exibir o código deste tutorial no repositório do GitHub. Para ver o código como ele está nesta etapa, confira esta confirmação: navegação – nova observação.

  1. Em AllNotesPage.xaml, localize a AppBarButton nova nota.

  2. Adicione um Click manipulador de eventos e renomeie-o para NewNoteButton_Click. (Consulte Adicionar manipuladores de eventos na etapa de página de anotação se você 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 página tem uma propriedade Frame que fornece uma referência à instância de Quadro à qual pertence Page (se houver). Esse é o Frame que você chama o 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 anotação para navegar até a página de notas 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ção. 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 até NotePage, uma nova instância do Note modelo é criada.

Notas existentes

Agora você adicionará navegação para anotações existentes. No momento, quando você clica na nota na ItemsViewnota, a anotação é 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 por vez. Você atualizará para ItemsView que, em vez de selecioná-lo, clique em um item como um botão.

Dica

Você pode baixar ou exibir o código deste tutorial no repositório do GitHub. Para ver o código como ele está nesta etapa, confira esta confirmação: navegação – aplicativo final.

  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, localize 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. ItemsView_ItemInvoked No método, adicione código 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 OnNavigatedTo substituição do método para lidar com 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. ↑
}

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

Navegação de volta

Por fim, você precisa atualizar o aplicativo para poder navegar de volta de uma anotação individual para a página de todas as anotações.

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á esse botão interno para navegação inativa.

  1. Abra MainWindow.xaml.

  2. Atualize o XAML para com TitleBarIsBackButtonVisible = 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 está 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á associada à propriedade Frame.CanGoBack , portanto, o botão voltar só será habilitado se o quadro puder navegar de volta.

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

  4. Em 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 de 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 chamar GoBack.

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

  1. Abra NotePage.xaml.cs.

  2. Atualize o método do DeleteButton_Click manipulador de eventos com uma chamada para o Frame.CanGoBack método depois que a anotação 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. ↑
}

Dica

Você deve ter notado que em NotePage, você chama Frame.GoBack, enquanto você MainWindow chamou rootFrame.GoBack. Isso ocorre porque a classe Page tem uma propriedade Frame que obtém a Frame que está hospedando o Page, se houver. Nesse caso, ele obtém uma referência a rootFrame.

Agora você pode executar seu aplicativo. Tente adicionar novas anotações, navegar entre anotações e excluir anotações.

Saiba mais nos documentos:

Próximas etapas

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

Os links a seguir fornecem mais informações sobre como criar aplicativos com o WinUI e o SDK do Aplicativo do Windows:

  • Last updated on