Visão geral da camada visual

A camada Visual fornece uma API de alto desempenho, em modo retido, para gráficos, efeitos e animações, e é a base para toda a interface de utilizador em dispositivos Windows. Defines a tua interface de forma declarativa, e a camada Visual depende da aceleração por hardware gráfico para garantir que o teu conteúdo, efeitos e animações são renderizados de forma fluida e sem falhas, independentemente do tópico da interface da aplicação.

Os tipos em Microsoft.UI.Composition formam a implementação da camada Visual do Windows App SDK/WinUI 3.

Destaques notáveis:

• As APIs familiares do WinRT
• Arquitetado para interfaces e interações mais dinâmicas
• Conceitos alinhados com ferramentas de design
• Escalabilidade linear sem quedas abruptas de desempenho.

As suas aplicações WinUI e Windows App SDK já estão a usar a camada Visual através de um dos frameworks de Interface do Utilizador. Também podes aproveitar diretamente a camada Visual para renderização personalizada, efeitos e animações com muito pouco esforço.

O que está na camada Visual?

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

1. Conteúdo: Composição leve de conteúdos desenhados à medida
2. Efeitos: Sistema de efeitos de interface em tempo real cujos efeitos podem ser animados, encadeados e personalizados
3. Animações: Animações expressivas, independentes do framework e independentes do thread da interface

Content

O conteúdo é hospedado, transformado e disponibilizado para uso pelo sistema de animação e efeitos, utilizando visuais. Na base da hierarquia de classes está a classe Visual , um proxy leve e ágil em threads no processo da aplicação para o estado visual no compositor. Subclasses de Visual incluem o ContainerVisual , que permite às crianças criar árvores de visuais, e o SpriteVisual que contém conteúdo e pode ser pintado com cores sólidas, conteúdos desenhados personalizados ou efeitos visuais. Em conjunto, estes tipos de Elementos Visuais compõem a estrutura de árvore visual para interfaces 2D e para os FrameworkElements XAML mais visíveis ao fundo.

Para mais informações, consulte a Visão Visual da Composição .

Efeitos

O sistema de Efeitos na camada Visual permite-te aplicar uma cadeia de efeitos de filtro e transparência a um Visual ou a uma árvore de Visuais. Este é um sistema de efeitos de interface, não deve ser confundido com efeitos de imagem e multimédia. Os efeitos funcionam em conjunto com o sistema de Animação, permitindo aos utilizadores obter animações suaves e dinâmicas das propriedades dos Efeitos, renderizadas independentemente da thread da interface. Os efeitos na Camada Visual fornecem os blocos criativos que podem ser combinados e animados para criar experiências personalizadas e interativas.

Para além das cadeias de efeitos animáveis, a Camada Visual também suporta um modelo de iluminação que permite aos Visuais imitar propriedades do material ao responder a luzes animáveis. As imagens também podem projetar sombras. A iluminação e as sombras podem ser combinadas para criar uma perceção de profundidade e realismo.

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

Animações

O sistema de animação na camada Visual permite-te mover visuais, animar efeitos e conduzir transformações, clipes e outras propriedades. É um sistema independente do framework, concebido desde o início com o desempenho em mente. Corre de forma independente do tópico da interface para garantir fluidez e escalabilidade. Embora permita usar animações KeyFrame familiares para impulsionar alterações de propriedades ao longo do tempo, também permite estabelecer relações matemáticas entre diferentes propriedades, incluindo a entrada do utilizador, permitindo criar experiências coreografadas de forma integrada e contínua.

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

Trabalhar com WinUI XAML

Pode aceder a um Visual criado pelo framework XAML, e que suporta um FrameworkElement visível, usando a classe ElementCompositionPreview no Microsoft.UI.Xaml.Hosting. Note que os visuais criados para si pelo framework têm alguns limites de personalização. Isto é porque a estrutura está a gerir deslocamentos, transformações e períodos de vida. No entanto, pode criar os seus próprios Visuais e anexá-los a um elemento WinUI existente através do ElementCompositionPreview, ou adicionando-os a um ContainerVisual existente algures na estrutura da árvore visual.

Para mais informações, consulte a Visão Geral de Usar a Camada Visual com XAML.

Trabalhar com a sua aplicação de ambiente de trabalho

Pode usar a camada Visual para melhorar o aspeto, a sensação e a funcionalidade das aplicações de desktop Win32 construídas com o Windows App SDK, bem como WPF, Windows Forms e aplicações desktop Win32 em C++. Podes migrar ilhas de conteúdo para usar a camada Visual e manter o resto da interface na estrutura existente. Isto significa que pode fazer atualizações e melhorias significativas na interface da sua aplicação sem necessidade de fazer alterações extensas à sua base de código existente.

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

Diferenças em relação à UWP

O espaço de nomes Microsoft.UI.Composition oferece acesso a funcionalidades quase idênticas à camada Visual UWP (Windows.UI.Composition), nos cenários mais comuns. Mas há exceções e diferenças.

Obtenção de uma instância de Compositor

Nas aplicações de ambiente de trabalho (uma aplicação WinUI é uma aplicação de ambiente de trabalho), o Window.Current é null. Portanto, não é possível recuperar uma instância do Compositor do Window.Current.Compositor. Nas aplicações WinUI, recomendamos que chame ElementCompositionPreview.GetElementVisual(UIElement) para obter um objeto Visual de Composição e recupere o Compositor da propriedade Compositor do visual. Nos casos em que você não tem acesso a um UIElement (por exemplo, se você criar um CompositionBrush em uma biblioteca de classes), você pode chamar CompositionTarget.GetCompositorForCurrentThread.

Conteúdos externos

O compositor Microsoft.UI.Composition corre inteiramente dentro de uma aplicação Windows App SDK e só tem acesso aos píxeis que desenhou. Isto significa que qualquer conteúdo externo (conteúdo que não foi desenhado pelo compositor) é desconhecido para o compositor, o que cria certas limitações.

Um exemplo de conteúdo externo é o (Microsoft.UI.Xaml.Controls) MediaPlayerElement. A pilha de mídia do Windows fornece ao XAML um identificador de cadeia de permuta de mídia opaco. O XAML fornece esse identificador ao compositor, que, por sua vez, o transfere para o Windows (via Windows.UI.Composition) para exibir. Como o compositor não consegue ver nenhum dos píxeis na cadeia de troca de media, não pode compor isso como parte da renderização geral da janela. Em vez disso, ele dá a cadeia de troca de mídia ao Windows para renderizá-la abaixo da renderização do compositor, com uma abertura cortada na renderização do compositor para permitir que a cadeia de troca de mídia abaixo dela seja visível.

No Windows App SDK/WinUI, as seguintes APIs criam todas conteúdo externo:

• MediaPlayerElement
• SwapChainPanel
• WebView2
• MicaBackdrop e DesktopAcrylicBackdrop, bem como os subjacentes MicaController e DesktopAcrylicController que eles usam.

O modelo de gestão de conteúdos externos cria estas limitações:

• Não é possível ter conteúdo de compositor atrás de conteúdo externo. Por exemplo, não é possível dar a um WebView2 um fundo transparente para ver botões ou imagens XAML atrás dele. As únicas coisas que podem estar por trás do conteúdo externo são outros conteúdos externos e o fundo da janela. Por isso, desencorajamos/desativamos a transparência de conteúdo externo.
• Não é possível ter amostra de conteúdo de compositor de conteúdo externo. Por exemplo, AcrylicBrush não consegue amostrar e desfocar quaisquer pixels de um MediaPlayerElement. AcrylicBrush fará uma amostra da imagem do compositor, que é preto transparente para áreas de conteúdo externo. Da mesma forma, AcrylicBrush na frente de um MicaBackdrop ou DesktopAcrylicBackdrop não pode ver nenhuma cor que esses panos de fundo irão desenhar; e, em vez disso, o pincel desfocará o preto transparente.
• Outro cenário é conhecido como inversão de destino, que é usado para o cursor dos controlos de caixa de texto inverter os píxeis em frente ao cursor de inserção de texto. Isso inverte amostras semelhantes da superfície do compositor, e será afetado se a caixa de texto não tiver um fundo opaco desenhado pelo compositor.
• Como o WinUI SwapChainPanel cria conteúdo externo, não suporta transparência. Também não suporta a aplicação de AcrylicBrush e outros efeitos que usam um CompositionBackdropBrush na frente dele.

Samples

O projeto Windows App SDK Samples inclui um conjunto abrangente de exemplos de composição que demonstram como usar as APIs Microsoft.UI.Composition para construir experiências visuais ricas. Estes exemplos abrangem uma vasta gama de cenários — desde layouts básicos e transformações até efeitos avançados, iluminação, sombras e gestão de inputs baseada no InteractionTracker, como o pull-to-refresh e o scroll de paralaxe. Quer esteja a começar com a camada Visual ou à procura de padrões para aplicar na sua própria aplicação, estes exemplos são uma referência prática para ver como os blocos de construção se juntam.

Explore os exemplos no GitHub: WindowsAppSDK-Samples / SceneGraph.

Tópicos relacionados

• Referência da API Microsoft.UI.Composition
• Usando a camada Visual em aplicativos da área de trabalho