Criar uma página para uma anotação

Agora você criará uma página que permite que um usuário edite uma anotação e, em seguida, você escreverá o código para salvar ou excluir a anotaçã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, consulte esta confirmação: página de observação – inicial.

Primeiro, adicione a nova página ao projeto:

No painel Gerenciador de Soluções do Visual Studio, clique com o botão direito do mouse no projeto >Adicionar>Novo Item....
Na caixa de diálogo Adicionar Novo Item , selecione WinUI na lista de modelos no lado esquerdo da janela. Em seguida, selecione o modelo de Página em Branco (WinUI 3 ). Nomeie o arquivo NotePage.xamle selecione Adicionar.

O NotePage.xaml arquivo será aberto em uma nova guia, exibindo toda a marcação XAML que representa a interface do usuário da página. Substitua o <Grid> ... </Grid> elemento no XAML pela seguinte marcação:

<Grid Padding="16" RowSpacing="8">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="400"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBox x:Name="NoteEditor"
         AcceptsReturn="True"
         TextWrapping="Wrap"
         PlaceholderText="Enter your note"
         Header="New note"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         Width="400"
         Grid.Column="1"/>

    <StackPanel Orientation="Horizontal"
            HorizontalAlignment="Right"
            Spacing="4"
            Grid.Row="1" Grid.Column="1">
        <Button Content="Save" Style="{StaticResource AccentButtonStyle}"/>
        <Button Content="Delete"/>
    </StackPanel>
</Grid>

Salve o arquivo pressionando CTRL + S, clicando no ícone Salvar na barra de ferramentas ou selecionando o menu>NotePage.xaml .

Se você executar o aplicativo no momento, não verá a página de anotação que acabou de criar. Isso porque você ainda precisa defini-lo como o conteúdo do Frame controle em MainWindow.
Abra MainWindow.xaml e defina NotePage como o SourcePageType no Frame, da seguinte maneira:
```
<Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="local:NotePage"/>
```
Agora, quando você executar o aplicativo, carregará Frame uma instância NotePage e a mostrará ao usuário.

Importante

Os mapeamentos de namespace XAML (xmlns) são o equivalente XAML à instrução C#using. local: é um prefixo mapeado para você dentro das páginas XAML do seu projeto de aplicativo (xmlns:local="using:WinUINotes"). Ele é mapeado para se referir ao mesmo namespace criado para conter o atributo e o x:Class código de todos os arquivos XAML, incluindo App.xaml. Desde que você defina as classes personalizadas que deseja usar no XAML nesse mesmo namespace, você pode usar o local: prefixo para se referir aos seus tipos personalizados no XAML.

Vamos especificar as partes principais dos controles XAML colocados na página:

A nova interface do usuário da página de anotação com a grade realçada pelo Visual Studio.

Grid.RowDefinitions e Grid.ColumnDefinitions definem uma grade com 2 linhas e 3 colunas (colocadas abaixo da barra de título).
- A linha inferior é automaticamente (Auto) dimensionada para ajustar seu conteúdo, os dois botões. A linha superior usa todo o espaço vertical restante (*).
- A coluna do meio é 400de largura epx e é para onde o editor de notas vai. As colunas de ambos os lados estão vazias e dividem todo o espaço horizontal restante entre elas (*).
Observação

Devido ao funcionamento do sistema de dimensionamento, ao projetar seu aplicativo XAML, você está projetando em pixels efetivos, não em pixels físicos reais. Pixels efetivos (epx) são uma unidade virtual de medida e são usados para expressar dimensões de layout e espaçamento, independentemente da densidade da tela.
<TextBox x:Name="NoteEditor" ... > ... </TextBox> é um controle de entrada de texto (TextBox) configurado para entrada de texto de várias linhas e é colocado na célula central superior do Grid (Grid.Column="1"). Os índices de linha e coluna são baseados em 0 e, por padrão, os controles são colocados na linha 0 e na coluna 0 do pai Grid. Portanto, isso é o equivalente a especificar a Linha 0, Coluna 1.
<StackPanel Orientation="Horizontal" ... > ... </StackPanel> define um controle de layout (StackPanel) que empilha seus filhos verticalmente (padrão) ou horizontalmente. Ele é colocado na célula central inferior do Grid (Grid.Row="1" Grid.Column="1").

Observação

Grid.Row="1" Grid.Column="1" é um exemplo de propriedades anexadas XAML. As propriedades anexadas permitem que um objeto XAML defina uma propriedade que pertence a um objeto XAML diferente. Muitas vezes, como nesse caso, os elementos filho podem usar propriedades anexadas para informar seu elemento pai de como eles devem ser apresentados na interface do usuário.
Dois <Button> controles estão dentro e <StackPanel> organizados horizontalmente. Você adicionará o código para manipular os eventos de clique dos botões na próxima seção.

Saiba mais nos documentos:

Carregar e salvar uma anotação

Abra o NotePage.xaml.cs arquivo code-behind. Quando você adiciona um novo arquivo XAML, o code-behind contém uma única linha no construtor, uma chamada ao método InitializeComponent:

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        public NotePage()
        {
            this.InitializeComponent();
        }
    }
}

O método InitializeComponent lê a marcação XAML e inicializa todos os objetos definidos pela marcação. Os objetos são conectados em suas relações pai-filho e os manipuladores de eventos definidos no código são anexados a eventos definidos no XAML.

Agora você vai adicionar código ao NotePage.xaml.cs arquivo code-behind para lidar com o carregamento e salvamento de anotações.

Adicione as seguintes declarações de variável à NotePage classe:
```
public sealed partial class NotePage : Page
{
    private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    private StorageFile? noteFile = null;
    private string fileName = "note.txt";
```
Quando uma anotação é salva, ela é salva no armazenamento local do aplicativo como um arquivo de texto.

Use a classe StorageFolder para acessar a pasta de dados local do aplicativo. Essa pasta é específica do seu aplicativo, portanto, as anotações salvas aqui não podem ser acessadas por outros aplicativos. Use a classe StorageFile para acessar o arquivo de texto salvo nesta pasta. O nome do arquivo é representado pela variável fileName. Por enquanto, definido fileName como "note.txt".
Crie um manipulador de eventos para o evento Loaded da página de anotação.
```
public NotePage()
{
    this.InitializeComponent();
    // ↓ Add this. ↓
    Loaded += NotePage_Loaded;
}

// ↓ Add this event handler method. ↓
private async void NotePage_Loaded(object sender, RoutedEventArgs e)
{
    noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
    if (noteFile is not null)
    {
        NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
    }
}
```
Nesse método, você chama TryGetItemAsync para recuperar o arquivo de texto da pasta. Se o arquivo não existir, ele retornará null. Se o arquivo existir, chame ReadTextAsync para ler o texto do arquivo na NoteEditor propriedade Text do controle. (Lembre-se, NoteEditor é o TextBox controle que você criou no arquivo XAML. Você faz referência a ele aqui no arquivo code-behind usando o x:Name que você atribuiu a ele.)

Importante

Você precisa marcar esse método com a async palavra-chave porque as chamadas de acesso ao arquivo são assíncronas. Em suma, se você chamar um método que termina em ...Async (como TryGetItemAsync), poderá adicionar o operador await à chamada. Isso impede que o código subsequente seja executado até que a chamada esperada seja concluída e mantenha a interface do usuário responsiva. Quando você usa await, o método do qual você está chamando precisa ser marcado com a palavra-chave assíncrona . Para obter mais informações, consulte Chamar APIs assíncronas em C#.

Saiba mais nos documentos:

Adicionar processadores de eventos

Em seguida, adicione os manipuladores de eventos Clique para os botões Salvar e Excluir . Adicionar manipuladores de eventos é algo que você fará com frequência ao criar seus aplicativos, portanto, o Visual Studio fornece vários recursos para facilitar.

No arquivo, coloque o NotePage.xaml cursor após o Content atributo no controle SalvarButton . Digite Click=. Neste ponto, o Visual Studio deve exibir uma interface do usuário de preenchimento automático semelhante a esta:
- Pressione a tecla de seta para baixo para selecionar <Novo Manipulador> de Eventos e pressione Tab. O Visual Studio concluirá o atributo com Click="Button_Click" e adicionará um método de manipulador de eventos nomeado Button_Click no NotePage.xaml.cs arquivo code-behind.
Agora, você deve renomear o Button_Click método para algo mais significativo. Você fará isso nas etapas a seguir.
Em NotePage.xaml.cs, localize o método que foi adicionado para você:
```
private void Button_Click(object sender, RoutedEventArgs e)
{

}
```
Dica

Para localizar o código em seu aplicativo, clique em Pesquisar na barra de título do Visual Studio e use a opção Pesquisa de Código . Clique duas vezes no resultado da pesquisa para abrir o código no editor de código.
Coloque o cursor antes do "B" Button e digite Save. Aguarde um momento e o nome do método será realçado em verde.
Quando você passa o mouse sobre o nome do método, o Visual Studio mostrará uma dica de ferramenta com uma chave de fenda ou ícone de lâmpada. Clique no botão de seta para baixo ao lado do ícone e, em seguida, clique em Renomear 'Button_Click' para 'SaveButton_Click'.

O Visual Studio renomeará o método em todos os lugares do seu aplicativo, inclusive no arquivo XAML em que você o adicionou pela primeira vez ao Button.
Repita estas etapas para o botão Excluir e renomeie o método para DeleteButton_Click.

Agora que os manipuladores de eventos estão conectados, você pode adicionar o código para salvar e excluir o arquivo de anotação.

Adicione esse código no SaveButton_Click método para salvar o arquivo. Observe que você também precisa atualizar a assinatura do método com a async palavra-chave.
```
private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is null)
    {
        noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
    }
    await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
}
```
SaveButton_Click No método, primeiro você verifica se noteFile foi criado. Se for null, você precisará criar um novo arquivo na pasta de armazenamento local com o nome representado pela fileName variável e atribuir o arquivo à noteFile variável. Em seguida, você escreve o texto no TextBox controle no arquivo representado por noteFile.
Adicione esse código no DeleteButton_Click método para excluir o arquivo. Você também precisa atualizar a assinatura do método com a async palavra-chave aqui.
```
private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is not null)
    {
        await noteFile.DeleteAsync();
        noteFile = null;
        NoteEditor.Text = string.Empty;
    }
}
```
DeleteButton_Click No método, primeiro você verifica se noteFile existe. Se isso acontecer, exclua o arquivo representado pela noteFile pasta de armazenamento local e defina noteFile como null. Em seguida, redefina o texto no TextBox controle para uma cadeia de caracteres vazia.

Importante

Depois que o arquivo de texto é excluído do sistema de arquivos, é importante definir noteFile como null. Lembre-se de que noteFile é um StorageFile que fornece acesso ao arquivo do sistema em seu aplicativo. Depois que o arquivo do sistema é excluído, noteFile ainda aponta para onde o arquivo do sistema estava, mas não sabe que ele não existe mais. Se você tentar ler, gravar ou excluir o arquivo do sistema agora, receberá um erro.
Salve o arquivo pressionando CTRL + S, clicando no ícone Salvar na barra de ferramentas ou selecionando o menu>NotePage.xaml.cs .

O código final do arquivo code-behind deve ter esta aparência:

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using Windows.Storage;

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        private StorageFile? noteFile = null;
        private string fileName = "note.txt";

        public NotePage()
        {
            this.InitializeComponent();
            Loaded += NotePage_Loaded;
        }

        private async void NotePage_Loaded(object sender, RoutedEventArgs e)
        {
            noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
            if (noteFile is not null)
            {
                NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
            }
        }

        private async void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is null)
            {
                noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
            }
            await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
        }

        private async void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is not null)
            {
                await noteFile.DeleteAsync();
                noteFile = null;
                NoteEditor.Text = string.Empty;
            }
        }
    }
}

Testar a anotação

Com esse código em vigor, você pode testar o aplicativo para garantir que a anotação seja salva e carregada corretamente.

Crie e execute o projeto pressionando F5, clicando no botão "Iniciar" de depuração na barra de ferramentas ou selecionando o menu Executar>Iniciar Depuração.
Digite na caixa de entrada de texto e pressione o botão Salvar .
Feche o aplicativo e reinicie-o. A anotação inserida deve ser carregada do armazenamento do dispositivo.
Pressione o botão Excluir .
Feche o aplicativo, reinicie-o. Você deve receber uma nova nota em branco.

Importante

Depois de confirmar que salvar e excluir uma anotação funciona corretamente, crie e salve uma nova anotação novamente. Você desejará ter uma nota salva para testar o aplicativo em etapas posteriores.

Continuar na etapa 3 – Adicionar um modo de exibição e um modelo para a nota

Comentários

Esta página foi útil?

Last updated on 2025-09-03