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

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

Nota

O WinUI 3 é o componente nativo da plataforma de interface do usuário que é fornecido com o SDK do Aplicativo Windows (completamente dissociado dos SDKs do Windows). Para obter mais informações, consulte WinUI 3.

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

Pré-requisitos

• Você precisa do Visual Studio para concluir este tutorial. Visite a página de downloads do Visual Studio para obter uma versão gratuita.

• Cargas de trabalho e componentes necessários para o desenvolvimento com o WinUI e o SDK do Aplicativo do Windows. Para verificar ou instalar uma carga de trabalho no Visual Studio, selecione Ferramentas>Obter Ferramentas e Recursos. Para obter mais informações, consulte Modificar cargas de trabalho ou componentes individuais.

  Na guia Cargas de Trabalho do Instalador do Visual Studio, selecione o seguinte:

  Visual Studio 2022 versão 17.10 e posterior

  • Para o desenvolvimento de aplicativos em C# usando o SDK do Aplicativo do Windows, selecione o desenvolvimento de aplicativos WinUI.

  Nota

  No Visual Studio 17.10 – 17.12, essa carga de trabalho é chamada de desenvolvimento de aplicativos do Windows.

  Visual Studio 2022 versão 17.1 – 17.9

  • Para desenvolvimento de aplicativos do C# usando o SDK do Aplicativo do Windows, selecione Desenvolvimento para Desktop do .NET.
  • Em seguida, no painel Detalhes da instalação da caixa de diálogo de instalação, selecione Modelos C# do Windows App SDK (próximo à parte inferior da lista).
  • Na guia Componentes individuais , na seção SDKs, bibliotecas e estruturas , verifique se o SDK do Windows 10 (10.0.19041.0) está selecionado.

  Outras versões do Visual Studio

  • Para o desenvolvimento de aplicativos em C# usando o SDK do Aplicativo do Windows, selecione Desenvolvimento da Área de Trabalho do .NET.
  • Na guia Componentes individuais , na seção SDKs, bibliotecas e estruturas , verifique se o SDK do Windows 10 (10.0.19041.0) está selecionado.

Para obter detalhes, consulte Instalar ferramentas para o SDK do Aplicativo do Windows.

Criar um projeto

Primeiro, crie um projeto WinUI 3. O tipo de projeto vem com todos os arquivos de modelo necessários, antes mesmo de adicionar qualquer coisa!

1. Abra o Visual Studio e, na janela inicial, escolha 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.

   

3. Dê um nome ao projeto, HelloWorld, e escolha Criar.

   

   Nota

   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. Escolha Modo Desenvolvedore então escolha Sim.
   
   
   
   O Visual Studio instala um pacote adicional do Modo de Desenvolvedor para você. Quando a instalação do pacote for concluída, feche a caixa de diálogo Configurações.

Criar o aplicativo

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

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.

   

   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.

   

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

   

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!".

   

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

   

Modificar o manipulador de eventos

Um "manipulador de eventos" parece complicado, mas é apenas outro nome para o código que é chamado quando um evento acontece. Nesse caso, ele adiciona uma ação disparada 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 C# que é aberta.

   Aqui é onde as coisas ficam interessantes. O manipulador de eventos padrão tem esta aparência:

   

   Vamos alterá-lo, para que fique assim:

   

   Este é o código para copiar e colar:

   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 dentro da janela atual. (Para obter mais informações sobre como usar Microsoft.UI.Xaml.Controls.ContentDialog, consulte ContentDialog Class.)

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 como.

1. Use o botão Reproduzir (ele tem o texto HelloWorld (Pacote)) para iniciar o aplicativo no computador local.

   

   (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:

   

3. Selecione o botão Hello World.

   Seu dispositivo Windows 10 ou posterior exibirá uma mensagem que diz "Bem-vindo ao seu primeiro aplicativo SDK de Aplicativo do Windows" com o título "Olá do HelloWorld". Clique em Ok para ignorar a mensagem.

   

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 do Aplicativo do Windows, o WinUI 3 e o IDE do Visual Studio. Para saber mais, continue com o seguinte tutorial:

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

Consulte também

• Escrever aplicativos para Windows: selecionando uma tecnologia de desenvolvimento
• Visão geral do SDK de Aplicativo do Windows
• Exemplos do Windows App SDK / WinUI 3