Usando a camada Visual em aplicativos da área de trabalho

Agora você pode usar Windows Runtime APIs em aplicativos de área de trabalho não UWP para aprimorar a aparência e a funcionalidade de seus aplicativos WPF, Windows Forms e C++ Win32 e aproveitar os recursos mais recentes da interface do usuário Windows disponíveis apenas por meio da UWP.

Para muitos cenários, você pode usar ilhas XAML para adicionar controles XAML modernos ao seu aplicativo. No entanto, quando você precisa criar experiências personalizadas que vão além dos controles internos, você pode acessar as APIs de camada visual.

A camada visual fornece uma API de alto desempenho e modo retido para elementos gráficos, efeitos e animações. É a base para a interface do usuário em dispositivos Windows. Os controles XAML UWP são criados na camada Visual e permitem muitos aspectos do Sistema de Design Fluente, como Luz, Profundidade, Movimento, Material e Escala.

Vídeo curto mostrando uma interface do usuário criada com a camada visual.

Interface do usuário criada com a camada visual

Criar uma interface do usuário visualmente envolvente em qualquer aplicativo Windows

A camada visual permite criar experiências envolventes usando a composição leve de conteúdo desenhado personalizado (visuais) e a aplicação de animações, efeitos e manipulações poderosas nesses objetos em seu aplicativo. A camada Visual não substitui nenhuma estrutura de interface do usuário existente; em vez disso, é um suplemento valioso para essas estruturas.

Você pode usar a camada Visual para dar ao aplicativo uma aparência exclusiva e estabelecer uma identidade que a diferencia de outros aplicativos. Ele também habilita os princípios do Fluent Design, que são projetados para facilitar o uso de seus aplicativos, atraindo mais engajamento dos usuários. Por exemplo, você pode usá-lo para criar indicações visuais e transições de tela animadas que mostram relações entre itens na tela.

Recursos de camada visual

Escovas

Pincéis de composição permitem pintar objetos de interface do usuário com cores sólidas, gradientes, imagens, vídeos, efeitos complexos e muito mais.

Um ovo criado com o Criador de Materiais

Um ovo criado com o app de demo Material Creator.

Efeitos

Os efeitos de composição incluem luz, sombra e uma lista de efeitos de filtro. Eles podem ser animados, personalizados, encadeados e depois aplicados diretamente aos visuais. O SceneLightingEffect pode ser combinado com iluminação de composição para criar atmosfera, profundidade e materiais.

Luzes e material

Luzes e materiais demonstrados na galeria de exemplos Windows UI Composition.

Animações

As animações de composição são executadas diretamente no processo de compositor, independentemente do thread da interface do usuário. Isso garante suavidade e escala, para que você possa executar um grande número de animações simultâneas e explícitas. Além de animações familiares do KeyFrame para gerar alterações de propriedade ao longo do tempo, você pode usar expressões para configurar relações matemáticas entre propriedades diferentes, incluindo a entrada do usuário. As animações controladas por entrada permitem criar uma interface do usuário que responde dinamicamente e fluidamente à entrada do usuário, o que pode resultar em maior envolvimento do usuário.

Vídeo curto de outra interface do usuário criada com a camada visual.

Movimento demonstrado na galeria de exemplos Windows UI Composition.

Manter sua base de código existente e adotar incrementalmente

O código em seus aplicativos existentes representa um investimento significativo que você não deseja perder. Você pode migrar ilhas de conteúdo para usar a camada visual e manter o restante da interface do usuário em sua estrutura existente. Isso significa que você pode fazer atualizações e aprimoramentos significativos na interface do usuário do aplicativo sem precisar fazer alterações abrangentes em sua base de código existente.

Exemplos e tutoriais

Saiba como usar a camada visual em seus aplicativos experimentando nossos exemplos. Esses exemplos e tutoriais ajudam você a começar a usar a camada visual e mostrar como os recursos funcionam.

Win32

Windows Forms

WPF

Limitações

Embora muitos recursos da Camada Visual funcionem da mesma forma quando hospedados em um aplicativo da área de trabalho como em um aplicativo UWP, alguns recursos têm limitações. Aqui estão algumas das limitações a serem observadas:

  • As cadeias de efeito dependem do Win2D para as descrições de efeito. O pacote NuGet Win2D não tem suporte em aplicativos da área de trabalho, portanto, você precisaria recompilá-lo do código source.
  • Para fazer o teste de clique, você precisa fazer cálculos de limites andando pela árvore visual por conta própria. Isso é o mesmo que a Camada Visual na UWP, exceto que, nesse caso, não há nenhum elemento XAML ao qual você pode associar facilmente para teste de clique.
  • A Camada Visual não tem um primitivo para renderizar texto.
  • Quando duas tecnologias de interface do usuário diferentes são usadas em conjunto, como WPF e a Camada Visual, elas são responsáveis por desenhar seus próprios pixels na tela e não podem compartilhar pixels. Como resultado, o conteúdo da Camada Visual é sempre renderizado em cima de outro conteúdo da interface do usuário. (Isso é conhecido como o problema do airspace.) Talvez seja necessário fazer codificação e testes adicionais para garantir que o conteúdo da camada visual redimensione junto com a interface do usuário do host e não oclua outro conteúdo.
  • O conteúdo hospedado em um aplicativo da área de trabalho não é redimensionado nem escalado automaticamente para DPI. Etapas extras podem ser necessárias para garantir que seu conteúdo trate as alterações de DPI. (Consulte os tutoriais específicos da plataforma para obter mais informações.)

Recursos Adicionais

Referência de API

  • Last updated on