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

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
  • Visual Studio 2022 versão 17.1 – 17.9

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

  Nota

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

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.

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

   

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.

   

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();
   }
   

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