Camada visual

  • Artigo

A camada Visual fornece uma API de modo retido para elementos gráficos, efeitos e animações de alto desempenho e é a base para todas as interfaces do usuário em dispositivos Windows. Você define sua interface do usuário de maneira declarativa e a camada Visual depende da aceleração de hardware de elementos gráficos para garantir que seu conteúdo, efeitos e animações sejam renderizados de forma suave e sem falhas, de forma independente do thread de interface do usuário do aplicativo.

Destaques notáveis:

  • APIs conhecidas do WinRT
  • Arquitetada para interações e interface do usuário mais dinâmicos
  • Conceitos alinhados com ferramentas de design
  • Dimensionamento linear sem quedas repentinas de desempenho

Seus aplicativos UWP do Windows já estão usando a camada Visual por meio de uma das estruturas de interface do usuário. Você também pode tirar proveito da camada Visual diretamente para a renderização personalizada, efeitos e animações com muito pouco esforço.

Disposição em camadas de estrutura de interface do usuário: a camada de estrutura (Windows.UI. XAML) baseia-se na camada visual (Windows.UI.Composition) que é baseada na camada de elementos gráficos (DirectX)

O que há na camada Visual?

As funções principais de camada Visual são:

  1. Conteúdo: composição leve de conteúdo desenhado de forma personalizada
  2. Efeitos: sistema de efeitos de interface do usuário em tempo real cujos efeitos podem ser animados, encadeados e personalizados
  3. Animações: animações expressivas e independentes da estrutura em execução independentemente do thread da interface do usuário

Conteúdo

O conteúdo é hospedado, transformado e disponibilizado para uso pelo sistema de animação e de efeitos usando elementos visuais. Na base da hierarquia de classe, há a classe Visual, um proxy de threads leve e ágil no processo do app para o estado visual no compositor. As subclasses do Visual incluem ContainerVisual para permitir que as crianças criem árvores de visuais e SpriteVisual que contém conteúdo e podem ser pintadas com cores sólidas, conteúdo desenhado personalizado ou efeitos visuais. Juntos, esses tipos de Visual compõem a estrutura de árvore visual para a interface do usuário 2D e contêm os FrameworkElements XAML mais visíveis.

Para saber mais, veja a visão geral de Composição de Visual.

Efeitos

O sistema de efeitos na camada Visual permite que você aplique uma cadeia de efeitos de filtro e de transparência para um elemento Visual ou uma árvore de Visuals. Este é um sistema de efeitos de interface do usuário, que não deve ser confundido com efeitos de imagem e mídia. Os efeitos funcionam em conjunto com o sistema de animação, permitindo que os usuários obtenham animações suaves e dinâmicas de propriedades de efeitos, renderizadas de forma independente do thread da interface do usuário. Os efeitos na camada Visual fornecem os blocos de construção criativos que podem ser combinados e animados para construir experiências personalizadas e interativas.

Além de cadeias de efeitos que podem ser animados, a camada Visual também dá suporte a um modelo de iluminação que permite que os elementos visuais simulem as propriedades do material ao responderem às luzes que podem ser animadas. Os elementos visuais também podem projetar sombras. Iluminação e sombras podem ser combinadas para criar uma percepção de profundidade e realismo.

Para obter mais informações, consulte a visão geral de Efeitos de composição.

Animações

O sistema de animação na camada Visual permite que você mova elementos visuais, anime efeitos e promova transformações, clipes e outras propriedades.  Ele é um sistema independente de estrutura projetado desde o início com o desempenho em mente.  Ele é executado independentemente do thread da interface do usuário para garantir suavidade e escalabilidade.  Enquanto permite que você use animações de KeyFrame para promover alterações de propriedade ao longo do tempo, ele também permite que você configure relacionamentos matemáticos entre as propriedades diferentes, incluindo entrada do usuário, permitindo que você crie experiências coreografadas contínuas de forma direta.

Para obter mais informações, consulte a visão geral de Animações de composição.

Como trabalhar com seu aplicativo UWP XAML

Você pode acessar um Visual criado pela estrutura XAML e apoiar um FrameworkElement visível usando a classe ElementCompositionPreview em Windows.UI.Xaml.Hosting. Observe que os elementos visuais criados pela estrutura para você vêm com alguns limites em termos de personalização. Isso ocorre porque a estrutura está gerenciando deslocamentos, transformações e tempos de vida. No entanto, você pode criar seus próprios Visuals e anexá-los a um elemento XAML existente por meio de ElementCompositionPreview ou adicionando-os a um ContainerVisual existente em algum lugar na estrutura de árvore visual.

Para saber mais, confira a visão geral Uso da camada Visual com XAML.

Trabalhando com seu aplicativo da área de trabalho

Você pode usar a camada Visual para aprimorar a aparência e a funcionalidade de seus aplicativos de área de trabalho WPF, Windows Forms e C++ Win32. 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.

Para obter mais informações, consulte Modernize seu aplicativo da área de trabalho usando a camada Visual.

Recursos adicionais