Tutorial: Criar seu primeiro aplicativo da Plataforma Universal do Windows no Visual Studio com XAML e C#

Neste tutorial, como uma introdução ao IDE (ambiente de desenvolvimento integrado) do Visual Studio, você cria um aplicativo "Olá, Mundo" que é executado em qualquer dispositivo Windows 10 ou posterior. Para fazer isso, use um modelo de projeto da Plataforma Universal do Windows (UWP), XAML (Extensible Application Markup Language) e a linguagem de programação C#.

Nota

Se você estiver satisfeito com sua funcionalidade atual na UWP (Plataforma Universal do Windows), não será necessário migrar seu tipo de projeto para o SDK do Aplicativo do Windows. O WinUI 2.x e o SDK do Windows dão suporte a tipos de projeto UWP. Se você quiser começar a usar o WinUI 3 e o SDK do Aplicativo do Windows, siga as etapas no tutorial do SDK do Aplicativo do Windows.

Neste tutorial, você:

• Criar um projeto
• Criar um aplicativo
• Executar o aplicativo

Pré-requisitos

Você precisa:

• Visual Studio. 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 de um aplicativo UWP. Para verificar ou instalar uma carga de trabalho no Visual Studio, selecione Ferramentas>Para Obter Ferramentas e Recursos ou, na janela Criar um novo projeto , selecione o link Instalar mais 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 as seguintes cargas de trabalho e componentes:

  Visual Studio 2022 versão 17.10 e posterior

  • Para desenvolvimento de aplicativos usando UWP, selecione a carga de trabalho de desenvolvimento de aplicativos WinUI . Em seguida, no painel Detalhes da instalação , no nó de desenvolvimento do aplicativo WinUI , selecione a opção UWP necessária (isso também selecionará quaisquer componentes adicionais necessários)

  • Para C#, selecione ferramentas da Plataforma Universal do Windows e o SDK do Windows 11 (10.0.26100.0).

  • Este tutorial requer o modelo de projeto UWP App em Branco.

  Visual Studio 2022 versão 17.1 – 17.9

  • Para o desenvolvimento de aplicativos em C# usando UWP, selecione a carga de trabalho de desenvolvimento da Plataforma Universal do Windows .

  • Este tutorial requer o modelo de projeto Aplicativo em Branco (Universal do Windows).

  Nota

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

Criar um projeto

Primeiro, crie um projeto da Plataforma Universal do Windows. 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 novo projeto , insira o Windows Universal na caixa de pesquisa, escolha o modelo C# para Aplicativo em Branco (Universal do Windows) ou Aplicativo UWP em Branco no Visual Studio 2022 17.10 ou posterior e escolha Avançar.

   

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

   

4. Aceite as configurações padrão de Versão de destino e de Versão mínima na caixa de diálogo Novo Projeto da Plataforma Universal do Windows.

   

   Nota

   Se esta for a primeira vez que você usou o Visual Studio para criar um aplicativo UWP, a caixa de diálogo Habilitar Modo de Desenvolvedor para Windows será exibida. Selecione as configurações para desenvolvedores para abrir Configurações. Ative o Modo Desenvolvedore depois 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. Adicione um controle de botão, adicione uma ação ao botão e inicie 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 MainPage.xaml para abrir uma exibição dividida.

   

   Há dois painéis: o do Designer XAML, que inclui uma tela de design e o editor XAML , em que você pode adicionar ou alterar o código.

   

2. Escolha Caixa de ferramentas para abrir a janela de submenu Caixa de Ferramentas.

   

   Se a opção Caixa de Ferramentas não for exibida, ela poderá ser aberta na barra de menus. Para fazer isso, escolha Exibição>Barra de Ferramentas. Ou pressione Ctrl+Alt+X.

3. Selecione o ícone Fixar para encaixar a janela Caixa de Ferramentas.

   

4. Selecione o controle de Botão e, em seguida, arraste-o para a tela de design.

   

   Se você examinar o código no editor XAML, verá que o Botão também aparece lá:

   

Adicionar um rótulo ao botão

1. No Editor XAML, altere o valor Button Content de Botão para Olá, Mundo!

   

2. Observe que o botão no Designer XAML muda muito.

   

Adicionar um 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 ao botão Hello World!.

1. Clique duas vezes no controle de botão na tela de design.

2. Edite o código do manipulador de eventos em MainPage.xaml.cs, a página code-behind.

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

   

   Altere-o, para que se pareça com este:

   

   Este é o código para copiar e colar:

   private async void Button_Click(object sender, RoutedEventArgs e)
   {
      MediaElement mediaElement = new MediaElement();
      var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
      Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
      mediaElement.SetSource(stream, stream.ContentType);
      mediaElement.Play();
   }
   

O que acabamos de fazer?

O código usa algumas APIs do Windows para criar um objeto de síntese de fala e, em seguida, fornece um texto a ser dito. Para obter mais informações sobre como usar SpeechSynthesis, consulte System.Speech.Synthesis.

Executar o aplicativo

É hora de criar, implantar e iniciar o aplicativo UWP "Olá, Mundo" para ver como ele se parece e soa. Veja como.

1. Use o botão Play (ele tem o texto Computador Local) 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 literalmente diz: "Olá, Mundo!"

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.

Conteúdo relacionado

• Visão geral da UWP
• Obter exemplos de aplicativo UWP

Próxima etapa

Parabéns por concluir este tutorial! Esperamos que você tenha aprendido algumas noções básicas sobre a UWP e o IDE do Visual Studio. Para saber mais, continue com o seguinte tutorial:

Criar uma interface do usuário