Tutorial: Criar um aplicativo do Windows com o GitHub Copilot

Neste tutorial, você usará o GitHub Copilot no modo de agente para criar um aplicativo WinUI 3 completo – um aplicativo de anotações simples com uma lista de anotações, a capacidade de adicionar e excluir entradas e uma página de configurações. Você verá exatamente quais sugestões usar em cada etapa e como o plugin WinUI 3 e o servidor Learn MCP mantêm o Copilot preciso ao longo do processo.

Estruture um projeto WinUI 3 com o Copilot
Gerar uma interface do usuário XAML com Copilot
Adicionar lógica de negócios com Copilot
Adicionar uma notificação do Windows usando o Learn MCP Server
Empacotar o aplicativo com a CLI do winapp

Pré-requisitos

GitHub Copilot configurado com o plug-in WinUI 3 e o Learn MCP Server – consulte Configurar o GitHub Copilot para desenvolvimento do Windows
Visual Studio 2026 com a carga de trabalho de desenvolvimento de aplicativos WinUI
winapp CLI instalada (winget install Microsoft.winappcli)

Parte 1: Estruturar o projeto

Criar o projeto WinUI

Crie um novo projeto WinUI 3: no Visual Studio, selecione Arquivo>Novo>Projeto, filtre por WinUI e escolha o modelo C# do WinUI Blank App (Empacotado ). Nomeie o projeto NotesApp e abra-o.

Abra o modo agente do Copiloto e estruture a estrutura.

Abra o painel de Chat do Copilot no Visual Studio e alterne para o modo de agente. Em seguida, insira:

"Tenho um novo projeto WinUI 3 em branco chamado NotesApp. Configure uma arquitetura MVVM com a seguinte estrutura: um MainWindow com um NavigationView, três páginas (Anotações, Favoritos, Configurações), uma pasta ViewModels com uma classe ViewModel base e um NotesViewModel e uma pasta Models com um modelo de Observação que tenha propriedades ID, Título, Conteúdo e CreatedAt. Use CommunityToolkit.Mvvm."

O Copilot criará a estrutura de pastas, adicionará a referência do pacote NuGet CommunityToolkit.Mvvm, gerará as classes base e conectará o NavigationView. Examine a saída – se algo parecer errado, peça a Copilot para corrigi-la na mesma sessão de chat.

Dica

Se o Copilot gerar namespaces Windows.UI.Xaml em vez de Microsoft.UI.Xaml, as instruções personalizadas do plug-in WinUI 3 deverão capturar isso. Se você vê-lo, solicite: "Corrigir todas as instâncias do Windows.UI.Xaml — este é um projeto WinUI 3, portanto, todos os namespaces XAML devem usar Microsoft.UI.Xaml."

Parte 2: Criar a interface do usuário

Gerar a página Anotações

"Gere o XAML para a página Anotações. Ele deve ter um ListView mostrando anotações com título e uma prévia de conteúdo truncada, um TextBox e um botão na parte inferior para adicionar uma nova anotação, e um botão de excluir em cada item. Associe-o ao NotesViewModel. Use os controles do WinUI 3 e o espaçamento do Fluent Design.

O Copilot gera o XAML, vinculado ao ViewModel. Peça para ajustar o estilo ou o layout conforme necessário, por exemplo:

"Faça com que os itens de lista usem um estilo de cartão com uma sombra sutil, semelhante aos exemplos de cartão da Galeria WinUI."

Gerar a página Configurações

Gere uma página de configurações com uma opção de alternância para tema escuro/claro e um botão 'Limpar todas as anotações' com uma caixa de diálogo de confirmação. Use ContentDialog para a confirmação , não MessageDialog."

As instruções do plug-in WinUI 3 orientam Copilot em direção ContentDialog (a abordagem correta do WinUI 3) e longe do preterido MessageDialog.

Parte 3: Adicionar lógica de negócios

Implementar persistência de anotação

"Implemente a persistência de anotação em NotesViewModel usando System.Text.Json para serializar e desserializar a coleção de anotações em um arquivo em ApplicationData.Current.LocalFolder. Carregue anotações sobre a inicialização e salve sempre que a coleção for alterada."

Copilot gera a lógica de carregamento/salvamento. Peça a ele para adicionar tratamento de erros:

"Adicione try/catch nas operações de arquivo e registre os erros na saída de depuração."

Implementar alternância de tema

"Implemente a alternância de tema em SettingsViewModel. Quando o botão de alternância for alterado, atualize o RequestedTheme na janela principal do aplicativo utilizando a abordagem correta do WinUI 3.

Parte 4: Adicionar uma notificação do Windows

A identidade do pacote é necessária para notificações do Windows. Primeiro, configure-o com a CLI do winapp:

winapp create-debug-identity --publisher "CN=NotesApp"

Agora, peça ao Copilot para adicionar uma notificação que é acionada quando uma anotação é salva:

"Adicione uma notificação de aplicativo do Windows que mostra 'Observação salva' com o título da anotação como um subtítulo quando uma anotação é mantida com êxito no disco. Use o AppNotificationManager do SDK de Aplicativos do Windows.

Com o Learn MCP Server conectado, o Copilot pode pesquisar a API atual AppNotificationBuilder e gerar o código de notificação correto. Ele deve produzir algo como:

var notification = new AppNotificationBuilder()
    .AddText("Note saved")
    .AddText(note.Title)
    .BuildNotification();
AppNotificationManager.Default.Show(notification);

Parte 5: Empacotar o aplicativo

Quando estiver pronto para distribuir ou publicar na Microsoft Store, crie um pacote MSIX adequado:

winapp pack --output ./publish

Isso gera um pacote MSIX assinado pronto para instalação direta ou envio para a loja da Microsoft. Peça ajuda ao Copilot para atualizar o manifesto do pacote:

"Mostre-me como atualizar o Package.appxmanifest para definir o nome de exibição, a descrição e o publicador para envio à Loja."

Resumo

Você criou um aplicativo de anotações completo do WinUI 3 usando:

Modo agente do Copilot para estruturação, geração de interface do usuário e lógica de negócios
Plug-in do WinUI 3 para manter o Copilot em APIs modernas e corretas durante todo o processo
Saiba mais sobre o MCP Server para pesquisar APIs de notificação do SDK do Aplicativo Windows
WinApp CLI para identidade de pacote e empacotamento MSIX

Opcional: adicionar IA no dispositivo ao seu aplicativo

O aplicativo de anotações é totalmente funcional — mas você pode ampliá-lo adicionando um recurso de inteligência artificial que funciona inteiramente no dispositivo do usuário. O Foundry Local torna isso simples: ele executa um modelo de idioma localmente e expõe uma API compatível com OpenAI.

Instalar o Foundry Local e baixar um modelo

winget install Microsoft.AIFoundry.Local
foundry model run phi-4-mini

Quando o modelo é iniciado, ele escuta em http://localhost:5272/openai/v1.

Adicionar o pacote NuGet

dotnet add package Azure.AI.OpenAI

Adicionar um botão "Resumir" à página Anotações

Pergunte a Copilot:

"Adicione um botão 'Resumir' à página Anotações. Quando clicado, ele deve enviar o conteúdo da anotação selecionada para um ponto de extremidade de IA local usando http://localhost:5272/openai/v1 o pacote Azure.AI.OpenAI e exibir o resumo em um ContentDialog. O nome do modelo é phi-4-mini."

O Copilot gera a chamada e o diálogo AzureOpenAIClient, e a API compatível com OpenAI significa que o código parece idêntico a uma chamada de API de nuvem, apenas direcionada para localhost.

var client = new AzureOpenAIClient(
    new Uri("http://localhost:5272/openai/v1"),
    new ApiKeyCredential("foundry-local"));

var completion = await client.GetChatClient("phi-4-mini")
    .CompleteChatAsync($"Summarize this note in 2 sentences: {note.Content}");

O que o usuário vê

Nenhuma conexão com a Internet é necessária. Nenhuma chave de API. O modelo é executado em seu computador – rápido, privado e gratuito.