Compartilhar via

Usar a camada visual com o XAML do WinUI

A maioria dos aplicativos WinUI e SDK de Aplicativos do Windows que consomem recursos de Camada Visual usará XAML para definir o conteúdo principal da interface do usuário. O WinUI fornece recursos na estrutura XAML e na Camada Visual que facilitam a combinação dessas duas tecnologias para criar experiências impressionantes do usuário. A funcionalidade de interoperabilidade XAML e Visual Layer pode ser usada para criar animações e efeitos avançados não disponíveis apenas usando APIs XAML. Isso inclui:

  • Efeitos de pincel como desfoque e vidro fosco
  • Efeitos de iluminação dinâmica
  • Animações controladas por rolagem e paralaxe
  • Animações de layout automático
  • Sombras de soltar perfeitas para pixels

Esses efeitos e animações podem ser aplicados ao conteúdo XAML existente, portanto, você não precisa reestruturar drasticamente seu aplicativo WinUI para aproveitar a funcionalidade. Animações de layout, sombras e efeitos de desfoque são abordados na seção Receitas abaixo. Para obter um exemplo de código que implementa o paralaxe, consulte o exemplo ParallaxingListItems. O repositório WindowsCompositionSamples também tem vários outros exemplos para implementar animações, sombras e efeitos.

A classe XamlCompositionBrushBase

Microsoft.UI.Xaml.Media.XamlCompositionBrushBase fornece uma classe base para pincéis XAML que pintam uma área com um CompositionBrush. Isso pode ser usado para aplicar facilmente efeitos de composição, como desfoque ou vidro fosco a elementos da interface do usuário XAML.

Consulte a seção Pincéis para obter mais informações sobre como usar pincéis com interface do usuário XAML.

Para obter exemplos de código, consulte a página de referência para XamlCompositionBrushBase.

A classe XamlLight

Microsoft.UI.Xaml.Media.XamlLight fornece uma classe base para efeitos de iluminação XAML que iluminam dinamicamente uma área com um CompositionLight.

Consulte a seção Iluminação para obter mais informações sobre como usar luzes, incluindo a iluminação de elementos de interface do usuário XAML.

Para obter exemplos de código, consulte a página de referência do XamlLight.

Trabalhando com o WinUI XAML

ElementCompositionPreview é uma classe estática que fornece funcionalidade de interoperabilidade de camada visual e XAML. Para obter uma visão geral da Camada Visual e sua funcionalidade, consulte a Camada Visual. A classe ElementCompositionPreview fornece os seguintes métodos de interoperabilidade WinUI:

GetElementVisual

ElementCompositionPreview.GetElementVisual retorna um visual "handout" usado para renderizar o UIElement fornecido. Propriedades como Visual.Opacity, Visual.Offset e Visual.Size são definidas pela estrutura XAML com base no estado do UIElement. Isso permite técnicas como animações de reposicionamento implícitas (consulte Receitas).

Observe que, como Deslocamento e Tamanho são definidos como resultado do layout da estrutura XAML, os desenvolvedores devem ter cuidado ao modificar ou animar essas propriedades. Os desenvolvedores devem apenas modificar ou animar o Offset quando o canto superior esquerdo do elemento estiver na mesma posição que a de seu pai no layout. O tamanho geralmente não deve ser modificado, mas acessar a propriedade pode ser útil. Por exemplo, os exemplos de Sombra suspensa e vidro fosco abaixo usam o tamanho de um visual de folheto como entrada para uma animação.

Como uma ressalva adicional, as propriedades atualizadas do folheto Visual não serão refletidas no UIElement correspondente. Portanto, por exemplo, definir UIElement.Opacity como 0,5 definirá a opacidade do Visual do folheto correspondente como 0,5. No entanto, definir a opacidade do visual do folheto como 0,5 fará com que o conteúdo apareça em 50% opacidade, mas não alterará o valor da propriedade Opacity do UIElement correspondente.

Exemplo de animação offset

Incorreto

<Border>
      <Image x:Name="MyImage" Margin="5" />
</Border>

// Doesn’t work because Image has a margin!
ElementCompositionPreview.GetElementVisual(MyImage).StartAnimation("Offset", parallaxAnimation);

Correto

<Border>
    <Canvas Margin="5">
        <Image x:Name="MyImage" />
    </Canvas>
</Border>

// This works because the Canvas parent doesn’t generate a layout offset.
ElementCompositionPreview.GetElementVisual(MyImage).StartAnimation("Offset", parallaxAnimation);

SetElementChildVisual

ElementCompositionPreview.SetElementChildVisual permite que o desenvolvedor forneça um visual "handin" que será exibido como parte da Árvore Visual de um elemento. Isso permite que os desenvolvedores criem uma "Ilha da Composição" em que o conteúdo baseado em visual possa aparecer dentro de uma interface do usuário XAML. Os desenvolvedores devem ser conservadores em usar essa técnica porque o conteúdo baseado em visual não terá as mesmas garantias de acessibilidade e experiência do usuário de conteúdo XAML. Portanto, geralmente é recomendável que essa técnica seja usada somente quando necessário para implementar efeitos personalizados, como os encontrados na seção Receitas abaixo.

Métodos GetAlphaMask

Imagem, TextBlock e Shape implementam cada um um método chamado GetAlphaMask que retorna um CompositionBrush que representa uma imagem em escala de cinza com a forma do elemento. Esse CompositionBrush pode servir como entrada para um DropShadow de Composição, permitindo que a sombra reflita a forma do elemento em vez de um retângulo. Isso permite sombras perfeitas e baseadas em contorno de pixel para texto, imagens com alfa e formas. Consulte Drop Shadow abaixo para obter um exemplo dessa API.

Receitas

Reposicionar animação

Usando Animações Implícitas de Composição, um desenvolvedor pode animar automaticamente as alterações no layout de um elemento em relação ao seu elemento pai. Por exemplo, se você alterar a Margem do botão abaixo, ele será automaticamente animado para sua nova posição de layout.

Visão geral da implementação

  1. Obtenha o folheto Visual para o elemento de destino
  2. Criar um ImplicitAnimationCollection que anima automaticamente as alterações na propriedade Offset
  3. Associar ImplicitAnimationCollection ao visual de suporte
<Button x:Name="RepositionTarget" Content="Click Me" />

public MainPage()
{
    InitializeComponent();
    InitializeRepositionAnimation(RepositionTarget);
}

private void InitializeRepositionAnimation(UIElement repositionTarget)
{
    var targetVisual = ElementCompositionPreview.GetElementVisual(repositionTarget);
    Compositor compositor = targetVisual.Compositor;

    // Create an animation to animate targetVisual's Offset property to its final value
    var repositionAnimation = compositor.CreateVector3KeyFrameAnimation();
    repositionAnimation.Duration = TimeSpan.FromSeconds(0.66);
    repositionAnimation.Target = "Offset";
    repositionAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");

    // Run this animation when the Offset Property is changed
    var repositionAnimations = compositor.CreateImplicitAnimationCollection();
    repositionAnimations["Offset"] = repositionAnimation;

    targetVisual.ImplicitAnimations = repositionAnimations;
}

Sombra projetada

Aplique uma sombra projetada com precisão de pixel a um UIElement, por exemplo, uma elipse que contém uma imagem. Como a sombra requer um SpriteVisual criado pelo aplicativo, precisamos criar um elemento "host" que conterá o SpriteVisual usando ElementCompositionPreview.SetElementChildVisual.

Visão geral da implementação

  1. Obtenha o folheto Visual para o elemento host
  2. Criar um Microsoft.UI.Composition DropShadow
  3. Configurar o DropShadow para obter sua forma do elemento de destino por meio de uma máscara
    • DropShadow é retangular por padrão, portanto, isso não é necessário se o destino for retangular
  4. Anexar sombra a um novo SpriteVisual e definir o SpriteVisual como o filho do elemento host
  5. Associar o tamanho do SpriteVisual ao tamanho do host usando um ExpressionAnimation
<Grid Width="200" Height="200">
    <Canvas x:Name="ShadowHost" />
    <Ellipse x:Name="CircleImage">
        <Ellipse.Fill>
            <ImageBrush ImageSource="Assets/Images/2.jpg" Stretch="UniformToFill" />
        </Ellipse.Fill>
    </Ellipse>
</Grid>

public MainPage()
{
    InitializeComponent();
    InitializeDropShadow(ShadowHost, CircleImage);
}

private void InitializeDropShadow(UIElement shadowHost, Shape shadowTarget)
{
    Visual hostVisual = ElementCompositionPreview.GetElementVisual(shadowHost);
    Compositor compositor = hostVisual.Compositor;

    // Create a drop shadow
    var dropShadow = compositor.CreateDropShadow();
    dropShadow.Color = Color.FromArgb(255, 75, 75, 80);
    dropShadow.BlurRadius = 15.0f;
    dropShadow.Offset = new Vector3(2.5f, 2.5f, 0.0f);
    // Associate the shape of the shadow with the shape of the target element
    dropShadow.Mask = shadowTarget.GetAlphaMask();

    // Create a Visual to hold the shadow
    var shadowVisual = compositor.CreateSpriteVisual();
    shadowVisual.Shadow = dropShadow;

    // Add the shadow as a child of the host in the visual tree
   ElementCompositionPreview.SetElementChildVisual(shadowHost, shadowVisual);

    // Make sure size of shadow host and shadow visual always stay in sync
    var bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size");
    bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);

    shadowVisual.StartAnimation("Size", bindSizeAnimation);
}

A listagem a seguir mostra o equivalente C++/WinRT do código C# anterior usando a mesma estrutura XAML.

#include <winrt/Microsoft.UI.Composition.h>
#include <winrt/Microsoft.UI.Xaml.h>
#include <winrt/Microsoft.UI.Xaml.Hosting.h>
#include <winrt/Microsoft.UI.Xaml.Shapes.h>
...
MainPage()
{
    InitializeComponent();
    InitializeDropShadow(ShadowHost(), CircleImage());
}

int32_t MyProperty();
void MyProperty(int32_t value);

void InitializeDropShadow(Microsoft::UI::Xaml::UIElement const& shadowHost, Microsoft::UI::Xaml::Shapes::Shape const& shadowTarget)
{
    auto hostVisual{ Microsoft::UI::Xaml::Hosting::ElementCompositionPreview::GetElementVisual(shadowHost) };
    auto compositor{ hostVisual.Compositor() };

    // Create a drop shadow
    auto dropShadow{ compositor.CreateDropShadow() };
    dropShadow.Color(Microsoft::UI::ColorHelper::FromArgb(255, 75, 75, 80));
    dropShadow.BlurRadius(15.0f);
    dropShadow.Offset(Windows::Foundation::Numerics::float3{ 2.5f, 2.5f, 0.0f });
    // Associate the shape of the shadow with the shape of the target element
    dropShadow.Mask(shadowTarget.GetAlphaMask());

    // Create a Visual to hold the shadow
    auto shadowVisual = compositor.CreateSpriteVisual();
    shadowVisual.Shadow(dropShadow);

    // Add the shadow as a child of the host in the visual tree
    Microsoft::UI::Xaml::Hosting::ElementCompositionPreview::SetElementChildVisual(shadowHost, shadowVisual);

    // Make sure size of shadow host and shadow visual always stay in sync
    auto bindSizeAnimation{ compositor.CreateExpressionAnimation(L"hostVisual.Size") };
    bindSizeAnimation.SetReferenceParameter(L"hostVisual", hostVisual);

    shadowVisual.StartAnimation(L"Size", bindSizeAnimation);
}

Vidro fosco

Crie um efeito que desfoque e tinge o conteúdo em segundo plano. Observe que os desenvolvedores precisam instalar o pacote NuGet Win2D para usar efeitos. Consulte a home page do Win2D para obter instruções de instalação.

Visão geral da implementação

  1. Obter o folheto Visual para o elemento host
  2. Criar uma árvore de efeito de desfoque usando Win2D e CompositionEffectSourceParameter
  3. Criar um CompositionEffectBrush com base na árvore de efeito
  4. Defina a entrada do CompositionEffectBrush para um CompositionBackdropBrush, que permite que um efeito seja aplicado ao conteúdo por trás de um SpriteVisual
  5. Defina o CompositionEffectBrush como o conteúdo de um novo SpriteVisual e defina o SpriteVisual como o filho do elemento host. Você pode usar um XamlCompositionBrushBase como alternativa.
  6. Associar o tamanho do SpriteVisual ao tamanho do host usando um ExpressionAnimation
<Grid Width="300" Height="300" Grid.Column="1">
    <Image
        Source="Assets/Images/2.jpg"
        Width="200"
        Height="200" />
    <Canvas
        x:Name="GlassHost"
        Width="150"
        Height="300"
        HorizontalAlignment="Right" />
</Grid>

public MainPage()
{
    InitializeComponent();
    InitializeFrostedGlass(GlassHost);
}

private void InitializeFrostedGlass(UIElement glassHost)
{
    Visual hostVisual = ElementCompositionPreview.GetElementVisual(glassHost);
    Compositor compositor = hostVisual.Compositor;

    // Create a glass effect, requires Win2D NuGet package
    var glassEffect = new GaussianBlurEffect
    { 
        BlurAmount = 15.0f,
        BorderMode = EffectBorderMode.Hard,
        Source = new ArithmeticCompositeEffect
        {
            MultiplyAmount = 0,
            Source1Amount = 0.5f,
            Source2Amount = 0.5f,
            Source1 = new CompositionEffectSourceParameter("backdropBrush"),
            Source2 = new ColorSourceEffect
            {
                Color = Color.FromArgb(255, 245, 245, 245)
            }
        }
    };

    //  Create an instance of the effect and set its source to a CompositionBackdropBrush
    var effectFactory = compositor.CreateEffectFactory(glassEffect);
    var backdropBrush = compositor.CreateBackdropBrush();
    var effectBrush = effectFactory.CreateBrush();

    effectBrush.SetSourceParameter("backdropBrush", backdropBrush);

    // Create a Visual to contain the frosted glass effect
    var glassVisual = compositor.CreateSpriteVisual();
    glassVisual.Brush = effectBrush;

    // Add the blur as a child of the host in the visual tree
    ElementCompositionPreview.SetElementChildVisual(glassHost, glassVisual);

    // Make sure size of glass host and glass visual always stay in sync
    var bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size");
    bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);

    glassVisual.StartAnimation("Size", bindSizeAnimation);
}

Recursos adicionais

  • Last updated on