Partilhar via

Usando a camada Visual em aplicativos da área de trabalho

Agora você pode usar APIs do Tempo de Execução do Windows em aplicativos de área de trabalho que não sejam UWP para aprimorar a aparência, a funcionalidade e a funcionalidade de seus aplicativos WPF, Windows Forms e C++ Win32 e aproveitar os recursos mais recentes da interface do usuário do Windows que só estão disponíveis via 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 modo retido de alto desempenho para gráficos, efeitos e animações. É a base para a interface do usuário em dispositivos Windows. Os controles UWP XAML são criados na camada Visual e permitem muitos aspetos do Fluent Design System, como Light, Depth, Motion, Material e Scale.

Pequeno vídeo mostrando uma interface de usuário criada com a camada visual.

Interface de utilizador criada com a camada visual

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

A camada Visual permite criar experiências envolventes usando composição leve de conteúdo desenhado personalizado (visuais) e aplicando 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 seu aplicativo uma aparência exclusiva e estabelecer uma identidade que o diferencie de outros aplicativos. Ele também permite os princípios do Fluent Design, que são projetados para tornar seus aplicativos mais fáceis de usar, atraindo mais envolvimento dos usuários. Por exemplo, você pode usá-lo para criar pistas visuais e transições de tela animadas que mostram relações entre itens na tela.

Recursos da camada visual

Pincéis

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

Um ovo criado com o Material Creator

Um ovo criado com o aplicativo de demonstração Material Creator.

Efeitos

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

Luzes e material

Luzes e material demonstrados na galeria de exemplos de Composição da IU do Windows .

Animações

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

Pequeno vídeo de outra interface de usuário criada com a camada visual.

movimento demonstrado na galeria de exemplos de Composição da Interface do Usuário do Windows .

Mantenha sua base de código existente e adote incrementalmente

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 na interface do usuário do aplicativo sem precisar fazer alterações extensas na 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 mostram como os recursos funcionam.

Win32

Formulários do Windows

WPF (Windows Presentation Foundation)

Limitações

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

  • As cadeias de efeitos dependem de Win2D para a descrição de efeitos. O pacote NuGet Win2D não é suportado em aplicações de ambiente de trabalho, portanto, precisarias recompilá-lo a partir do código-fonte .
  • Para fazer o teste de colisão, precisais calcular os limites percorrendo a árvore visual vós próprios. Isso é o mesmo que a Camada Visual na UWP, exceto, neste caso, não há nenhum elemento XAML ao qual se possa vincular facilmente para testes de acerto.
  • A camada visual não tem uma primitiva para renderizar texto.
  • Quando duas tecnologias de interface do usuário diferentes são usadas juntas, como WPF e a Camada Visual, cada uma delas é responsável por desenhar seus próprios pixels na tela e não pode compartilhar pixels. Como resultado, o conteúdo da Camada Visual é sempre renderizado sobre os restantes conteúdos da interface de utilizador. (Esta questão é conhecida como o problema do espaço aéreo .) Talvez seja necessário fazer codificação e testes adicionais para garantir que o conteúdo da camada Visual seja redimensionado com a interface do utilizador do host e não oclua outro conteúdo.
  • O conteúdo hospedado numa aplicação de ambiente de trabalho não é redimensionado automaticamente para DPI. Etapas adicionais podem ser necessárias para garantir que o seu conteúdo trate das alterações de DPI. (Consulte os tutoriais específicos da plataforma para obter mais informações.)

Recursos adicionais

Referência da API

  • Last updated on