Crie um aplicativo Hello World usando C# e WinUI 3 / Windows App SDK

Neste tutorial, usaremos o Visual Studio 2022 e o WinUI 3 / Windows App SDK para criar um aplicativo da área de trabalho do Windows que exibe "Hello world!" quando iniciado:

Este tutorial destina-se a iniciantes e não faz suposições sobre sua familiaridade com o desenvolvimento da área de trabalho do Windows.

Pré-requisitos

Este tutorial usa o Visual Studio e se baseia no modelo de aplicativo em branco WinUI 3. Para se configurar, siga as instruções em Introdução ao WinUI. Você instalará o Visual Studio, configurá-lo-á para desenvolver aplicativos com WinUI, criará o projeto Hello World e garantirá que você tenha a versão mais recente do WinUI.

Quando tiver feito isso, volte aqui para saber mais sobre o projeto Hello World e fazer algumas atualizações nele.

Revisar o projeto de aplicativo em branco

Os modelos de projeto WinUI no Visual Studio contêm tudo o que você precisa para criar e executar seu aplicativo. O modelo de Aplicação em Branco cria uma janela com um botão interativo que se apresenta assim quando o executa no modo de depuração.

Clique no botão Click Me para uma demonstração de como manipular eventos:

Nesse caso, um Button evento Click do controle está vinculado ao manipulador de eventos myButton_Click localizado em MainWindow.xaml.cs:

Embora MainWindow.xaml.cs contenha a lógica de negócios preocupações da nossa janela principal na forma de um arquivo code-behind, sua apresentação preocupações vivem em MainWindow.xaml:

Essa separação entre a lógica de negócios e as preocupações de apresentação permite a ligação de dados e eventos à interface de utilizador da sua aplicação, seguindo um padrão consistente de desenvolvimento de aplicações.

A estrutura de arquivos do projeto

Vamos revisar a estrutura de arquivos do projeto antes de fazer alterações no código. Isso está localizado no Solution Explorer.

Atualmente, a estrutura de arquivos do projeto tem esta aparência:

Esta tabela descreve os ficheiros, começando por cima e trabalhando para baixo:

Exibir "Olá mundo!"

Para exibir "Olá mundo!" em vez do botão "Clique em mim", navegue até MainWindow.xaml. Você deve ver a marcação XAML de um controle StackPanel:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>

Vamos atualizar o controle StackPanel para exibir Hello world! com texto vermelho:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
</StackPanel>

Se você tentar executar seu aplicativo agora, o Visual Studio lançará um erro nos moldes de The name 'myButton' does not exist in the current context. Isso ocorre porque atualizamos a camada de apresentação com um novo controle, mas não atualizamos a lógica de negócios do controle antigo em nosso arquivo code-behind.

Navegue até MainWindow.xaml.cs e exclua o manipulador de eventos myButton_Click. Podemos fazer isso porque substituímos o botão Click me interativo por texto estático Hello world!. A lógica de negócios da nossa janela principal agora deve ter esta aparência:

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    // ↓ you can delete this ↓
    //private void myButton_Click(object sender, RoutedEventArgs e)
    //{
    //    myButton.Content = "Clicked";
    //}
}

Redefina seu aplicativo selecionando Build > Rebuild Solution no menu ou pressionando Ctrl + Shift + B. Em seguida, inicie seu aplicativo novamente clicando no botão "Iniciar" na barra de ferramentas do Visual Studio ou pressionando F5.

O aplicativo será atualizado e você verá uma Hello world!vermelha:

Atualizar a barra de título do aplicativo

Adicione this.Title = "Hello world!"; ao ficheiro code-behind MainWindow.xaml.cs.

public MainWindow()
{
    this.InitializeComponent();
    this.Title = "Hello world!"; // <- this is new
}

Se reiniciar a aplicação, deverá ver Hello world! no corpo e na barra de título:

Parabéns;! Você criou seu primeiro aplicativo Windows App SDK / WinUI 3.

Recapitulação

Veja o que você realizou neste tutorial:

1. Você começou com o modelo de projeto do Visual Studio.
2. Você experimentou um manipulador de eventos que vinculou a de eventos de um controle de a uma atualização da interface do usuário.
3. Você se familiarizou com a convenção de separar as preocupações de apresentação de lógica de negócios usando arquivos de marcação XAML fortemente acoplados e arquivos code-behind C#, respectivamente.
4. Você revisou a estrutura de arquivodo projeto padrão WinUI 3 .
5. Você modificou a camada de apresentação (marcação XAML) e a lógica de negócios (code-behind) para dar suporte a um novo controle TextBlock dentro de um StackPanel.
6. Você revisou os documentos de referência para melhor compreender as propriedades do controlo StackPanel.
7. Você atualizou a barra de título da sua janela principal.

Arquivos de código completos

<!-- MainWindow.xaml -->
<Window
    x:Class="Hello_World.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
    </StackPanel>
</Window>

// MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.Title = "Hello world!";
        }
    }
}

<!-- App.xaml -->
<Application
    x:Class="Hello_World.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>

// App.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using Microsoft.UI.Xaml.Shapes;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public partial class App : Application
    {
        public App()
        {
            this.InitializeComponent();
        }

        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
        {
            m_window = new MainWindow();
            m_window.Activate();
        }

        private Window m_window;
    }
}

Perguntas Frequentes

P: O que significa "embalado"?

Os aplicativos do Windows podem ser entregues aos usuários finais usando uma variedade de formatos de empacotamento de aplicativos. Ao trabalhar com WinUI e SDK de Aplicativos Windows, aplicativos empacotados usam o MSIX para agrupar seu aplicativo de modo a oferecer instalação e atualizações convenientes aos usuários finais. Visite Arquitetura de implantação e visão geral de aplicativos dependentes de estrutura para saber mais.

P: Posso usar o VS Code para criar aplicativos WinUI?

Embora tecnicamente possível, é altamente recomendável usar o Visual Studio 2022 para criar aplicativos de área de trabalho com WinUI e Windows App SDK. Consulte as FAQ do desenvolvedor do Windows para obter mais informações.

P: Posso usar C++ para criar aplicativos WinUI?

Sim! Para obter mais informações, consulte Introdução ao C++/WinRT.

Relacionados

• Aplicações de exemplo para o desenvolvimento do Windows
• Perguntas Frequentes para Desenvolvedores do Windows
• Glossário para Desenvolvedores do Windows
• Práticas recomendadas de desenvolvimento do Windows