Criar um aplicativo de notas do WinUI 3

Esta série de tutoriais demonstra como criar um aplicativo WinUI usando XAML e C#. O aplicativo que você criará é um aplicativo de anotação, em que o usuário pode criar, salvar e carregar várias anotações. Você pode baixar ou exibir o código deste tutorial no repositório GitHub.

Comece aqui depois que conseguir compilar e executar um projeto em branco. Esta é uma introdução passo a passo aos conceitos básicos do WinUI 3 usando Visual Studio; nenhum assistente de codificação de IA ou kit de ferramentas MVVM é necessário.

Neste tutorial, você aprenderá como:

• Use a marcação XAML para definir a interface do usuário do aplicativo.
• Interaja com elementos XAML por meio do código C#.
• Salve e carregue arquivos do sistema de arquivos local.
• Crie exibições e associe-as aos dados.
• Use a navegação para mover de e para páginas no aplicativo.
• Use recursos como documentação e aplicativos de exemplo para criar seu próprio aplicativo.

Você criará um aplicativo que pode ser usado para inserir uma anotação e salvá-la no armazenamento de aplicativos local. O aplicativo terá duas páginas:

• NotePage - uma página para editar uma única anotação.
• AllNotesPage - uma página para mostrar todas as anotações salvas.

O aplicativo final é mostrado abaixo:

AllNotesPage

NotePage

Crie o projeto do Visual Studio

Siga o caminho Visual Studio no Início Rápido: criar e executar um projeto WinUI 3 para instalação de ferramentas e criação de projeto. Use um projeto C# empacotado com estas configurações específicas do tutorial:

• Nome do Projeto

  Isso deve ser definido como WinUINotes. Se o project for nomeado algo diferente, o código que você copiar e colar deste tutorial poderá resultar em erros de build. Isso ocorre porque Visual Studio usa o nome do project como o namespace padrão para o código do aplicativo.

• SDK do Aplicativo do Windows

  Este tutorial usa recursos disponíveis no SDK do Aplicativo Windows 1.7 e posterior. Verifique se o SDK do Aplicativo Windows pacote NuGet está atualizado para a versão 1.7 ou posterior.

Crie e inicie o projeto em branco WinUINotes antes de continuar. Você deverá ver uma janela vazia com esta aparência:

Dica

Você se referirá frequentemente a documentos de referência de API e documentos conceituais durante a criação de aplicativos do Windows. Neste tutorial, você verá links embutidos no texto e em grupos rotulados como "Saiba mais nos documentos:". Esses links são opcionais; você não precisa segui-los para concluir o tutorial. Eles são fornecidos caso você queira anotar onde encontrar as informações necessárias quando começar a criar seus próprios aplicativos.

Continue para a etapa 1 – configuração do projeto