Crie uma aplicação UWP "Olá, Mundo!" (XAML)

Este tutorial ensina-te a usar XAML e C# com Native AOT (Ahead-of-Time) para criar uma simples aplicação "Olá, Mundo!" para a Plataforma Universal do Windows (UWP) no Windows. Com um único projeto em Microsoft Visual Studio, pode construir uma aplicação que corra em todas as versões suportadas do 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 em sua página inicial.
• Executa o projeto no ambiente de trabalho local no Visual Studio.
• Use um SpeechSynthesizer para fazer o aplicativo falar quando você pressiona um botão.

Pré-requisitos

• O que é uma aplicação Universal Windows?
• Download Visual Studio (e Windows). Se você precisar de uma mão, aprenda a se configurar.
• Também assumimos que está a usar o layout padrão da janela no Visual Studio. Caso altere o layout padrão, pode redefini-lo no menu Janela usando o comando Redefinir Layout da Janela.

Passo 1: Criar um novo projeto no Visual Studio

1. Lançar o Visual Studio.

2. No menu File, selecione New > Project para abrir o diálogo New Project.

3. Filtre a lista de templates disponíveis escolhendo C# da lista suspensa Languages e UWP da lista suspensa Project types para ver a lista de templates de project UWP disponíveis para programadores de C#.

   

   (Se não vir nenhum modelo UWP, pode estar a perder os componentes para criar aplicações UWP. Pode repetir o processo de instalação e adicionar suporte a UWP abrindo o Visual Studio Instalador no seu menu Windows Iniciar. Consulte Configurar Visual Studio para desenvolvimento UWP para mais informações.)

4. Escolha o modelo App em Branco UWP.

   Importante

   O modelo UWP Blank App é o padrão e direciona-se para as .NET mais recentes com AOT nativo. Se vires um template UWP Blank App (.NET Native), esse é um template legado direcionado para o tempo de execução nativo .NET mais antigo. As aplicações que usam o modelo .NET moderno têm acesso às funcionalidades mais recentes de .NET e C#, desempenho melhorado e melhores ferramentas. Para mais informações sobre as diferenças, consulte Modernize a aplicação UWP com .NET e Native AOT.

5. Selecione Next e introduza "HelloWorld" como nome Project. Selecione Criar.

   

   Observação

   Se for a tua primeira utilização do Visual Studio, podes ver um diálogo de Configurações a pedir para ativares Modo de programador. 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 o seu novo projeto abre, os seus ficheiros são exibidos no painel Explorador de Soluções à direita. Pode ser necessário escolher o separador Explorador de Soluções em vez dos separadores Properties ou GitHub Copilot Chat para ver os seus ficheiros.

   

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#. Todos os projetos UWP que crias no Visual Studio contêm-nos.

O que contém os ficheiros?

Para visualizar e editar um ficheiro no seu projeto, clique duas vezes no ficheiro no Explorador 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. É gerado pelo Visual Studio, e o seu principal objetivo é inicializar os elementos declarados no ficheiro 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. 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, estes dois ficheiros definem uma nova classe chamada MainPage, que herda de Page, no espaço de nomes HelloWorld.

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 a sua aplicação 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 vais ver uma vista de design ao trabalhar com o template UWP Blank App que usa .NET moderno. Se quiseres trabalhar com um projeto UWP com uma vista de design XAML, podes usar o modelo UWP Blank App (.NET Native) em vez disso. Como já foi referido, o modelo UWP Blank App (.NET Native<)/c0> é 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) utiliza .NET Native para compilar a tua aplicação. Consulte Modernize your UWP app com .NET e Native AOT para informações sobre as vantagens de usar o template moderno do .NET.

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 alvo 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. Pressiona a tecla Windows para abrir o menu Start, depois seleciona Todos 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. Começa a escrever Click no editor XAML, e Visual Studio mostrar-te-á 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 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?

Este código usa algumas APIs do Windows para criar um objeto de síntese de voz e depois dá-lhe algum texto para dizer. (Para mais informações sobre a utilização de SpeechSynthesis, consulte o espaço de nomes SpeechSynthesis na documentação da API Windows Runtime (WinRT).)

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

Resumo

Parabéns, criou a sua primeira aplicação UWP para Windows com .NET moderno!

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