Share via

Tutorial: criar seu primeiro aplicativo do SDK de Aplicativo do Windows no Visual Studio com XAML e C#

  • Artigo

Nesta introdução ao IDE (ambiente de desenvolvimento integrado) do Visual Studio, você criará um aplicativo "Olá, Mundo" que poderá ser executado em qualquer dispositivo Windows 10 ou posterior. Para fazer isso, você usará um modelo de projeto do SDK Aplicativo do Windows (WinUI 3), XAML (Extensible Application Markup Language) e a linguagem de programação C#.

Observação

O WinUI 3 é um componente de plataforma da IU nativa fornecido com o SDK do Aplicativo Windows (completamente separado dos SDKs do Windows). Para obter mais informações, confira WinUI 3.

Se você ainda não tiver instalado o Visual Studio, acesse a página Downloads do Visual Studio para instalá-lo gratuitamente.

Criar um projeto

Primeiro, crie um projeto WinUI 3. O tipo de projeto vem com todos os arquivos de modelo que você precisa, antes mesmo de você adicionar alguma coisa!

Importante

O Visual Studio 2019 só dá suporte ao Windows App SDK 1.1 e anterior. O Visual Studio 2022 é recomendado para desenvolver aplicativos com todas as versões do Windows App SDK.

Os modelos do SDK de Aplicativo do Windows 1.1.x estão disponíveis instalando uma VSIX (Extensão do Visual Studio).

Observação

Se você tem uma VSIX (Extensão do Visual Studio) do SDK de Aplicativo do Windows já instalada, desinstale-a antes de instalar uma nova versão. Para obter instruções, confira Gerenciar extensões para o Visual Studio.

  • Você pode instalar a última versão estável da VSIX 1.1.x por meio do Visual Studio. Selecione Extensões>Gerenciar Extensões, pesquise SDK do Aplicativo Windows e baixe a extensão do SDK do Aplicativo Windows. Feche e reabra o Visual Studio e siga os prompts para instalar a extensão. Instale os modelos para SDK de Aplicativo Windows 1.1.
  • Como alternativa, baixe a extensão diretamente do Visual Studio Marketplace e instale-a:

Baixar modelos C# de SDK VS2019 do SDK de Aplicativo do Windows

Depois que a extensão de modelos for instalada, você poderá criar seu primeiro projeto. Para obter mais informações sobre o suporte do Visual Studio 2019, confira Instalar ferramentas para o SDK de Aplicativo do Windows. No restante deste tutorial, presumiremos que você tem o Visual Studio 2022 instalado.

  1. Abra o Visual Studio e, na janela de início, selecione Criar um novo projeto.

  2. Na tela Criar um projeto, digite WinUI na caixa de pesquisa, escolha o modelo C# para Aplicativo em Branco, Empacotado (WinUI 3 na Área de Trabalho) e escolha Avançar.

    Screenshot of the 'Create a new project' dialog with 'WinUI' entered in the search box, and the 'Blank App, Packaged (WinUI 3 in Desktop)' project template highlighted.

    Observação

    Se você não vir o modelo de projeto Aplicativo em Branco, Empacotado (WinUI 3 na Área de Trabalho), clique no link Instalar mais ferramentas e recursos.

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    O Instalador do Visual Studio é iniciado. Escolha a carga de trabalho Desenvolvimento da Área de Trabalho do .NET e, no painel de Detalhes da instalação da caixa de diálogo de instalação, selecione Modelos C# do SDK de Aplicativo do Windows (na parte inferior da lista). Selecione Modificar.

    Screenshot of the Visual Studio Installer showing the .NET Desktop Development workload.

  3. Dê um nome ao projeto, OláMundo, e escolha Criar.

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

    Observação

    Se esta for a primeira vez que você usa o Visual Studio para criar um aplicativo do SDK de Aplicativo do Windows, uma caixa de diálogo Configurações poderá aparecer. Selecione Modo do Desenvolvedor e, em seguida, escolha Sim.

    Screenshot showing the Settings dialog box with the option for enabling Developer Mode.

    O Visual Studio instala um pacote de Modo do Desenvolvedor adicional. Quando o pacote de instalação for concluído, feche a caixa de diálogo Configurações.

Criar o aplicativo

É hora de começar a desenvolver. Você vai adicionar um controle de botão, adicionar uma ação para o botão e, em seguida, execute o aplicativo "Olá, Mundo" para ver sua aparência.

Adicionar um botão à tela de Design

  1. No Gerenciador de Soluções, clique duas vezes em MainWindow.xaml para abrir o editor de marcação XAML.

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainWindow.xaml is selected.

    O Editor de XAML é onde você pode adicionar ou alterar a marcação. Ao contrário dos projetos UWP, o WinUI 3 não tem uma exibição Design.

    Screenshot showing MainWindow.xaml open in the Visual Studio IDE. The XAML Editor pane shows the XAML markup for the window.

  2. Examine o controle de Botão aninhado no StackPanel na raiz da Janela.

    Screenshot showing 'Button' highlighted in the XAML editor.

Alterar o rótulo no botão

  1. No Editor de XAML, altere o valor de Conteúdo do Botão de "Clique em min" de "Olá, Mundo!".

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

  2. Observe que o botão também tem um manipulador de eventos de Clique chamado myButton_Click especificado. Abordaremos isso na próxima etapa.

    Screenshot showing the XAML code for the Button in the XAML editor. The click event of the button has been highlighted.

Modificar o manipulador de eventos

O termo "Manipulador de eventos" parece complicado, mas é apenas outro nome para o código que é chamado quando ocorre um evento. Nesse caso, ele adiciona uma ação acionada pelo botão "Olá, Mundo!".

  1. No Gerenciador de Soluções, clique duas vezes em MainWindow.xaml.cs, na página code-behind.

  2. Edite o código do manipulador de eventos na janela do editor do C# que é aberta.

    É aqui que as coisas ficam interessantes. O manipulador de eventos padrão tem esta aparência:

    Screenshot showing the C# code for the default myButton_Click event handler.

    Vamos alterá-la para que ela tenha esta aparência:

    Screenshot showing the C# code for the new async myButton_Click event handler.

    Aqui está o código a ser copiado e colado:

    private async void myButton_Click(object sender, RoutedEventArgs e)
{
    var welcomeDialog = new ContentDialog()
    {
        Title = "Hello from HelloWorld",
        Content = "Welcome to your first Windows App SDK app.",
        CloseButtonText = "Ok",
        XamlRoot = myButton.XamlRoot
    };
    await welcomeDialog.ShowAsync();
}

O que acabamos de fazer?

O código usa o controle ContentDialog para exibir uma mensagem de boas-vindas em um controle pop-up modal na janela atual. (Para obter mais informações sobre como usar Microsoft.UI.Xaml.Controls.ContentDialog, confira Classe ContentDialog.)

Executar o aplicativo

É hora de criar, implantar e iniciar o aplicativo do SDK de Aplicativo do Windows "Olá, Mundo" para ver como ele se comportará. Veja aqui como fazer isso.

  1. Use o botão Executar (com o texto OláMundo (Pacote)) para iniciar o aplicativo no computador local.

    Screenshot showing the drop-down box open next to the Play button with 'HelloWorld (Package)' selected.

    (Como alternativa, você pode escolher Depurar>Iniciar Depuração na barra de menus ou pressionar F5 para iniciar seu aplicativo.)

  2. Veja o aplicativo, que aparece logo depois que uma tela inicial desaparece. O aplicativo deve ser semelhante a esta imagem:

    Screenshot showing the running Windows App SDK 'Hello World' application.

  3. Selecione o botão Olá, Mundo.

    Seu dispositivo Windows 10 ou posterior exibirá a seguinte mensagem "Bem-vindo(a) ao seu primeiro aplicativo do SDK de Aplicativo do Windows" com o título "Olá, do OláMundo". Clique em Ok para fechar a mensagem.

    Screenshot showing the running 'Hello World' application with a popup titled 'Hello from HelloWorld'.

  4. Para fechar o aplicativo, selecione o botão Parar Depuração na barra de ferramentas. (Como alternativa, escolha Depurar>Parar depuração na barra de menus ou pressione Shift+F5.)

Próximas etapas

Parabéns por concluir este tutorial. Esperamos que você tenha aprendido algumas noções básicas sobre o SDK de Aplicativo do Windows, WinUI 3 e IDE do Visual Studio. Para saber mais, continue com o tutorial a seguir:

Tutorial: criar um visualizador de fotos simples com o WinUI 3

Confira também