Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Importante
Este tutorial usa C++/CX. A Microsoft lançou C++/WinRT: uma projeção de linguagem C++17 moderna totalmente padrão para APIs do Tempo de Execução do Windows (WinRT). Para obter mais informações sobre essa linguagem, consulte C++/WinRT.
Com o Microsoft Visual Studio, você pode usar C++/CX para desenvolver um aplicativo executado no Windows com uma interface do usuário definida em Extensible Application Markup Language (XAML).
Observação
Este tutorial usa o Visual Studio Community 2019. Se você estiver usando uma versão diferente do Visual Studio, ele pode parecer um pouco diferente para você.
Antes de começar
- Para concluir este tutorial, você deve usar o Visual Studio Community ou uma das versões não comunitárias do Visual Studio em um computador que esteja executando o Windows. Para fazer o download, consulte Obter as ferramentas.
- Para acompanhar, você deve ter uma compreensão básica de C++/CX, XAML e os conceitos na visão geral de XAML.
- Para acompanhar, você deve usar o layout de janela padrão no Visual Studio. Para restaurar o layout para o padrão, na barra de menus, escolha Janela>Restaurar layout da janela.
Comparando aplicativos da área de trabalho C++ com aplicativos UWP
Se você vem de uma experiência em programação de área de trabalho do Windows em C++, provavelmente descobrirá que alguns aspetos da escrita de aplicativos para a UWP são familiares, mas outros aspetos exigem algum aprendizado.
O que é o mesmo?
Você pode usar a STL, a CRT (com algumas exceções) e qualquer outra biblioteca C++, desde que o código chame apenas funções do Windows acessíveis a partir do ambiente do Tempo de Execução do Windows.
Se você estiver acostumado com superfícies de design visual, ainda poderá usar o designer integrado ao Microsoft Visual Studio ou poderá usar o Blend for Visual Studio, mais completo. Se você estiver acostumado a codificar a interface do usuário manualmente, poderá codificar manualmente seu XAML.
Você ainda está criando aplicativos que usam tipos de sistema operacional Windows e seus próprios tipos personalizados.
Você ainda está usando o depurador, o criador de perfis e outras ferramentas de desenvolvimento do Visual Studio.
Você ainda está criando aplicativos que são compilados para código de máquina nativo pelo compilador Visual C++. Os aplicativos UWP em C++/CX não são executados em um ambiente de tempo de execução gerenciado.
O que há de novo?
Os princípios de design para aplicativos UWP são muito diferentes daqueles para aplicativos de área de trabalho. Bordas de janelas, rótulos, caixas de diálogo, etc., são menos destacados. O conteúdo está acima de tudo. Grandes aplicativos UWP incorporam esses princípios desde o início do estágio de planejamento.
Você está usando XAML para definir a interface do usuário inteira. A separação entre a interface do usuário e a lógica principal do programa é muito mais clara em um aplicativo UWP do que em um aplicativo MFC ou Win32. Outras pessoas podem trabalhar na aparência da interface do usuário no arquivo XAML enquanto você está trabalhando no comportamento no arquivo de código.
Você está programando principalmente em uma API nova, fácil de navegar e orientada a objetos, o Tempo de Execução do Windows, embora em dispositivos Windows o Win32 ainda esteja disponível para algumas funcionalidades.
Você usa C++/CX para consumir e criar objetos do Tempo de Execução do Windows. O C++/CX permite o tratamento de exceções em C++, delegados, eventos e contagem automática de referência de objetos criados dinamicamente. Quando você usa C++/CX, os detalhes da arquitetura COM e do Windows subjacente ficam ocultos do código do aplicativo. Para obter mais informações, consulte Referência da Linguagem C++/CX.
Seu aplicativo é compilado em um pacote que também contém metadados sobre os tipos que seu aplicativo contém, os recursos que ele usa e os recursos que ele requer (acesso a arquivos, acesso à Internet, acesso à câmera e assim por diante).
Na Microsoft Store e na Loja do Windows Phone, seu aplicativo é verificado como seguro por um processo de certificação e pode ser descoberto por milhões de clientes em potencial.
Aplicativo Hello World Store em C++/CX
Nosso primeiro aplicativo é um "Hello World" que demonstra alguns recursos básicos de interatividade, layout e estilos. Criaremos um aplicativo a partir do modelo de projeto de aplicativo Universal do Windows. Se você já desenvolveu aplicativos para Windows 8.1 e Windows Phone 8.1 antes, talvez se lembre de que precisava ter três projetos no Visual Studio, um para o aplicativo do Windows, um para o aplicativo do telefone e outro com código compartilhado. A Plataforma Universal do Windows (UWP) torna possível ter apenas um projeto, que é executado em todos os dispositivos, incluindo computadores desktop e laptops com Windows, dispositivos como tablets, telefones celulares, dispositivos VR e assim por diante.
Vamos começar com o básico:
Como criar um projeto Universal do Windows no Visual Studio.
Como entender os projetos e arquivos que são criados.
Como entender as extensões em extensões de componente do Visual C++ (C++/CX) e quando usá-las.
Primeiro, crie uma solução no Visual Studio
No Visual Studio, na barra de menus, escolha Arquivo>Novo>Projeto....
Na caixa de diálogo Criar um novo projeto, selecione Aplicação em Branco (Universal Windows - C++/CX). Se não vir esta opção, certifique-se de que tem as Ferramentas Universais de Desenvolvimento de Aplicações Windows instaladas. Consulte Configurar para obter mais informações.
Escolha Avançar e insira um nome para o projeto. Vamos chamá-lo de HelloWorld.
Escolha o botão Criar.
Observação
Se esta for a primeira vez que você usa o Visual Studio, você pode ver uma caixa de diálogo Configurações solicitando que você habilite o modo de desenvolvedor. 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.
Seus arquivos de projeto são criados.
Antes de continuarmos, vamos ver o que está na solução.
Sobre os arquivos do projeto
Cada arquivo .xaml em uma pasta de projeto tem um arquivo .xaml.h correspondente e um arquivo .xaml.cpp na mesma pasta e um arquivo .g e um arquivo .g.hpp na pasta Arquivos Gerados, que está no disco, mas não faz parte do projeto. Você modifica os arquivos XAML para criar elementos da interface do usuário e conectá-los a fontes de dados (DataBinding). Você modifica os arquivos .h e .cpp para adicionar lógica personalizada para manipuladores de eventos. Os arquivos gerados automaticamente representam a transformação da marcação XAML em C++/CX. Não modifique esses arquivos, mas você pode estudá-los para entender melhor como o code-behind funciona. Basicamente, o arquivo gerado contém uma definição de classe parcial para um elemento raiz XAML; Essa classe é a mesma classe que você modifica nos arquivos *.xaml.h e .cpp. Os arquivos gerados declaram os elementos filho da interface do usuário XAML como membros de classe para que você possa fazer referência a eles no código que você escreve. No momento da compilação, o código gerado e seu código são mesclados em uma definição de classe completa e, em seguida, compilados.
Vamos examinar primeiro os arquivos do projeto.
- App.xaml, App.xaml.h, App.xaml.cpp: Represente o objeto Application, que é o ponto de entrada de um aplicativo. App.xaml não contém nenhuma marcação de interface do usuário específica da página, mas você pode adicionar estilos de interface do usuário e outros elementos que deseja que sejam acessíveis a partir de qualquer página. Os arquivos code-behind contêm manipuladores para os eventos OnLaunched e OnSuspending. Normalmente, você adiciona código personalizado aqui para inicializar seu aplicativo quando ele é iniciado e executar a limpeza quando ele é suspenso ou encerrado.
- MainPage.xaml, MainPage.xaml.h, MainPage.xaml.cpp: Contêm a marcação XAML e o code-behind para a página "iniciar" padrão em uma aplicação. Não tem suporte de navegação ou controles integrados.
- pch.h, pch.cpp: Um arquivo de cabeçalho pré-compilado e o arquivo que o inclui em seu projeto. Em pch.h, você pode incluir quaisquer cabeçalhos que não mudam com frequência e são incluídos em outros arquivos na solução.
- Package.appxmanifest: Um arquivo XML que descreve os recursos do dispositivo que seu aplicativo requer e as informações da versão do aplicativo e outros metadados. Para abrir este arquivo no Designer de Manifesto, basta clicar duas vezes nele.
- HelloWorld_TemporaryKey.pfx: Uma chave que permite a implantação do aplicativo nesta máquina, a partir do Visual Studio.
Uma primeira olhada no código
Se você examinar o código em App.xaml.h, App.xaml.cpp no projeto compartilhado, notará que é principalmente o código C++ que parece familiar. No entanto, alguns elementos de sintaxe podem não ser tão familiares se você for novo em aplicativos do Tempo de Execução do Windows ou tiver trabalhado com C++/CLI. Aqui estão os elementos de sintaxe não padrão mais comuns que você verá em C++/CX:
classes de referência
Quase todas as classes do Windows Runtime, que incluem todos os tipos da API do Windows - controlos XAML, as páginas na sua aplicação, a própria classe App, todos os objetos de dispositivo e rede, todos os tipos de contêiner - são declaradas como uma ref class . (Alguns tipos do Windows são classe de valor ou valor struct). Uma classe ref é consumível a partir de qualquer idioma. Em C++/CX, o tempo de vida desses tipos é regido pela contagem de referência automática (não coleta de lixo) para que você nunca exclua explicitamente esses objetos. Você também pode criar suas próprias classes de referência.
namespace HelloWorld
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public ref class MainPage sealed
{
public:
MainPage();
};
}
Todos os tipos do Tempo de Execução do Windows devem ser declarados dentro de um namespace e, ao contrário do ISO C++, os próprios tipos têm um modificador de acessibilidade. O modificador público torna a classe visível para os componentes do Windows Runtime fora do namespace. O selado palavra-chave significa que a classe não pode servir como uma classe base. Quase todas as classes ref são seladas; a herança de classe não é amplamente usada porque o JavaScript não a entende.
ref novo e ^ (chapéus)
Você declara uma variável de uma classe ref usando o operador ^ (hat) e instancia o objeto com a palavra-chave ref new. Depois disso, você acessa os métodos de instância do objeto com o operador -> como um ponteiro C++. Os métodos estáticos são acessados com o operador :: assim como no ISO C++.
No código a seguir, usamos o nome completamente qualificado para instanciar um objeto e usamos o operador -> para chamar um método de instância>.
Windows::UI::Xaml::Media::Imaging::BitmapImage^ bitmapImage =
ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();
bitmapImage->SetSource(fileStream);
Normalmente, em um arquivo .cpp, adicionamos uma using namespace Windows::UI::Xaml::Media::Imaging diretiva e a palavra-chave auto, para que o mesmo código tenha esta aparência:
auto bitmapImage = ref new BitmapImage();
bitmapImage->SetSource(fileStream);
Propriedades
Uma classe ref pode ter propriedades, que, assim como em linguagens gerenciadas, são funções de membro especiais que aparecem como campos para consumir código.
public ref class SaveStateEventArgs sealed
{
public:
// Declare the property
property Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ PageState
{
Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ get();
}
...
};
...
// consume the property like a public field
void PhotoPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
{
if (mruToken != nullptr && !mruToken->IsEmpty())
{
e->PageState->Insert("mruToken", mruToken);
}
}
Delegados
Assim como em linguagens gerenciadas, um delegado é um tipo de referência que encapsula uma função com uma assinatura específica. Eles são usados com mais freqüência com eventos e manipuladores de eventos
// Delegate declaration (within namespace scope)
public delegate void LoadStateEventHandler(Platform::Object^ sender, LoadStateEventArgs^ e);
// Event declaration (class scope)
public ref class NavigationHelper sealed
{
public:
event LoadStateEventHandler^ LoadState;
};
// Create the event handler in consuming class
MainPage::MainPage()
{
auto navigationHelper = ref new Common::NavigationHelper(this);
navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &MainPage::LoadState);
}
Adicionar conteúdo à aplicação
Vamos adicionar algum conteúdo ao aplicativo.
Passo 1: Modificar a página inicial
No Gerenciador de Soluções, abra MainPage.xaml.
Crie controlos para a interface de utilizador ao adicionar o seguinte XAML à raiz Grid, imediatamente antes do seu marcador de fecho. Ele contém um StackPanel que tem um TextBlock que pergunta o nome do usuário, um elemento TextBox que aceita o nome do usuário, um Button e outro elemento TextBlock .
<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 "Hello""/> </StackPanel> <TextBlock x:Name="greetingOutput"/> </StackPanel>Neste ponto, você criou um aplicativo Universal do Windows muito básico. Para ver a aparência do aplicativo UWP, pressione F5 para criar, implantar e executar o aplicativo no modo de depuração.
A tela inicial padrão aparece primeiro. Ele tem uma imagem — Assets\SplashScreen.scale-100.png— e uma cor de plano de fundo especificada no arquivo de manifesto do aplicativo. Para saber como personalizar o ecrã inicial, consulte Adicionar um ecrã inicial.
Quando a tela inicial desaparece, seu aplicativo aparece. Ele exibe a página principal do aplicativo.
Ainda não faz muito, mas parabéns, você criou seu primeiro aplicativo da Plataforma Universal do Windows!
Para parar a depuração e fechar o aplicativo, retorne ao Visual Studio e pressione Shift+F5.
Para obter mais informações, consulte executar um aplicativo da loja a partir do Visual Studio.
No aplicativo, você pode digitar o TextBox, mas clicar no botão não faz nada. Em etapas posteriores, você cria um manipulador de eventos para o evento Click do botão, que exibe uma saudação personalizada.
Etapa 2: Criar um manipulador de eventos
Em MainPage.xaml, na vista XAML ou de design, selecione o botão "Diga Olá" no StackPanel que adicionou anteriormente.
Abra a janela Propriedades pressionando F4 e escolha o botão Eventos (
).Encontre o evento Click. Em sua caixa de texto, digite o nome da função que manipula o evento Clique. Para este exemplo, escreva «Button_Click».
Prima a tecla "Enter". O método manipulador de eventos é criado em MainPage.xaml.cpp e aberto para que você possa adicionar o código que é executado quando o evento ocorre.
Ao mesmo tempo, em MainPage.xaml, o XAML para o Botão é atualizado para declarar o evento manipulador de Click , da seguinte forma:
<Button Content="Say "Hello"" Click="Button_Click"/>
Você também pode simplesmente ter adicionado isso ao código xaml manualmente, o que pode ser útil se o designer não carregar. Se você inserir isso manualmente, digite "Click" e deixe o IntelliSense exibir a opção para adicionar um novo manipulador de eventos. Dessa forma, o Visual Studio cria a declaração de método e o stub necessários.
O designer não carrega se ocorrer uma exceção sem tratamento durante a renderização. A renderização no designer envolve a execução de uma versão em tempo de design da página. Pode ser útil desativar o código de usuário em execução. Você pode fazer isso alterando a configuração na caixa de diálogo Ferramentas de , Opções. Em Designer XAML, desmarque Executar código do projeto no designer XAML (se suportado).
- No MainPage.xaml.cpp, adicione o código a seguir ao manipulador de eventos Button_Click que você acabou de criar. Esse código recupera o nome do usuário do
nameInputcontrole TextBox e o usa para criar uma saudação. OgreetingOutputTextBlock exibe o resultado.
void HelloWorld::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
greetingOutput->Text = "Hello, " + nameInput->Text + "!";
}
- Defina o projeto como a inicialização e pressione F5 para criar e executar o aplicativo. Quando você digita um nome na caixa de texto e clica no botão, o aplicativo exibe uma saudação personalizada.
Etapa 3: Estilizar a página inicial
Escolher um tema
É fácil personalizar a aparência do seu aplicativo. Por padrão, seu aplicativo usa recursos que têm um estilo leve. Os recursos do sistema também incluem um tema leve. Vamos experimentar e ver como é.
Para mudar para o tema escuro
Abra App.xaml.
No início do etiqueta de Aplicação, edite a propriedade RequestedTheme e defina o seu valor como Dark:
RequestedTheme="Dark"Aqui está a tag completa Application com o tema escuro:
<Application x:Class="HelloWorld.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:HelloWorld" RequestedTheme="Dark">Pressione F5 para compilá-lo e executá-lo. Observe que ele usa o tema escuro.
Que tema deve utilizar? Aquele que quiseres. Aqui está a nossa dica: 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. No resto deste tutorial, usamos o tema Luz em capturas de tela.
Observação O tema é aplicado quando o aplicativo é iniciado e não pode ser alterado enquanto o aplicativo está em execução.
Usando estilos de sistema
No momento, no aplicativo do Windows, o texto é muito pequeno e difícil de ler. Vamos corrigir isso aplicando um estilo de sistema.
Para alterar o estilo de um elemento
No projeto do Windows, abra MainPage.xaml.
Na vista XAML ou de design, selecione o TextBlock"Qual é o seu nome?" que adicionou anteriormente.
Na janela Propriedades (F4), escolha o botão Propriedades (
) no canto superior direito.Expanda o grupo Texto e defina o tamanho da fonte como 18 px.
Expanda o grupo Diversos e encontre a propriedade de estilo .
Clique no marcador de propriedade (a caixa verde à direita da propriedade Style ) e, em seguida, no menu, escolha System Resource>BaseTextBlockStyle.
BaseTextBlockStyle é um recurso definido no ResourceDictionary no diretório raiz \Program Files\Windows Kits\10\Include\winrt\xaml\design\generic.xaml.
Na superfície de design XAML, a aparência do texto muda. No editor XAML, o XAML do TextBlock é atualizado:
<TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>
Repita o processo para definir o tamanho da fonte e atribuir o BaseTextBlockStyle ao elemento
greetingOutputTextBlock.Dica Embora não haja texto neste TextBlock, quando o utilizador move o ponteiro sobre a superfície de design XAML, um contorno azul mostra onde ele está para que possas selecioná-lo.
Seu XAML agora tem esta aparência:
<StackPanel x:Name="contentPanel" Margin="120,30,0,0">
<TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" 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 "Hello"" Click="Button_Click"/>
</StackPanel>
<TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" x:Name="greetingOutput"/>
</StackPanel>
- Pressione F5 para criar e executar o aplicativo. Agora tem a seguinte aparência:
Etapa 4: Adaptar a interface do usuário para diferentes tamanhos de janela
Agora vamos fazer com que a interface do usuário se adapte a diferentes tamanhos de tela para que fique bem em dispositivos móveis. Para fazer isso, você adiciona um VisualStateManager e define propriedades que são aplicadas para diferentes estados visuais.
Para ajustar o layout da interface do usuário
- No editor de XAML, adicione este bloco de XAML após o elemento de abertura da raiz do elemento Grid .
<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>
- Depure o aplicativo na máquina local. Observe que a interface do usuário tem a mesma aparência de antes, a menos que a janela fique mais estreita do que 641 pixels independentes do dispositivo (DIPs).
- Depurar a aplicação no emulador de dispositivo móvel. Observe que a interface do usuário usa as propriedades que definiu no
narrowStatee aparece corretamente no ecrã pequeno.
Se você usou um VisualStateManager em versões anteriores do XAML, talvez observe que o XAML aqui usa uma sintaxe simplificada.
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. Você não define nenhum objeto Setter para esse estado, portanto, isso usa as propriedades de layout definidas 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 641 DIPs, o wideState é aplicado.) Nesse estado, você define alguns Setter objetos para alterar as propriedades de layout dos controles na interface do usuário:
- Você reduz a margem esquerda do
contentPanelelemento de 120 para 20. - Mude a orientação do elemento
inputPanelde Horizontal para Vertical . - Você adiciona uma margem superior de 4 DIPs ao
inputButtonelemento .
Resumo
Parabéns, você concluiu o primeiro tutorial! Ele ensinou como adicionar conteúdo a aplicativos universais do Windows, como adicionar interatividade a eles e como alterar sua aparência.
Próximos passos
Se você tiver um projeto de aplicativo Universal do Windows destinado ao Windows 8.1 e/ou Windows Phone 8.1, poderá portá-lo para o Windows 10 ou Windows 11. Não há nenhum processo automático para isso, mas você pode fazê-lo manualmente. Comece com um novo projeto Universal do Windows para obter a estrutura mais recente do sistema de projeto e os arquivos de manifesto, copie seus arquivos de código para a estrutura de diretórios do projeto, adicione os itens ao seu projeto e reescreva seu XAML usando o VisualStateManager de acordo com as diretrizes neste tópico. Para mais informações, consulte Portar um projeto do Windows Runtime 8 para um projeto da Plataforma Universal do Windows (UWP) e Portar para a Plataforma Universal do Windows (C++).
Se você tiver código C++ existente que deseja integrar a um aplicativo UWP, como para criar uma nova interface do usuário UWP para um aplicativo existente, consulte Como usar código C++ existente em um projeto Universal do Windows.