Criar uma página para uma nota

Agora você criará uma página que permite que um usuário edite uma nota e, em seguida, escreverá o código para salvar ou excluir a nota.

Sugestão

Você pode baixar ou visualizar o código para este tutorial no repositório GitHub. Para ver o código como está nesta etapa, consulte este commit: note page - initial.

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. De seguida, selecione o modelo Página em Branco (WinUI ). 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 Arquivo>Salvar NotePage.xaml.

Se você executar o aplicativo agora, não verá a página de anotações que acabou de criar. Isso porque ainda é necessário defini-lo como o conteúdo do controlo Frame em MainWindow.
Abra MainWindow.xaml e defina NotePage como SourcePageType no Frame, desta forma:
```
<Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="local:NotePage"/>
```
Agora, quando executa a aplicação, o Frame irá carregar uma instância de NotePage e mostrá-la ao utilizador.

Importante

Mapeamentos de namespace XAML (xmlns) são a contraparte XAML para a instrução C# using . local: é um prefixo mapeado para você nas páginas XAML do seu projeto de aplicativo (xmlns:local="using:WinUINotes"). Está mapeado para se referir ao mesmo namespace criado para conter o x:Class atributo e o código de todos os arquivos XAML, incluindo App.xaml. Contanto que você defina quaisquer classes personalizadas que deseja usar em XAML nesse mesmo namespace, você pode usar o prefixo local: para fazer referência aos seus tipos personalizados em XAML.

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

A nova UI da página de notas com a grelha destacada 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 se ajustar ao seu conteúdo, que são os dois botões. A linha superior usa todo o espaço vertical restante (*).
- A coluna do meio tem 400epx de largura e é onde fica o editor de notas. 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, quando você projeta seu aplicativo XAML, está projetando em pixels efetivos, não em pixels físicos reais. Os 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 controlo de layout (StackPanel) que empilha os seus elementos 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 neste caso, os elementos filho podem usar propriedades associadas para informar o elemento pai sobre a forma como devem ser apresentados na interface do utilizador.
Dois <Button> controles estão dentro do <StackPanel> e dispostos horizontalmente. Você adicionará o código para manipular os eventos Click dos botões na próxima seção.

Saiba mais nos documentos:

Carregue e guarde uma nota

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 para o 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 arquivo code-behind para lidar com o NotePage.xaml.cs carregamento e salvamento de notas.

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 nota é 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. Esta pasta é específica para a sua aplicação, pelo que as notas guardadas aqui não podem ser acedidas por outras aplicações. Use a classe StorageFile para acessar o arquivo de texto salvo nesta pasta. O nome do arquivo é representado pela variável fileName. Por enquanto, defina fileName para "note.txt".
Crie um manipulador de eventos para o evento Loaded da página de nota.
```
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 ficheiro existir, chame ReadTextAsync para ler o texto do ficheiro na NoteEditor propriedade Text do controlo. (Lembre-se, NoteEditor é o TextBox controle que você criou no arquivo XAML. Você o referencia aqui em seu 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 resumo, se você chamar um método que termina em ...Async (como TryGetItemAsync), você pode adicionar o operador await à chamada. Isso impede que o código subsequente seja executado até que a chamada aguardada seja concluída e mantém sua interface do usuário responsiva. Quando se utiliza await, o método a partir do qual se está a chamar precisa ser marcado com a palavra-chave async. Para obter mais informações, consulte Chamar APIs assíncronas em C#.

Saiba mais nos documentos:

Adicionar manipuladores de eventos

Em seguida, adicione os manipuladores de eventos Click 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 torná-lo mais fácil.

No arquivo NotePage.xaml, coloque o cursor após o atributo Content no controlo GuardarButton. Escreva 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 <New Event Handler (Novo manipulador de> eventos) e pressione Tab. O Visual Studio completará o atributo com Click="Button_Click" e adicionará um método 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.
No NotePage.xaml.cs, localize o método que foi adicionado para você:
```
private void Button_Click(object sender, RoutedEventArgs e)
{

}
```
Sugestão

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ódigos.
Coloque o cursor antes do "B" em Button e digite Save. Aguarde um momento e o nome do método será realçado em verde.
Ao passar o cursor sobre o nome do método, o Visual Studio mostrará um tooltip com um ícone de chave de fenda ou lâmpada. Clique no botão de seta para baixo ao lado do ícone e 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 onde 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 nota.

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);
}
```
No SaveButton_Click método, verifica-se primeiro se noteFile foi criado. Se for null, então você terá que 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, escreve o texto do controlo TextBox para o ficheiro 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, você primeiro verifica se noteFile existe. Se isso acontecer, exclua o arquivo representado por noteFile da pasta de armazenamento local e defina noteFile para null. Em seguida, redefina o texto no TextBox controle para uma cadeia de caracteres vazia.

Importante

Depois que o arquivo de texto for 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 de sistema é excluído, noteFile ainda aponta para onde o arquivo de sistema estava, mas não sabe que ele não existe mais. Se você tentar ler, gravar ou excluir o arquivo de sistema agora, receberá um erro.
Salve o arquivo pressionando CTRL + S, clicando no ícone Salvar na barra de ferramentas ou selecionando o menu Arquivo>Salvar NotePage.xaml.cs.

O código final para o 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;
            }
        }
    }
}

Teste a nota

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

Crie e execute o projeto pressionando F5, clicando no botão Depurar "Iniciar" 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 a aplicação e, em seguida, reinicie-a. A nota que introduziu deve ser carregada a partir do armazenamento do dispositivo.
Pressione o botão Delete (Excluir ).
Feche o aplicativo, reinicie-o. Deverá ser-lhe apresentada uma nova nota em branco.

Importante

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

Continue para a etapa 3 - Adicionar um modo de exibição e um modelo para a nota

Feedback

Esta página foi útil?

Last updated on 2026-02-12