Partilhar via

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

Neste tutorial, como uma introdução ao ambiente de desenvolvimento integrado (IDE) do Visual Studio, você cria um aplicativo "Hello World" que é executado em qualquer dispositivo Windows 10 ou posterior. Para fazer isso, use um modelo de projeto da Plataforma Universal do Windows (UWP), Extensible Application Markup Language (XAML) e a linguagem de programação C#.

Observação

Se você estiver satisfeito com sua funcionalidade atual na Plataforma Universal do Windows (UWP), não há necessidade de migrar seu tipo de projeto para o SDK de Aplicativo Windows. WinUI 2.x e o SDK do Windows oferecem suporte a tipos de projeto UWP. Se você quiser começar a usar a WinUI 3 e o SDK de Aplicativos Windows, siga as etapas no tutorial SDK de Aplicativos Windows.

Neste tutorial, você:

  • Criar um projeto
  • Criar uma aplicação
  • Execute o aplicativo

Pré-requisitos

Precisas:

  • 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 desenvolver um aplicativo UWP. Para verificar ou instalar uma carga de trabalho no Visual Studio, selecione Ferramentas>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 "Alterar Cargas de Trabalho ou Componentes Individuais".

    Na guia Cargas de Trabalho do Visual Studio Installer, selecione as seguintes cargas de trabalho e componentes:

    • 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 de aplicativos 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 SDK do Windows 11 (10.0.26100.0).

    • Este tutorial requer o modelo de projeto Aplicativo em Branco da UWP .

    Observação

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

Criar um projeto

Primeiro, crie um projeto da Plataforma Universal do Windows. O tipo de projeto vem com todos os arquivos de modelo que você precisa, antes mesmo de adicionar qualquer coisa!

  1. Abra o Visual Studio e, na janela Iniciar, escolha Criar um novo projeto.

  2. Na tela Criar um novo projeto , digite Universal Windows na caixa de pesquisa, escolha o modelo C# para Aplicativo em Branco (Universal Windows) ou Aplicativo em Branco UWP no Visual Studio 2022 17.10 ou posterior e escolha Avançar.

    Captura de ecrã da caixa de diálogo 'Criar um novo projeto' com 'Universal Windows' introduzido na caixa de pesquisa e o modelo de projeto 'App em Branco (Universal Windows)' realçado.

  3. Dê um nome ao projeto, HelloWorlde escolha Criar.

    Captura de ecrã da caixa de diálogo 'Configurar o seu novo projeto' com 'HelloWorld' introduzido no campo Nome do projeto.

  4. Aceite as configurações padrão Versão de destino e Versão mínima na caixa de diálogo Novo Projeto da Plataforma Universal do Windows.

    Captura de tela da caixa de diálogo Novo Projeto da Plataforma Universal do Windows mostrando as configurações padrão da versão de destino e da versão mínima.

    Observação

    Se esta for a primeira vez que você usa o Visual Studio para criar um aplicativo UWP, a caixa de diálogo Habilitar Modo de Desenvolvedor para Windows será exibida. Selecione configurações para desenvolvedores para abrir Configurações. Ative modo de desenvolvedore, em seguida, escolha Sim.

    Captura de tela mostrando a caixa de diálogo Configurações UWP com a opção para habilitar o Modo de Desenvolvedor.

    O Visual Studio instala um pacote adicional do Modo de Desenvolvedor para você. Quando a instalação do pacote estiver concluída, feche a caixa de diálogo Configurações .

Criar o aplicativo

É hora de começar a desenvolver. Adicione um controle de botão, adicione uma ação ao botão e, em seguida, inicie o aplicativo "Hello World" para ver como ele se parece.

Adicionar um botão na tela Design

  1. No Gerenciador de Soluções, clique duas vezes em MainPage.xaml para abrir um modo de exibição dividido.

    Captura de tela da janela Gerenciador de Soluções mostrando as propriedades, referências, ativos e arquivos no projeto HelloWorld. O arquivo MainPage.xaml está selecionado.

    Há dois painéis: o Designer XAML, que inclui uma tela de design, e o Editor XAML, onde você pode adicionar ou alterar código.

    Captura de tela mostrando MainPage.xaml aberto no IDE do Visual Studio. O painel Designer XAML mostra uma superfície de design em branco e o painel Editor XAML mostra parte do código XAML.

  2. Escolha Caixa de Ferramentas para abrir a janela do submenu Caixa de Ferramentas.

    Captura de tela mostrando a aba 'Caixa de Ferramentas' realçada no lado esquerdo do Painel do Designer XAML.

    Se não vir a opção Caixa de Ferramentas, pode abri-la a partir da barra de menus. Para tal, escolha Exibir>Barra de Ferramentas. Ou pressione Ctrl+Alt+X.

  3. Selecione o ícone Pin para encaixar a janela Caixa de Ferramentas.

    Captura de ecrã a mostrar o ícone Pin realçado na barra superior da janela Caixa de Ferramentas.

  4. Selecione o botão controle e arraste-o para a tela de design.

    Captura de ecrã mostrando 'Botão' realçado na janela da Caixa de Ferramentas e um botão de controle na tela de design.

    Se examinares o código no Editor XAML , verás que o Botão também aparece lá:

    Captura de tela mostrando o código do Button recém-adicionado realçado no editor XAML.

Adicionar um rótulo ao botão

  1. No Editor XAML, altere o Button Content valor do Botão para Hello World!

    Captura de tela mostrando o código XAML para o Button no editor XAML com o valor da propriedade Content alterado para 'Hello World!'.

  2. Observe que o botão no do Designer XAML também muda.

    Captura de tela mostrando o controle Button na tela do Designer XAML com o rótulo do botão alterado para Hello World!

Adicionar um manipulador de eventos

Um manipulador de eventos parece complicado, mas é apenas outro nome para o código que é chamado quando um evento acontece. Neste caso, adiciona uma ação ao Hello World! botão.

  1. Clique duas vezes no controle de botão na tela de design.

  2. Edite o código do manipulador de eventos na página code-behind, localizada em MainPage.xaml.cs.

    Aqui é onde as coisas ficam interessantes. O manipulador de eventos padrão tem esta aparência:

    Captura de tela mostrando o código C# para o manipulador de eventos Button_Click padrão.

    Mude-o, para que fique assim:

    Captura de tela mostrando o código C# para o novo manipulador de eventos async Button_Click.

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

O que acabamos de fazer?

O código usa algumas APIs do Windows para criar um objeto de síntese de fala e, em seguida, dá-lhe algum texto para dizer. Para obter mais informações sobre como usar o SpeechSynthesis, consulte System.Speech.Synthesis.

Execute o aplicativo

É hora de criar, implantar e iniciar o aplicativo UWP "Hello World" para ver como ele parece e soa. Veja como.

  1. Use o botão Reproduzir (ele tem o texto Máquina Local) para iniciar o aplicativo na máquina local.

    Captura de ecrã a mostrar a caixa pendente aberta junto ao botão Reproduzir com 'Máquina Local' selecionada.

    Como alternativa, você pode escolher Depurar>Iniciar a Depuração na barra de menus ou pressionar F5 para iniciar seu aplicativo.

  2. Veja a sua aplicação, que aparece logo depois que um ecrã inicial desaparece. O aplicativo deve ser semelhante a esta imagem:

    Captura de tela mostrando o aplicativo UWP 'Hello World' em execução.

  3. Selecione o botão Hello World.

    Seu dispositivo Windows 10 ou posterior literalmente diz: "Olá, mundo!"

  4. Para fechar a aplicação, selecione o botão Parar Depuração na barra de ferramentas. Como alternativa, escolha Depurar>Parar de depurar na barra de menus ou pressione Shift+F5.

Conteúdo relacionado

Próximo passo

Parabéns por concluir este tutorial! Esperamos que você tenha aprendido algumas noções básicas sobre UWP e o IDE do Visual Studio. Para saber mais, continue com o seguinte tutorial:

Criar uma interface de usuário

  • Last updated on