Usar a Camada visual em aplicativos da área de trabalho

  • Artigo

Agora, é possível usar as APIs do Windows Runtime em aplicativos da área de trabalho não UWP para aprimorar a aparência e a funcionalidade de seus aplicativos WPF, Windows Forms e Win32 C++, além de aproveitar os recursos mais recentes de interface do usuário do Windows que só estão disponíveis 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, é possível acessar as APIs da Camada visual.

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

Short video showing a user interface created with the visual layer.

Interface do usuário criada com a Camada visual

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

A Camada visual permite que você crie 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 avançadas nesses objetos em seu aplicativo. A Camada visual não substitui nenhuma estrutura da IU existente; em vez disso, é um complemento valioso para essas estruturas.

Você pode usar a Camada visual para dar ao seu aplicativo uma aparência única e estabelecer uma identidade que o diferencie de outros aplicativos. Ela também habilita os princípios de Design Fluente, projetados para facilitar o uso de seus aplicativos, gerando um maior envolvimento dos usuários. Por exemplo, você pode usar isso para criar indicações visuais e transições de tela animadas que mostram as relações entre os itens na tela.

Recursos da Camada visual

Pincéis

Os pincéis de composição permitem que você pinte objetos da interface do usuário com cores sólidas, gradientes, imagens, vídeos, efeitos complexos e muito mais.

An egg created with Material Creator

Um ovo criado com o aplicativo de demonstração do Criador de Materiais.

Efeitos

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

Lights and material

Luzes e materiais demonstrados na Galeria de exemplos de Composição da interface do usuário do Windows.

Animações

As Animações de composição são executadas diretamente no processo do compositor, independentemente do thread de interface do usuário. Isso garante simplicidade e escala, para que você possa executar grandes quantidades de animações simultâneas e explícitas. Além das animações conhecidas do KeyFrame para conduzir as alterações de propriedade ao longo do tempo, você pode usar expressões para configurar relações matemáticas entre diferentes propriedades, incluindo entrada do usuário. As animações controladas por entrada permitem criar uma interface do usuário que responde de forma dinâmica e fluida à entrada dos usuários, o que pode resultar em uma maior participação deles.

Short video of another user interface created with the visual layer.

Movimento demonstrado na Galeria de exemplos de Composição da interface do usuário do Windows.

Manter sua base de código existente e adotar de forma incremental

O código em seus aplicativos existentes representa um investimento significativo que você não quer 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 em sua interface do usuário do aplicativo sem a necessidade de fazer grandes alterações em sua base de código existente.

Exemplos e tutoriais

Saiba como usar a Camada visual em seus aplicativos experimentando nossos exemplos. Estes exemplos e tutoriais ajudam você a começar a usar a Camada visual e mostram 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 ou em um aplicativo UWP, alguns recursos apresentam limitações. Aqui estão algumas das limitações a serem consideradas:

  • As cadeias de efeito dependem do Win2D para as descrições de efeito. O pacote NuGet do Win2D não é compatível com aplicativos da área de trabalho, portanto, você precisará recompilá-lo do código-fonte.
  • Para fazer testes de clique, você precisa calcular os limites percorrendo a árvore visual por conta própria. Isso é o mesmo que a Camada visual na UWP, exceto que, neste caso, não há nenhum elemento XAML que você possa associar facilmente para testes de clique.
  • A Camada visual não tem um primitivo para renderizar o texto.
  • Quando duas tecnologias de interface do usuário diferentes são usadas juntas, como o WPF e a Camada visual, cada uma delas é responsável 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 problema de espaço aéreo.) Talvez seja necessário fazer codificação e teste adicionais para garantir que o conteúdo da Camada visual seja redimensionado com a interface do usuário do host e não oculte outro conteúdo.
  • O conteúdo hospedado em um aplicativo da área de trabalho não é redimensionado ou dimensionado automaticamente para DPI. Podem ser necessárias etapas adicionais para garantir que o conteúdo lide com as alterações de DPI. (Confira os tutoriais específicos da plataforma para obter mais informações.)

Recursos adicionais

Referência de API