Partilhar via

Crie um "Olá, Mundo!" Aplicativo UWP usando C++/WinRT

Este tópico orienta você na criação de um aplicativo "Olá, Mundo!" da Plataforma Universal do Windows (UWP) em C++/WinRT. A interface do usuário (UI) do aplicativo é definida usando Extensible Application Markup Language (XAML).

C++/WinRT é uma projeção de linguagem moderna C++17 totalmente em conformidade com os padrões para as APIs do Windows Runtime (WinRT). Para mais informações, bem como guias e exemplos de código, consulte a documentação do C++/WinRT . Um bom tópico para começar é Introdução ao C++/WinRT.

Configurar o Visual Studio para C++/WinRT

Para obter informações sobre como configurar o Visual Studio para desenvolvimento em C++/WinRT — incluindo a instalação e o uso da extensão do Visual Studio (VSIX) C++/WinRT e do pacote NuGet (que, juntos, fornecem suporte a modelo de projeto e compilação) — consulte Suporte do Visual Studio para C++/WinRT.

Para baixar o Visual Studio, consulte Downloads.

Para obter uma introdução ao XAML, consulte Visão geral do XAML

Criar um aplicativo em branco (HelloWorldCppWinRT)

Nosso primeiro aplicativo é um aplicativo "Olá, Mundo!" que demonstra alguns recursos básicos de interatividade, layout e estilos.

Comece criando um novo projeto no Microsoft Visual Studio. Crie um projeto de aplicação em branco (C++/WinRT) e nomeie-o HelloWorldCppWinRT. Certifique-se de que a opção Colocar solução e projeto no mesmo diretório está desmarcada. Direcione a versão mais recente geralmente disponível (ou seja, que não seja de pré-visualização) do SDK do Windows.

Em uma seção posterior deste tópico, você será direcionado para criar seu projeto (mas não crie até lá).

Sobre os arquivos do projeto

Normalmente, na pasta do projeto, cada arquivo .xaml (marcação XAML) tem um arquivo .idl, .h e .cpp correspondente. Juntos, esses arquivos são compilados em um tipo de página XAML.

Você pode modificar um arquivo de marcação XAML para criar elementos da interface do usuário e pode vincular esses elementos a fontes de dados (uma tarefa conhecida como associação de dados). Você modifica o .h, e .cpp arquivos (e às vezes o .idl arquivo) para adicionar lógica personalizada para sua página XAML — manipuladores de eventos, por exemplo.

Vamos examinar alguns dos arquivos do projeto.

  • App.idl, App.xaml, App.h e App.cpp. Esses arquivos representam a especialização do seu aplicativo da classe Windows::UI::Xaml::Application , que inclui o ponto de entrada do seu aplicativo. App.xaml não contém nenhuma marcação específica da página, mas você pode adicionar estilos de elementos da interface do usuário lá, bem como quaisquer outros elementos que você deseja que sejam acessíveis a partir de todas as páginas. Os .h arquivos e .cpp contêm manipuladores para vários eventos do ciclo de vida do aplicativo. Normalmente, você adiciona código personalizado para inicializar seu aplicativo quando ele é iniciado e para executar a limpeza quando ele é suspenso ou encerrado.
  • MainPage.idl, MainPage.xaml, MainPage.h e MainPage.cpp. Contém a marcação XAML e a implementação para o tipo de página principal (inicialização) padrão numa aplicação, que é a classe de runtime MainPage. O MainPage não tem suporte à navegação, mas fornece uma interface do usuário padrão e um manipulador de eventos para você começar.
  • pch.h e pch.cpp. Esses arquivos representam o arquivo de cabeçalho pré-compilado do seu projeto. No pch.h, inclua todos os arquivos de cabeçalho que não são alterados com frequência e, em seguida, inclua pch.h em outros arquivos no projeto.

Uma primeira olhada no código

Classes de tempo de execução

Como você deve saber, todas as classes em um aplicativo da Plataforma Universal do Windows (UWP) escrito em C# são tipos do Tempo de Execução do Windows. Mas quando o programador cria um tipo numa aplicação C++/WinRT, pode optar por que esse tipo seja um Tipo do Tempo de Execução do Windows ou uma classe/estrutura/enumeração regular de C++.

Qualquer tipo de página XAML no seu projeto precisa ser um tipo do Windows Runtime. Portanto, MainPage é um tipo Runtime do Windows. Especificamente, é uma classe de tempo de execução . Qualquer tipo consumido por uma página XAML também precisa ser um tipo Runtime do Windows. Quando está a escrever um componente de Tempo de Execução do Windows e deseja definir um tipo que possa ser utilizado por outra aplicação, então definirá um tipo de Tempo de Execução. Em outros casos, seu tipo pode ser um tipo C++ regular. Em geral, um tipo do Windows Runtime pode ser consumido usando qualquer linguagem do Windows Runtime.

Uma boa indicação de que um tipo é um tipo do Tempo de Execução do Windows é que ele está definido em Microsoft Interface Definition Language (MIDL) dentro de um ficheiro de Interface Definition Language (.idl). Tomemos a MainPage como exemplo.

// MainPage.idl
namespace HelloWorldCppWinRT
{
    [default_interface]
    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
    {
        MainPage();
        Int32 MyProperty;
    }
}

E aqui está a estrutura básica da implementação do MainPage classe de tempo de execução, e sua fábrica de ativação, como visto em MainPage.h.

// MainPage.h
...
namespace winrt::HelloWorldCppWinRT::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();

        int32_t MyProperty();
        void MyProperty(int32_t value);
        ...
    };
}

namespace winrt::HelloWorldCppWinRT::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

Para obter mais detalhes sobre se deves ou não criar uma classe de runtime para um determinado tipo, consulta o tópico Desenvolver APIs com C++/WinRT. E para obter mais informações sobre a conexão entre classes de tempo de execução e IDL (arquivos.idl), você pode ler e acompanhar o tópico controles XAML; vincular a uma propriedade C++/WinRT. Esse tópico percorre o processo de criação de uma nova classe de tempo de execução, cuja primeira etapa é adicionar um novo item Midl File (.idl) ao projeto.

Agora vamos adicionar alguma funcionalidade ao projeto HelloWorldCppWinRT.

Passo 1. Modificar sua página de inicialização

No Gerenciador de Soluções, abra MainPage.xaml para que você possa criar os controles que formam a interface do usuário (UI).

Elimine o StackPanel que já está lá, bem como o respetivo conteúdo. No seu lugar, cole o seguinte XAML.

<StackPanel x:Name="contentPanel" Margin="120,30,0,0">
    <TextBlock HorizontalAlignment="Left" Text="Hello, World!" FontSize="36"/>
    <TextBlock Text="What's your name?"/>
    <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
        <Button x:Name="inputButton" Content="Say &quot;Hello&quot;"/>
    </StackPanel>
    <TextBlock x:Name="greetingOutput"/>
</StackPanel>

Esse novo StackPanel tem um TextBlock que solicita o nome do usuário, um TextBox que recebe o nome do usuário, um Button, e outro elemento TextBlock .

Como excluímos o do botão chamado myButton, teremos que remover a referência a ele do código. Em MainPage.cpp, exclua a linha de código dentro da função MainPage::ClickHandler .

Neste ponto, você criou um aplicativo Universal do Windows muito básico. Para ver a aparência do aplicativo UWP, crie e execute o aplicativo.

Tela do aplicativo UWP, com controles

No aplicativo, você pode digitar na caixa de texto. Mas clicar no botão ainda não faz nada.

Passo 2. Adicionar um manipulador de eventos

No MainPage.xaml, localize o botão chamado inputButtone declare um manipulador de eventos para o evento ButtonBase::Click. A marcação para o Button agora deve ter esta aparência.

<Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="inputButton_Click"/>

Implemente o manipulador de eventos desta forma.

// MainPage.h
struct MainPage : MainPageT<MainPage>
{
    ...
    void inputButton_Click(
        winrt::Windows::Foundation::IInspectable const& sender,
        winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
};

// MainPage.cpp
namespace winrt::HelloWorldCppWinRT::implementation
{
    ...
    void MainPage::inputButton_Click(
        winrt::Windows::Foundation::IInspectable const& sender,
        winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        greetingOutput().Text(L"Hello, " + nameInput().Text() + L"!");
    }
}

Para saber mais, veja manipular eventos usando delegados.

A implementação recupera o nome do usuário da caixa de texto, usa-o para criar uma saudação e exibe isso no bloco de texto greetingOutput .

Compile e execute a aplicação. Digite seu nome na caixa de texto e clique no botão. O aplicativo exibe uma saudação personalizada.

Ecrã da aplicação com exibição de mensagens

Passo 3. Estilizar a página de inicialização

Escolher um tema

É fácil personalizar a aparência do seu aplicativo. Por padrão, seu aplicativo usa recursos que têm um estilo de cor clara. Os recursos do sistema também incluem um tema escuro.

Para experimentar o tema escuro, edite App.xamle adicione um valor para Application::RequestedTheme.

<Application
    ...
    RequestedTheme="Dark">

</Application>

Para aplicativos que exibem principalmente imagens ou vídeos, recomendamos o tema escuro; Para aplicativos que contêm muito texto, recomendamos o tema Light. Se você estiver usando um esquema de cores personalizado, use o tema que melhor combina com a aparência do seu aplicativo.

Observação

Um tema é aplicado quando seu aplicativo é iniciado. Ele não pode ser alterado enquanto o aplicativo está em execução.

Usar estilos de sistema

Nesta seção, alteraremos a aparência do texto (por exemplo, aumentar o tamanho da fonte).

No MainPage.xaml, encontre a opção "Qual é o seu nome?" TextBlock. Defina a sua propriedade Style como uma referência à chave de recurso do sistema BaseTextBlockStyle.

<TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>

BaseTextBlockStyle é a chave de um recurso que está definido no ResourceDictionary em \Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<version>\Generic\generic.xaml. Aqui estão os valores de propriedade que são definidos por esse estilo.

<Style x:Key="BaseTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="TextTrimming" Value="None" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="LineStackingStrategy" Value="MaxHeight" />
    <Setter Property="TextLineBounds" Value="Full" />
</Style>

Também em MainPage.xaml, encontre o TextBlock chamado greetingOutput. Defina o Style também para BaseTextBlockStyle. Se você criar e executar o aplicativo agora, verá que a aparência de ambos os blocos de texto foi alterada (por exemplo, o tamanho da fonte agora é maior).

Passo 4. Faça com que a interface do usuário se adapte a diferentes tamanhos de janela

Agora vamos fazer com que a interface do usuário se adapte dinamicamente a uma mudança de tamanho de janela, e para que tenha uma boa aparência em dispositivos com telas pequenas. Para fazer isso, você adicionará uma seção VisualStateManager ao MainPage.xaml. Você definirá diferentes estados visuais para diferentes tamanhos de janela e, em seguida, definirá as propriedades a serem aplicadas para cada um desses estados visuais.

Ajustar o layout da interface do usuário

Adicione este bloco de XAML como o primeiro elemento filho do elemento raíz StackPanel.

<StackPanel ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="wideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="641" />
                </VisualState.StateTriggers>
            </VisualState>
            <VisualState x:Name="narrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="contentPanel.Margin" Value="20,30,0,0"/>
                    <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                    <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    ...
</StackPanel>

Compile e execute a aplicação. Observe que a interface do utilizador tem a mesma aparência de antes, até que a janela seja redimensionada para menos de 641 píxeis independentes do dispositivo (DIPs). Nesse ponto, o narrowState estado visual é aplicado e, juntamente com isso, todos os configuradores de propriedade definidos para aquele estado.

O VisualState chamado wideState tem um AdaptiveTrigger com sua propriedade MinWindowWidth definida como 641. Isto significa que o estado deve ser aplicado apenas quando a largura da janela não é inferior ao mínimo de 641 DIPs. Não é definido nenhum objeto Setter para este estado, portanto, ele usa as propriedades de layout que você definiu no XAML para o conteúdo da página.

O segundo VisualState, narrowState, tem um AdaptiveTrigger com sua propriedade MinWindowWidth definida como 0. Esse estado é aplicado quando a largura da janela é maior que 0, mas menor que 641 DIPs. Em exatamente 641 DIPs, wideState está em vigor. No narrowState, você define objetos Setter para alterar as propriedades de layout dos controles na interface do usuário.

  • Você reduz a margem esquerda do elemento contentPanel de 120 para 20.
  • Alterar o de orientação do elemento inputPanel de horizontal para vertical.
  • Você adiciona uma margem superior de 4 DIPs ao elemento inputButton.

Resumo

Este passo a passo mostrou como adicionar conteúdo a um aplicativo Universal do Windows, como adicionar interatividade e como alterar a aparência da interface do usuário.

  • Last updated on