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

Este tutorial ensina como usar XAML, C# e .NET 9 com AOT nativo (Ahead-of-Time) 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 destinado ao .NET 9 no Visual Studio.
• Escreva XAML para alterar a interface do usuário em sua página inicial.
• Execute o projeto na área de trabalho local no Visual Studio.
• Use um SpeechSynthesizer para fazer o aplicativo falar quando você pressiona um botão.

Pré-requisitos

• O que é um aplicativo Universal do Windows?
• Baixe o Visual Studio (e o Windows). Se você precisar de uma mão, aprenda a se configurar.
• Também assumimos que você está usando o layout de janela padrão no Visual Studio. Caso altere o layout padrão, pode 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 Tipos de projeto para ver a lista de modelos de projeto UWP disponíveis para desenvolvedores de 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 do Windows. Consulte Configurar o Visual Studio para desenvolvimento UWP para obter mais informações.)

4. Escolha o modelo App em Branco UWP.

   Importante

   Certifique-se de selecionar o modelo Aplicação em Branco UWP. Se selecionar o modelo Aplicação UWP em Branco (.NET Nativo), este terá como alvo o tempo de execução do .NET Native, não o .NET 9. Os aplicativos destinados ao .NET Native não têm acesso aos recursos mais recentes do .NET e C# ou às 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 UWP de visualização para .NET 9 e AOT nativo.

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

   

   Observação

   Se esta for a primeira vez que você usa o Visual Studio, você pode ver uma caixa de diálogo Configurações solicitando que você habilite o modo de desenvolvedor. O modo de desenvolvedor é uma configuração especial que permite determinados recursos, como a 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 modo de programador, clique em Sime 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, então selecione OK para criar o projeto.

   

7. Quando seu 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 Bate-papo do Copiloto do GitHub para ver seus arquivos.

   

Embora a App UWP em Branco seja um modelo mínimo, ainda contém muitos ficheiros. Esses arquivos são essenciais para todos os aplicativos UWP que usam C#. Cada projeto UWP que você cria no Visual Studio os contém.

O que contém os ficheiros?

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. Os arquivos XAML são abertos em um modo de exibição dividido que mostra a superfície de design e o editor XAML.

App.xaml e App.xaml.cs

• App.xaml é o arquivo onde você declara 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 finalidade principal é inicializar os elementos declarados no arquivo XAML.
• App.xaml.cs é o ponto de entrada para seu 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 marcação XAML ou pode usar as ferramentas de design fornecidas pelo Visual Studio.
• MainPage.xaml.cs é a página "code-behind" associada à 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: 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 logótipos

• Ativos/Square150x150Logo.scale-200.png e Wide310x150Logo.scale-200.png representam seu aplicativo (tamanho Médio ou Amplo) no menu Iniciar.
• Assets/Square44x44Logo.png representa seu aplicativo na lista de aplicativos do menu Iniciar, barra de tarefas e gerenciador de tarefas.
• Assets/StoreLogo.png representa seu aplicativo na Microsoft Store.
• Assets/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

   Não verás uma vista de design quando trabalhas com o modelo Aplicação UWP em Branco que utiliza o .NET 9. Se quiser trabalhar com um projeto UWP com um modo de exibição de design XAML, você pode usar o modelo Aplicativo em Branco UWP (.NET Nativo). Como mencionado anteriormente, o modelo Aplicação em Branco UWP (.NET Nativo) é um pouco diferente do modelo Aplicação em Branco UWP, mas tem a mesma estrutura básica. A principal diferença é que o modelo Aplicativo em Branco UWP (.NET Native) usa o .NET Native para compilar seu aplicativo. Consulte Modernizar seu aplicativo UWP com suporte UWP de visualização para .NET 9 e AOT nativo para obter informações sobre as vantagens de usar o novo modelo .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 a partir 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 como ele se parece. Você pode depurar seu aplicativo na máquina 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 na máquina local. O menu do dispositivo de destino fornece várias opções para fazer a depuração da sua aplicação em dispositivos da família de dispositivos de computador.

   • HelloWorld (este é executado na máquina local)
   • WSL
   • Baixar novos emuladores...

4. Execute o aplicativo para ver o botão em ação. Para iniciar a depuração na máquina local, você pode executar o aplicativo selecionando Depurar | 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 aparece primeiro. A tela inicial é definida por uma imagem (SplashScreen.png) e uma cor de plano de fundo (especificada no arquivo de manifesto do seu aplicativo).

   O ecrã inicial desaparece e, em seguida, a aplicação é apresentada. Tem a seguinte aparência:

   

5. Prima a tecla Windows para abrir o menu Iniciar e, em seguida, selecione Tudo para mostrar todas as aplicações. 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 muito — por enquanto —, mas parabéns, construíste e implantaste a tua primeira aplicação UWP na tua máquina local!

6. Para parar a depuração:

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

   –ou–

   No menu Depuração, 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 seu botão).

1. Pare a execução da aplicação, se ainda não o tiver feito.

2. Comece a digitar Click no editor XAML e o Visual Studio mostrará uma lista de eventos possíveis. 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 button em seu código XAML.

   

   O editor XAML adiciona automaticamente o Click evento ao elemento button 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 tem dois parâmetros: object sender e RoutedEventArgs e.

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

   O Click evento é 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 na página code-behind, localizada em MainPage.xaml.cs. É aqui que as coisas ficam interessantes. Vamos mudá-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 algum texto para dizer. (Para obter mais informações sobre como usar o SpeechSynthesis, consulte o namespace SpeechSynthesis na documentação da API do Tempo de Execução do Windows (WinRT).)

Quando você executa o aplicativo e clica no botão, seu computador (ou telefone) vai literalmente dizer "Olá, Mundo!".

Resumo

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

Para saber como usar XAML para definir o layout dos controlos que a sua aplicação usará, experimente o tutorial de grid ou vá direto para as próximas etapas.

Conteúdo relacionado

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