Passe a nota como parâmetro de navegação

Agora que o Note tem um State, atualiza a navegação para o passar de volta para AllNotesPage, onde podes tratá-lo conforme apropriado com base no seu State. Isto também lhe dá a oportunidade de melhorar a experiência do utilizador relacionada com a navegação.

Atualmente, toda a navegação de regresso de NotePage para AllNotesPage é feita através de uma simples chamada a Frame.GoBack. No entanto, o GoBack método não permite passar um parâmetro de navegação. Para passar a Note como parâmetro, terá de substituir a navegação para trás por uma navegação para a frente (Frame.Navigate). GoBack Além disso, não adiciona uma entrada à pilha de navegação como uma navegação para a frente, por isso terás de gerir a pilha para trás para evitar que esta navegação para a frente seja adicionada.

OnNavigatingFrom

Em NotePage.cs, substitua o método OnNavigatingFrom . Isto é executado depois de o utilizador pressionar o botão de voltar e GoBack ser chamado. Permite intercetar a navegação, verificar a nota Statee cancelar a navegação se necessário.

Aqui, se a nota não for guardada, cancela a navegação de trás e mostra um diálogo que pergunta se o utilizador quer guardar a nota.

• Se o utilizador guardar a nota, chame SaveAsync, depois substitua a navegação de trás por uma chamada para Navigate que passe a nota para AllNotesPage.
• Se o utilizador não guardar as alterações, use TextBox.Undo para desfazer quaisquer edições, redefinir o estado da nota e reiniciar a navegação para trás.

// ↓ Add this. ↓
protected async override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (noteModel?.State == NoteState.Unsaved)
    {
        e.Cancel = true;
        ContentDialog dialog = new ContentDialog();

        // XamlRoot must be set for the ContentDialog.
        dialog.XamlRoot = this.XamlRoot;
        dialog.Title = "Save your work?";
        dialog.PrimaryButtonText = "Save";
        dialog.SecondaryButtonText = "Don't Save";
        dialog.CloseButtonText = "Cancel";
        dialog.DefaultButton = ContentDialogButton.Primary;

        ContentDialogResult result = await dialog.ShowAsync();

        if (result == ContentDialogResult.Primary)
        {
            await noteModel.SaveAsync();
            Frame.Navigate(typeof(AllNotesPage), noteModel);
        }
        else if (result == ContentDialogResult.Secondary)
        {
            while (NoteEditor.CanUndo)
            {
                NoteEditor.Undo();
            }
            NoteEditor.Focus(FocusState.Programmatic);
            noteModel.State = NoteState.Saved;
            Frame.Navigate(typeof(AllNotesPage), noteModel);
        }
    }
}

Delete

De seguida, modifique o código do evento do botão Click delete em NotePage.xaml.cs. Em vez de simplesmente apagar a nota e voltar a navegar, vais verificar o estado da nota.

• Se o estado for Unset – o que significa que a nota foi criada recentemente, não tem quaisquer edições e não foi guardada – basta navegar para trás. Não precisas de passar a nota como parâmetro.
• Caso contrário, apague o ficheiro note do sistema de ficheiros e passe o Note objeto de volta como parâmetro de navegação. Depois, AllNotesPage receberá o Note com o seu estado Deleted e saberá apagá-lo da coleção Notes.

private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteModel is not null)
    {
        if (noteModel.State == NoteState.Unset)
        {
            // If the note is new, doesn't have any edits,
            // and hasn't been saved, just call GoBack.
            // There's no need to pass back the noteModel.
            if (Frame.CanGoBack == true)
            {
                Frame.GoBack();
            }
        }
        else
        {
            // If the note has been saved before, then delete it
            // and navigate back to the AllNotesPage passing the
            // noteModel with its Deleted state.
            await noteModel.DeleteAsync();
            Frame.Navigate(typeof(AllNotesPage), noteModel);
        }
    }
}

Guardar e fechar

Atualmente, o utilizador tem de clicar para guardar uma nota e depois clicar na seta para trás para fechar a página da nota e voltar à coleção de notas. Esta experiência pode ser melhorada permitindo ao utilizador guardar e fechar a nota com um clique. Para isso, vais substituir o botão "Guardar" por um SplitButton "Guardar e fechar", com uma opção de lista pendente para apenas guardar.

<!-- ↓ Delete this. ↓ -->
<!--<Button Content="Save" Click="SaveButton_Click"/>-->

<!-- ↓ Add this. ↓ -->
<SplitButton Content="Save &amp; close" Click="SaveCloseButton_Click"
             Height="32">
    <SplitButton.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Save" Click="SaveButton_Click"/>
        </MenuFlyout>
    </SplitButton.Flyout>
</SplitButton>

Adicione um novo gestor de eventos para o evento do botão Click "Guardar e fechar". Aqui, guarda a nota e depois passa-a de volta para AllNotesPage o parâmetro de navegação.

// ↓ Add this. ↓
private async void SaveCloseButton_Click(SplitButton sender, SplitButtonClickEventArgs args)
{
    if (noteModel is not null)
    {
        await noteModel.SaveAsync();
        Frame.Navigate(typeof(AllNotesPage), noteModel);
    }
}

Gerir o parâmetro de navegação em AllNotesPage

Em AllNotesPage, tem de processar o parâmetro de navegação recebido (Note) e adicioná-lo à coleção Notes ou removê-lo dela, conforme necessário.

Para lidar com o parâmetro de navegação recebido, substitua o método OnNavigatedTo , como mostrado aqui.

// ↓ Add this. ↓
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (e.Parameter is Note note)
    {
        if (note.State == NoteState.Deleted)
        {
            notesModel.RemoveNote(note);
        }
        else if (!notesModel.Notes.Contains(note))
        {
            notesModel.AddNote(note);
        }
        // This navigation should be treated like a
        // back navigation, so clear the backstack.
        Frame.BackStack.Clear();
    }
}

Agora pode executar a sua aplicação para ver como estas alterações funcionam. 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

Passos seguintes

Parabéns! Completaste o tutorial WinUI Notes parte 2 !

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

• Exemplos e recursos
• Design para aplicações Windows
• Desenvolver Aplicações de Ambiente de Trabalho Windows
• Controles para aplicativos do Windows