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

Se você ainda não instalou 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 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:

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