Partilhar via


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

Observação

Se você estiver satisfeito com a funcionalidade atual do UWP (Plataforma Universal do Windows), não será necessário migrar o tipo de projeto para o SDK do Aplicativo Windows. A WinUI 2.x e o SDK do Windows dão suporte a tipos de projeto UWP. Caso deseje começar a usar o WinUI 3 e o SDK do Aplicativo Windows, siga as etapas descritas no tutorial do SDK do Aplicativo Windows.

Nesta introdução ao IDE (ambiente de desenvolvimento integrado) do Visual Studio, você criará um aplicativo "Olá, Mundo" que poderá ser executado em qualquer dispositivo Windows 10 ou posterior. Para fazer isso, você usará um modelo de projeto da UWP (Plataforma Universal do Windows), a linguagem XAML e a linguagem de programação C#.

Se você ainda não tiver instalado o Visual Studio, acesse a página Downloads do Visual Studio para instalá-lo gratuitamente.

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 você adicionar alguma coisa!

  1. Abra o Visual Studio e, na janela de início, selecione Criar um novo projeto.

  2. Na janela Criar um novo projeto, insira Universal Windows na caixa de pesquisa, escolha o modelo C # para Aplicativo em Branco (Universal Windows) e, em seguida, escolha Próximo.

    Screenshot of the 'Create a new project' dialog with 'universal windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Observação

    Se você não vir o modelo de projeto Aplicativo em Branco (Universal Windows) , clique no link Instalar mais ferramentas e recursos.

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    O Instalador do Visual Studio é iniciado. Escolha a carga de trabalho Desenvolvimento na Plataforma Universal do Windows e, em seguida, selecione Modificar.

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform development workload.

  3. Dê um nome ao projeto, OláMundo, e escolha Criar.

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

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

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    Observação

    Se esta for a primeira vez que você usa o Visual Studio para criar um aplicativo UWP, uma caixa de diálogo Configurações poderá aparecer. Selecione Modo do Desenvolvedor e, em seguida, escolha Sim.

    Screenshot showing the UWP Settings dialog box with the option for enabling Developer Mode.

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

  1. Abra o Visual Studio e, na janela de início, selecione Criar um novo projeto.

  2. Na janela Criar um novo projeto, insira Universal Windows na caixa de pesquisa, escolha o modelo C # para Aplicativo em Branco (Universal Windows) e, em seguida, escolha Próximo.

    Screenshot of the 'Create a new project' dialog with 'Universal Windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Observação

    Se você não vir o modelo de projeto Aplicativo em Branco (Universal Windows) , clique no link Instalar mais ferramentas e recursos.

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    O Instalador do Visual Studio é iniciado. Escolha a carga de trabalho Desenvolvimento na Plataforma Universal do Windows e, em seguida, selecione Modificar.

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform development workload.

  3. Dê um nome ao projeto, OláMundo, e escolha Criar.

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

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

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    Observação

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

    Screenshot showing the UWP Settings dialog box with the option for enabling Developer Mode.

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

Criar o aplicativo

É hora de começar a desenvolver. Você vai adicionar um controle de botão, adicionar uma ação para o botão e, em seguida, iniciar o aplicativo "Olá, Mundo" para ver sua aparência.

Adicionar um botão à tela de Design

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

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainPage.xaml is selected.

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

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

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

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

    (Se você não vir a opção Caixa de Ferramentas, poderá abri-la na barra de menus. Para fazer isso, escolha Exibir>Barra de Ferramentas. Ou pressione Ctrl+Alt+X.)

  3. Clique no ícone Fixar para encaixar a janela Caixa de Ferramentas.

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

  4. Clique no controle de Botão e, em seguida, arraste-o para a tela de design.

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

    Se você examinar o código no Editor XAML, verá que o botão também foi adicionado lá:

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

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

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainPage.xaml is selected.

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

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

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

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

    (Se você não vir a opção Caixa de Ferramentas, poderá abri-la na barra de menus. Para fazer isso, escolha Exibir>Barra de Ferramentas. Ou pressione Ctrl+Alt+X.)

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

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

  4. Selecione o controle de Botão e, em seguida, arraste-o para a tela de design.

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

    Se você examinar o código no Editor XAML, verá que o botão também foi adicionado lá:

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

Adicionar um rótulo para o botão

  1. No Editor de XAML, altere o valor de Conteúdo do Botão de "Botão" para "Olá, Mundo!".

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

  2. Observe que o botão no Designer XAML muda muito.

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to 'Hello World!'.

  1. No Editor de XAML, altere o valor de Conteúdo do Botão de "Botão" para "Olá, Mundo!".

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

  2. Observe que o botão no Designer XAML muda muito.

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to 'Hello World!'.

Adicionar um manipulador de eventos

O termo "Manipulador de eventos" parece complicado, mas é apenas outro nome para o código que é chamado quando ocorre um evento. Nesse caso, ele adiciona uma ação ao botão "Olá, Mundo!".

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

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

    É aqui que as coisas ficam interessantes. O manipulador de eventos padrão tem esta aparência:

    Screenshot showing the C# code for the default Button_Click event handler.

    Vamos alterá-la para que ela tenha esta aparência:

    Screenshot showing the C# code for the new async Button_Click event handler.

    Aqui está o código a ser copiado e colado:

    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();
    }
    
  1. Clique duas vezes no controle de botão na tela de design.

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

    É aqui que as coisas ficam interessantes. O manipulador de eventos padrão tem esta aparência:

    Screenshot showing the C# code for the default Button_Click event handler.

    Vamos alterá-la para que ela tenha esta aparência:

    Screenshot showing the C# code for the new async Button_Click event handler.

    Aqui está o código a ser copiado e colado:

    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 sintetização de voz e, em seguida, fornece um texto para ele dizer. (Para obter mais informações de como usar SpeechSynthesis, confira System.Speech.Synthesis.)

Executar o aplicativo

É hora de criar, implantar e iniciar o aplicativo UWP "Olá, Mundo" para ver como ele é e como ele soa. Veja aqui como fazer isso.

  1. Use o botão Play (ele tem o texto Computador Local) para iniciar o aplicativo no computador local.

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' selected.

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

  2. Veja o aplicativo, que aparece logo depois que uma tela inicial desaparece. O aplicativo deve ser semelhante a este:

    Screenshot showing the running UWP 'Hello World' application.

  3. Clique no botão Olá, Mundo.

    Seu dispositivo Windows 10 ou posterior dirá literalmente "Olá, Mundo!"

  4. Para fechar o aplicativo, clique no botão Parar Depuração na barra de ferramentas. (Como alternativa, escolha Depurar>Parar depuração na barra de menus ou pressione Shift+F5.)

É hora de criar, implantar e iniciar o aplicativo UWP "Olá, Mundo" para ver como ele é e como ele soa. Veja aqui como fazer isso.

  1. Use o botão Play (ele tem o texto Computador Local) para iniciar o aplicativo no computador local.

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' selected.

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

  2. Veja o aplicativo, que aparece logo depois que uma tela inicial desaparece. O aplicativo deve ser semelhante a esta imagem:

    Screenshot showing the running UWP 'Hello World' application.

  3. Selecione o botão Olá, Mundo.

    Seu dispositivo Windows 10 ou posterior dirá literalmente "Olá, Mundo!".

  4. Para fechar o aplicativo, selecione o botão Parar Depuração na barra de ferramentas. (Como alternativa, escolha Depurar>Parar depuração na barra de menus ou pressione Shift+F5.)

Próximas etapas

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

Confira também