Crie um "Olá, Mundo!" Aplicativo UWP (XAML)

Este tutorial ensina como usar XAML e C# com Native AOT (Antecipadamente) para criar um aplicativo simples "Olá, Mundo!" para o Plataforma Universal do Windows (UWP) no Windows. Com um único projeto em Microsoft Visual Studio, você pode criar um aplicativo que é executado em todas as versões com suporte de Windows 10 e Windows 11.

Aqui você aprenderá a:

• Crie um novo projeto UWP em Visual Studio.
• Escreva XAML para alterar a interface do usuário na página inicial.
• Execute o projeto na área de trabalho local no Visual Studio.
• Use um SpeechSynthesizer para fazer o aplicativo falar quando você pressionar um botão.

Pré-requisitos

• O que é um aplicativo de Windows Universal?
• Download Visual Studio (e Windows). Se você precisar de ajuda, aprenda a configurar.
• Também presumimos que você esteja usando o layout de janela padrão em Visual Studio. Se você alterar o layout padrão, poderá redefini-lo no menu Janela usando o comando Redefinir Layout da Janela.

Etapa 1: criar um novo projeto no Visual Studio

1. Inicie Visual Studio.

2. No menu File, selecione New > Project para abrir a caixa de diálogo New Project.

3. Filtre a lista de modelos disponíveis escolhendo C# na lista suspensa de Languages e UWP na lista suspensa de Tipos de projeto para ver a lista de modelos de projetos UWP disponíveis para desenvolvedores em C#.

   

   (Se você não vir nenhum modelo UWP, talvez não tenha os componentes para criar aplicativos UWP. Você pode repetir o processo de instalação e adicionar suporte à UWP abrindo o Visual Studio Installer no menu Iniciar Windows. Consulte Set up Visual Studio for UWP development for more information.)

4. Escolha o modelo de aplicativo UWP em branco .

   Importante

   O modelo UWP Blank App é o padrão e tem como destino o .NET mais recente com o AOT Nativo. Se você vir um modelo UWP Blank App (.NET Native), esse é um modelo herdado direcionado ao runtime nativo do .NET mais antigo. Os aplicativos que usam o modelo de .NET moderno têm acesso aos recursos mais recentes de .NET e C#, melhor desempenho e melhores ferramentas. Para obter mais informações sobre as diferenças, consulte Modernize seu aplicativo UWP com .NET e AOT nativo.

5. Selecione Next e insira "HelloWorld" como o nome Project. Selecione Criar.

   

   Observação

   Se esta for a primeira vez que você usa Visual Studio, talvez você veja uma caixa de diálogo Configurações solicitando que você habilite o modo Developer. O modo de desenvolvedor é uma configuração especial que permite determinados recursos, como permissão para executar aplicativos diretamente, em vez de apenas da Loja. Para obter mais informações, leia Habilitar seu dispositivo para desenvolvimento. Para continuar com este guia, selecione o modo Desenvolvedor, clique em Sim e feche a caixa de diálogo.

   Uma captura de tela da tela Configurações para Desenvolvedores do Windows

6. A caixa de diálogo Versão de destino/Versão mínima é exibida. As configurações padrão são boas para este tutorial, portanto, selecione OK para criar o projeto.

   

7. Quando o novo projeto é aberto, seus arquivos são exibidos no painel Gerenciador de Soluções à direita. Talvez seja necessário escolher a guia Gerenciador de Soluções em vez das guias Properties ou GitHub Copilot Chat para ver seus arquivos.

   

Embora o aplicativo UWP em branco seja um modelo mínimo, ele ainda contém muitos arquivos. Esses arquivos são essenciais para todos os aplicativos UWP usando C#. Cada projeto UWP criado em Visual Studio os contém.

O que há nos arquivos?

Para exibir e editar um arquivo em seu projeto, clique duas vezes no arquivo no Gerenciador de Soluções. Expanda um arquivo XAML como uma pasta para ver seu arquivo de código associado. Arquivos XAML são abertos em uma visão dividida que mostra tanto a superfície de design quanto o editor XAML.

App.xaml e App.xaml.cs

• App.xaml é o arquivo em que você declara os recursos que são usados em todo o aplicativo.
• App.xaml.cs é o arquivo code-behind para App.xaml. Como todas as páginas code-behind, ela contém um construtor que chama o método InitializeComponent. Você não escreve o método InitializeComponent. Ele é gerado por Visual Studio e sua principal finalidade é inicializar os elementos declarados no arquivo XAML.
• App.xaml.cs é o ponto de entrada do aplicativo.
• App.xaml.cs também contém métodos para lidar com a ativação e a suspensão do aplicativo.

MainPage.xaml

• MainPage.xaml é onde você define a interface do usuário para seu aplicativo. Você pode adicionar elementos diretamente usando a marcação XAML ou pode usar as ferramentas de design fornecidas pelo Visual Studio.
• MainPage.xaml.cs é a página code-behind de MainPage.xaml. É onde você adiciona a lógica do aplicativo e os manipuladores de eventos.
• Juntos, esses dois arquivos definem uma nova classe chamada MainPage, que herda de Page, no namespace HelloWorld.

Package.appxmanifest

• Um arquivo de manifesto que descreve seu aplicativo: seu nome, descrição, bloco, página inicial etc.
• Inclui uma lista de dependências, recursos e arquivos que seu aplicativo contém.

Um conjunto de imagens de logotipo

• Ativos/Square150x150Logo.scale-200.png e Wide310x150Logo.scale-200.png representam seu aplicativo (tamanho médio ou largo) no menu iniciar.
• Ativos/Square44x44Logo.png representa seu aplicativo na lista de aplicativos do menu iniciar, barra de tarefas e gerenciador de tarefas.
• Ativos/StoreLogo.png representa seu aplicativo no Microsoft Store.
• Ativos/SplashScreen.scale-200.png é a tela inicial que aparece quando seu aplicativo é iniciado.
• "Assets/LockScreenLogo.scale-200.png podem ser usados para representar o aplicativo na tela de bloqueio, quando o sistema está bloqueado."

Etapa 2: Adicionar um botão

Usando o modo de exibição do designer

Vamos adicionar um botão à nossa página. Neste tutorial, você trabalha com apenas alguns dos arquivos listados anteriormente: App.xaml, MainPage.xaml e MainPage.xaml.cs.

1. Clique duas vezes em MainPage.xaml para abri-lo no editor XAML.

   Screenshot do Visual Studio mostrando a Main Page no editor XAML

   Observação

   Você não verá uma visualização de design ao trabalhar com o modelo UWP Blank App que usa .NET moderno. Se você quiser trabalhar com um projeto UWP com uma exibição de design XAML, poderá usar o modelo UWP Blank App (.NET Native). Como observado anteriormente, o modelo UWP Blank App (.NET Native) é um pouco diferente do modelo UWP Blank App mas tem a mesma estrutura básica. A principal diferença é que o modelo UWP Blank App (.NET Native) usa .NET Native para compilar seu aplicativo. Consulte Modernize seu aplicativo UWP com .NET e AOT nativo para obter informações sobre as vantagens de usar o modelo de .NET moderno.

2. Adicione o seguinte código XAML ao <Grid> elemento em MainPage.xaml. Você pode digitá-lo ou copiá-lo e colá-lo daqui:

   <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
   

3. Neste ponto, você criou um aplicativo muito simples. Este é um bom momento para criar, implantar e iniciar seu aplicativo e ver a aparência dele. Você pode depurar seu aplicativo no computador local, em um simulador ou emulador ou em um dispositivo remoto. Aqui está o menu do dispositivo de destino no Visual Studio:

   

   Por padrão, o aplicativo é executado no computador local. O menu do dispositivo de destino fornece várias opções para depurar seu aplicativo em dispositivos da família de dispositivos da área de trabalho.

   • HelloWorld (isso o executa no computador local)
   • WSL
   • Baixar novos emuladores...

4. Execute o aplicativo para ver o botão em ação. Para iniciar a depuração no computador local, você pode executar o aplicativo selecionando a Depuração | Inicie o item de Depuração no menu, clicando no botão iniciar depuração na barra de ferramentas (com o rótulo HelloWorld ) ou pressionando F5.

   O aplicativo é aberto em uma janela e uma tela inicial padrão é exibida primeiro. A tela inicial é definida por uma imagem (SplashScreen.png) e uma cor da tela de fundo (especificada no arquivo de manifesto do aplicativo).

   A tela inicial desaparece e, em seguida, seu aplicativo é exibido. Tem esta aparência:

   

5. Pressione a tecla Windows para abrir o menu Start e selecione All para mostrar todos os aplicativos. Observe que implantar o aplicativo localmente o adiciona à lista de programas no menu Iniciar . Para executar o aplicativo novamente mais tarde (não no modo de depuração), você pode selecioná-lo no menu Iniciar .

   Ainda não faz muita coisa — mas parabéns, você criou e implantou seu primeiro aplicativo UWP em seu computador local!

6. Para interromper a depuração:

   Clique no botão Parar Depuração (botão Parar Depuração) na barra de ferramentas.

   –ou–

   No menu Depurar , clique em Parar depuração.

   –ou–

   Feche a janela do aplicativo.

7. Altere o texto do botão alterando o Content valor de Button para Hello, world!.

   <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
   

   Se você executar o aplicativo novamente, o botão será atualizado para exibir o novo texto.

Etapa 3: Manipuladores de eventos

Um "manipulador de eventos" parece complicado, mas é apenas outro nome para o código que é chamado quando um evento acontece (como o usuário clicando no botão).

1. Interrompa a execução do aplicativo, caso ainda não tenha feito isso.

2. Comece a digitar Click no editor XAML e Visual Studio mostrará uma lista de possíveis eventos. Selecione Clique na lista.

   

3. Em seguida, selecione <New Event Handler> na lista. Isso cria um novo método de manipulador de eventos no arquivo code-behind (MainPage.xaml.cs) e adiciona o Click evento ao elemento de botão no código XAML.

   

   O editor XAML adiciona automaticamente o Click evento ao elemento de botão em seu código XAML:

   <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top" Click="button_Click"/>
   

   Isso também adiciona um manipulador de eventos ao arquivo code-behind (MainPage.xaml.cs). O manipulador de eventos é um método que será chamado quando o botão for clicado. O nome do método é button_Click, e ele tem dois parâmetros: object sender e RoutedEventArgs e.

   private void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
   {
   
   }
   

   O evento Click é um evento padrão para botões. Quando o usuário clica no botão, o button_Click método é chamado.

4. Edite o código do manipulador de eventos em MainPage.xaml.cs, a página code-behind. É aqui que as coisas ficam interessantes. Vamos alterá-lo, para que fique assim:

   private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
   {
       var 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();
   }
   

   Verifique se a assinatura do método agora inclui a palavra-chave assíncrona ou você receberá um erro ao tentar executar o aplicativo.

O que acabamos de fazer?

Esse código usa algumas APIs 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 o namespace SpeechSynthesis na documentação da API Windows Runtime (WinRT).)

Quando você executar o aplicativo e clicar no botão, seu computador (ou telefone) literalmente dirá "Olá, Mundo!".

Resumo

Parabéns, você criou seu primeiro aplicativo UWP para Windows com o .NET moderno!

Para saber como usar o XAML para definir os controles que seu aplicativo usará, experimente o tutorial de grade ou vá direto para próximas etapas?

Conteúdo relacionado

• Publicando seu aplicativo UWP.
• Artigos de instruções passo a passo sobre o desenvolvimento de aplicativos UWP
• Exemplos de código para desenvolvedores UWP