Adicionando controles e conteúdo
Recolher sumário
Expandir sumário

Adicionando controles e conteúdo (DirectX e C++)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Quase todos os aplicativos precisam de controles como botões, caixas de seleção e listas suspensas. Os aplicativos do Tempo de Execução do Windows em DirectX com C++ podem funcionar com a estrutura XAML para usar suas APIs de controle e conteúdo ou você pode usar o Direct2D e o DirectWrite para desenvolver seus próprios controles para seu aplicativo.

Há três formas de criar controles e outros elementos de interface do usuário interativos em seu aplicativo do Tempo de Execução do Windows em DirectX:

  • Interoperabilidade entre DirectX e XAML. Este é o caso mais fácil de todos, onde você pode criar uma superfície do DirectX para composição de imagem (SurfaceImageSource e VirtualSurfaceImageSource) dentro da estrutura XAML ou desenhar um layout de XAML na parte superior de sua cadeia de permuta (SwapChainBackgroundPanel). Com ambos os métodos, você pode usar os controles do XAML fornecidos nos * namespaces do Windows.UI.Xaml. Para aplicativos que não usam a aparência exata de nossas diretrizes de design para o visual do aplicativo do Tempo de Execução do Windows, você pode aproveitar as opções de extensibilidade e estilo da XAML para dar ao seu aplicativo uma aparência exclusiva.
  • Direct2D e DirectWrite. Neste caso, você desenha os controles e o conteúdo para seu aplicativo usando as APIs do Direct2D e DirectWrite, controlando todos os eventos de entrada diretamente. Você também desenha sua própria barra de aplicativos e configurações. É mais trabalhoso bloquear a aparência de um aplicativo do Tempo de Execução do Windows do que se você usar a interoperabilidade XAML, mas esse procedimento também é um pouco mais flexível para aplicativos que pedem uma aparência exclusiva.
  • Direct3D. Você pode criar seus controles e conteúdo inteiramente em 3-D ou juntamente com o Direct2D e o DirectWrite. Novamente, você mesmo desenha seus controles e conteúdo e gerencia o comportamento deles. Essa abordagem é mais adequada para jogos que não usam a aparência exata de nossas diretrizes de design para o visual de aplicativo da Windows Store, mas ao contrário, têm aparências e efeitos exclusivos especificamente adaptados ao seu conteúdo.

Adicionando controles e conteúdo - DirectX e XAML

Se você não estiver familiarizado com as diretrizes de design para aplicativos da Windows Store e deseja aproveitar todos os benefícios dos controles e componentes da interface do usuário nos namespaces Windows.UI.Xaml, comece com a interoperabilidade XAML.

A interoperabilidade entre DirectX e XAML é um pouco mais trabalhosa na configuração, mas depois que você configura a estrutura DirectX, é possível desenvolver o aplicativo do Tempo de Execução do Windows usando o DirectX exatamente como se faz com qualquer outro aplicativo do Tempo de Execução do Windows em XAML: criando a interface como um documento XAML e escrevendo o código de retorno de chamada da interface como um code-behind C++.

Há dois tipos diferentes de cenários de interoperabilidade entre DirectX e XAML:

  • Você está escrevendo um aplicativo do Tempo de Execução do Windows em C++ usando XAML, mas deseja usar o DirectX para compor uma imagem que seu aplicativo exibirá como conteúdo ou como um controle. Neste caso, você não tem que se preocupar com uma cadeia de troca, porque a estrutura XAML cuida disso para você. Agora, você tem duas opções para o conteúdo ou controle do DirectX:
  • Você está escrevendo um aplicativo DirectX e deseja desenhar uma interface XAML ou sobrepor o conteúdo renderizado. Neste caso, você cria e gerencia a cadeia de permuta (e qualquer atualização) para o conteúdo DirectX renderizado diretamente. Use um elemento XAML SwapChainBackgroundPanel como o elemento pai em seu documento XAML (porque ele é um componente de tela inteira e poderá existir apenas um deles), e crie quaisquer outros elementos de controle e conteúdo XAML sob ele. Associe a cadeia de permuta para seu aplicativo com o elemento XAML SwapChainBackgroundPanel por meio da interface ISwapChainBackgroundPanelNative.

Use esses documentos para ajudá-lo a começar a usar o conteúdo e os controles XAML.

TópicoDescrição
Interoperabilidade entre DirectX e XAML Aprenda como utilizar os três diferentes elementos XAML usados para exibir o conteúdo DirectX em um aplicativo do Tempo de Execução do Windows com XAML.
Adicionando e estilizando controles (aplicativos do Tempo de Execução do Windows em C++, C# ou Visual Basic) Os tópicos nesta seção ajudam você a começar a adicionar e aplicar estilo a controles.
Lista de controles (aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic) Uma lista em ordem alfabética dos controles comuns para aplicativos do Tempo de Execução do Windows com XAML.
Controles por função (aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic) Uma lista dos controles comuns por função para aplicativos do Tempo de Execução do Windows com XAML.
Exibindo e editando texto (aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic) Os tópicos nesta seção fornecem informações sobre como exibir e editar o texto.
Exibindo imagens, gráficos e miniaturas (aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic) Os tópicos nesta seção o ajudam a iniciar a exibição de gráficos. (Observação: primitivas XAML, não gráficos DirectX.)
Adicionando controles de layout (aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic) Saiba como criar e usar controles de layout para organizar os elementos da interface do usuário do seu aplicativo.

 

Este exemplo demonstra a interoperabilidade entre DirectX e XAML usando o SwapChainBackgroundPanel:

Adicionando controles e conteúdo com Direct2D e DirectWrite

Se você não estiver usando XAML com o aplicativo do Tempo de Execução do Windows em DirectX, poderá criar todos os controles e conteúdo usando as APIs do Direct2D e do DirectWrite. Nesse caso, crie primeiro um provedor de visualização para o DirectX ou use um dos modelos fornecidos no Microsoft Visual Studio, como os modelos Aplicativo Direct2D ou Aplicativo Direct3D.

O provedor de visualização conecta-se à cadeia de troca do DirectX para o CoreWindow para o seu aplicativo. CoreWindow define todas as entradas básicas e eventos de sistema par ao seu aplicativo. Você pode usá-los para determinar onde na tela um usuário clicou ou pressionou ou se eles suspenderam ou retomaram um aplicativo. Manipule esses eventos de entrada acionados no CoreWindow ao criar retornos de chamada para eles e usando os dados para gerenciar os comportamentos dos controles e conteúdos do Direct2D que você cria. Por exemplo, este é o processo para criar o seu próprio controle de botão usando o Direct2D:

  1. Desenhe o botão como um primitivo Direct2D. Escreva qualquer texto para ele usando o DirectWrite. Apresente a cadeia de troca e aguarde por um evento PointerPressed.
  2. No seu retorno de chamada para o evento PointerPressed, use as coordenadas de pixel fornecidas pelo evento para determinar se o clique ou pressionamento ocorreu dentro da área do seu botão. (Isso é chamado de “teste de ocorrência".)
  3. Se sim, envie a operação associada ao botão. Atualize a animação do botão para indicar um pressionamento com êxito.
  4. Desenhe o botão atualizado e apresente a cadeia de troca conforme necessário até que a animação seja concluída.

Crie seus controles e conteúdo de acordo com as diretrizes de design para aplicativos do Tempo de Execução do Windows. Na maioria dos casos, você mesmo tem que definir os comportamentos do controle e desenhar os controles e o conteúdo. Entretanto, será possível usar os controles e as caixas de diálogo fornecidos pelo sistema como o PopupMenu. Para obter uma lista dos controles do sistema que você pode usar, veja o namespace Windows.UI.Xaml.Controls.

Desenhe sua geometria de controle com primitivas Direct2D e use os efeitos do Direct2D para as animações. Crie e gerencie as camadas de texto para o controles e o conteúdo usando as APIs do DirectWrite. O mesmo se aplica às caixas de diálogo e janelas do menu suspenso de seu aplicativo; você cria a aparência para os tipos CoreWindowDialog e CoreWindowFlyout, respectivamente.

Você mesmo também deverá executar qualquer composição de imagem para conteúdo de imagem dinâmica.

Se você não estiver familiarizado com o Direct2D e o DirectWrite, dê uma olhada nesses exemplos para se inspirar:

Para obter a composição do conteúdo da imagem, você também pode usar as APIs do WIC (Windows Image Composition). Veja este exemplo de código para obter detalhes de implementação:

Adicionando controles e conteúdo com o Direct3D

Quando você está desenvolvendo um jogo ou aplicativos gráficos imersivos, normalmente cria seus próprios controles ou texto 3-D que corresponde à aparência do conteúdo em seu aplicativo. Neste caso, você pode criar seus controles usando o Direct3D.

Como com o conteúdo e os controles do Direct2D e DirectWrite, use os eventos de entrada acionados no CoreWindow para determinar quando a interação ocorreu. Para o Direct3D, você está trabalhando com o pipeline de renderização de gráficos diretamente e é responsável pela conversão das coordenadas da tela 2-D do evento de entrada para e do local correspondente em seu visor 3-D e em sua projeção 2-D.

Quando um evento de entrada (como PointerPressed) é acionado, faça o seguinte:

  1. Traduza as coordenadas de pixel do evento do sistema de coordenadas de tela para o sistema de coordenadas de cena 3-D (mundo).
  2. Efetue qualquer teste de ocorrência para determinar o controle com o qual o usuário deve interagir.
  3. Renderize a animação para feedback de seleção e apresente-a.

Este exemplo ilustra este processo:

Você também pode criar seus controles como primitivas do Direct2D e DirectWrite em um contexto específico do Direct2D e compor o destino de renderização do Direct2D com a cena do Direct3D na cadeia de permuta. Neste caso, você implementaria seus controles de entrada usando o método de teste de hit do Direct2D. Dê uma olha no exemplo a seguir para ver como esse processo funciona.

Tópicos relacionados

Desenvolvendo aplicativos (C++ e DirectX)
Direct2D e DirectWrite
Direct3D
Diretrizes de design do aplicativo do Tempo de Execução do Windows
Windows::UI::Core namespace
Windows::UI::Xaml namespace

 

 

Mostrar:
© 2016 Microsoft