Crie um "Olá, Mundo!" Aplicativo UWP (XAML) com .NET 9

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

Aqui você aprenderá a:

• Crie um novo projeto UWP direcionado ao .NET 9 no 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 Universal do Windows?
• Baixar 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 no 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 o Visual Studio.

2. No menu Arquivo, selecione Novo > Projeto para abrir a caixa de diálogo Novo Projeto.

3. Filtre a lista de modelos disponíveis escolhendo C# na lista suspensa Idiomas e UWP na lista suspensa de tipos de projeto para ver a lista de modelos de projeto 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 Instalador do Visual Studio no menu Iniciar do Windows. Consulte Configurar o Visual Studio para desenvolvimento UWP para obter mais informações.)

4. Escolha o modelo de aplicativo UWP em branco .

   Importante

   Certifique-se de selecionar o modelo Aplicativo em Branco UWP. Se você selecionar o modelo UWP Blank App (.NET Native), ele terá como destino o runtime nativo do .NET, não o .NET 9. Os aplicativos direcionados ao .NET Native não têm acesso aos recursos mais recentes do .NET e C# ou a melhorias de segurança e desempenho. Para obter mais informações sobre as diferenças entre os dois tipos de projeto, consulte Modernizar seu aplicativo UWP com suporte de versão prévia da UWP para .NET 9 e AOT nativo.

5. Selecione Avançar e insira "HelloWorld" como o nome do projeto. Selecione Criar.

   

   Observação

   Se esta for a primeira vez que você usa o Visual Studio, poderá ver uma caixa de diálogo Configurações solicitando que você habilite o modo desenvolvedor. 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.

   

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 Propriedades ou Chat do GitHub Copilot 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 que você cria no 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 pelo 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 HelloWorld namespace.

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

   

   Observação

   Você não verá uma exibição de design ao trabalhar com o modelo do Aplicativo em Branco UWP que usa o .NET 9. 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 de aplicativo em branco UWP , mas tem a mesma estrutura básica. A principal diferença é que o modelo UWP Blank App (.NET Native) usa o .NET Native para compilar seu aplicativo. Consulte Modernizar seu aplicativo UWP com suporte de versão prévia da UWP para .NET 9 e AOT nativo para obter informações sobre as vantagens de usar o novo modelo do .NET 9.

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 Iniciar e selecione Tudo 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 o 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 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 o namespace SpeechSynthesis na documentação da API do WinRT (Windows Runtime).

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 9!

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