Freigeben über

Verwenden der visuellen Ebene mit XAML

Die meisten Apps, die Visual Layer-Funktionen nutzen, verwenden XAML, um den Hauptinhalt der Benutzeroberfläche zu definieren. Im Windows 10 Anniversary Update gibt es neue Features im XAML-Framework und der visuellen Ebene, die es einfacher machen, diese beiden Technologien zu kombinieren, um beeindruckende Benutzeroberflächen zu schaffen. Xaml- und Visual Layer-Interoperabilitätsfunktionen können verwendet werden, um erweiterte Animationen und Effekte zu erstellen, die nicht allein mit XAML-APIs verfügbar sind. Dazu gehören:

  • Pinseleffekte wie Weichzeichner und Frostglas
  • Dynamische Beleuchtungseffekte
  • Bildlaufgesteuerte Animationen und Parallax-Effekt
  • Automatische Layoutanimationen
  • Pixelgenaue Schlagschatten

Diese Effekte und Animationen können auf vorhandene XAML-Inhalte angewendet werden, sodass Sie Ihre XAML-App nicht erheblich neu strukturieren müssen, um die neuen Funktionen nutzen zu können. Layoutanimationen, Schatten und Weichzeichnereffekte werden im Abschnitt "Rezepte" unten behandelt. Ein Codebeispiel zur Implementierung der Parallaxe finden Sie im ParallaxingListItems-Beispiel. Das WindowsCompositionSamples-Repository enthält auch mehrere weitere Beispiele für die Implementierung von Animationen, Schatten und Effekten.

Die XamlCompositionBrushBase-Klasse

XamlCompositionBrush- stellt eine Basisklasse für XAML-Pinsel bereit, die einen Bereich mit einem CompositionBrush-bemalen. Dies kann verwendet werden, um Kompositionseffekte wie Unschärfe oder Frostglas auf einfache Weise auf XAML-UI-Elemente anzuwenden.

Weitere Informationen zur Verwendung von Pinseln mit XAML-UI finden Sie im Abschnitt Brushes.

Codebeispiele finden Sie auf der Referenzseite für XamlCompositionBrushBase.

Die XamlLight-Klasse

XamlLight- stellt eine Basisklasse für XAML-Beleuchtungseffekte bereit, die einen Bereich dynamisch mit einem CompositionLight-beleuchten.

Weitere Informationen zur Verwendung von Lichtern, einschließlich XAML-UI-Elementen für beleuchtung, finden Sie im Abschnitt "Beleuchtung ".

Auf der Referenzseite zu XamlLightfinden Sie die Codebeispiele.

Die ElementCompositionPreview-Klasse

ElementCompositionPreview ist eine statische Klasse, die XAML- und Visual Layer-Interoperabilitätsfunktionen bereitstellt. Eine Übersicht über die visuelle Ebene und deren Funktionalität finden Sie unter Visual Layer. Die ElementCompositionPreview-Klasse stellt die folgenden Methoden bereit:

  • GetElementVisual-: Ein "Handout"-Visuellen Element abrufen, das zum Rendern dieses Elements verwendet wird
  • SetElementChildVisual: Legt ein "handin"-Visual als letztes untergeordnetes Element der visuellen Struktur dieses Elements fest. Diese visuelle Darstellung wird über dem Rest des Elements gezeichnet.
  • GetElementChildVisual: Abrufen der Visualelemente mithilfe von SetElementChildVisual
  • GetScrollViewerManipulationPropertySet: Ein Objekt abrufen, das verwendet werden kann, um 60fps-Animationen basierend auf dem Bildlaufoffset in einem ScrollViewer zu erstellen

Hinweise zu ElementCompositionPreview.GetElementVisual

ElementCompositionPreview.GetElementVisual gibt ein vereinfachtes Visual zurück, das zum Rendern des angegebenen UIElementverwendet wird. Eigenschaften wie Visual.Opacity, Visual.Offset und Visual.Size werden vom XAML-Framework basierend auf dem Zustand des UIElements festgelegt. Dies ermöglicht Techniken wie implizite Neupositionierungsanimationen (siehe Rezepte).

Es ist zu beachten, dass Offset und Größe als Ergebnis des XAML-Framework-Layouts festgelegt werden. Entwickler sollten vorsichtig sein, wenn sie diese Eigenschaften ändern oder animieren. Entwickler sollten den Offset nur ändern oder animieren, wenn die obere linke Ecke des Elements dieselbe Position wie die des übergeordneten Elements im Layout aufweist. Die Größe sollte im Allgemeinen nicht geändert werden, aber der Zugriff auf die Eigenschaft kann nützlich sein. In den folgenden Beispielen "Drop Shadow" und "Frosted Glass" wird beispielsweise die Größe eines Handzettel-Visuelles als Eingabe für eine Animation verwendet.

Als zusätzliche Einschränkung werden aktualisierte Eigenschaften des Handout-Visuals nicht im zugehörigen UIElement widergespiegelt. Wenn Sie z. B. UIElement.Opacity auf 0,5 festlegen, wird die Opazität des entsprechenden Visuals des Handouts auf 0,5 gesetzt. Wenn Sie jedoch die Opacity- des Handzettels auf 0,5 festlegen, wird der Inhalt bei 50% Deckkraft angezeigt, ändert jedoch nicht den Wert der Opacity-Eigenschaft des entsprechenden UIElements.

Beispiel für Offset- Animation

Unrichtig

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

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

Richtig

<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);

Die ElementCompositionPreview.SetElementChildVisual-Methode

ElementCompositionPreview.SetElementChildVisual ermöglicht es dem Entwickler, ein „handin“-Visual bereitzustellen, das als Teil des Visual Tree eines Elements erscheint. Auf diese Weise können Entwickler eine "Composition Island" erstellen, in der visuelle Inhalte in einer XAML-Benutzeroberfläche angezeigt werden können. Entwickler sollten bei der Verwendung dieser Technik vorsichtig sein, da visuelle Inhalte nicht über die gleichen Barrierefreiheits- und Benutzerfreundlichkeitsgarantien für XAML-Inhalte verfügen. Daher wird im Allgemeinen empfohlen, diese Technik nur bei Bedarf zum Implementieren von benutzerdefinierten Effekten wie denen im Abschnitt "Rezepte" unten zu verwenden.

GetAlphaMask--Methoden

Image, TextBlock-und Shape implementieren jeweils eine Methode namens GetAlphaMask, die eine CompositionBrush- zurückgibt, die ein Graustufenbild mit der Form des Elements darstellt. Dieser CompositionBrush- kann als Eingabe für eine Komposition DropShadow-dienen, sodass der Schatten die Form des Elements anstelle eines Rechtecks widerspiegeln kann. Dies ermöglicht pixelgenaue, konturbasierte Schatten für Text, Bilder mit Alpha und Formen. Ein Beispiel für diese API finden Sie unten bei Schlagschatten.

Rezepte

Animation neu positionieren

Mithilfe impliziter Kompositionsanimationen kann ein Entwickler änderungen im Layout eines Elements automatisch relativ zum übergeordneten Element animieren. Wenn Sie z. B. den Rand der Schaltfläche unten ändern, wird sie automatisch an ihre neue Layoutposition bewegt.

Übersicht zur Umsetzung

  1. Holen Sie sich den Handzettel Visual für das Zielelement
  2. Erstellen Sie eine ImplicitAnimationCollection-, die automatisch Änderungen in der Offset--Eigenschaft animiert.
  3. Zuordnen der ImplicitAnimationCollection- zum zugrunde stehenden visuellen Element
<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;
}

Schlagschatten

Wenden Sie einen pixelgenauen Schlagschatten auf ein UIElementan, z. B. eine Ellipse, die ein Bild enthält. Da für den Schatten ein spriteVisual- erforderlich ist, das von der App erstellt wurde, müssen wir ein "host"-Element erstellen, das das SpriteVisual- mit ElementCompositionPreview.SetElementChildVisualenthält.

Übersicht zur Umsetzung

  1. Holen Sie sich das Arbeitsblatt Visual für das Hostelement
  2. Erstellen einer Windows.UI.Composition-DropShadow-
  3. Konfigurieren Sie den DropShadow- so, dass seine Form mithilfe einer Maske vom Zielelement abgeleitet wird.
    • DropShadow ist standardmäßig rechteckig, daher ist es nicht erforderlich, wenn das Ziel rechteckig ist.
  4. Fügen Sie einen Schatten an eine neue SpriteVisual-an, und legen Sie die SpriteVisual- als untergeordnetes Element des Hostelements fest.
  5. Die Größe des SpriteVisual an die Größe des Hosts durch ein ExpressionAnimation binden.
<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);
}

In den folgenden beiden Auflistungen werden die C++/WinRT- und C++/CX- Entsprechungen des vorherigen C#-Codes mit derselben XAML-Struktur angezeigt.

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

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

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

    // Create a drop shadow
    auto dropShadow{ compositor.CreateDropShadow() };
    dropShadow.Color(Windows::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
    Windows::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);
}

#include "WindowsNumerics.h"

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

void MainPage::InitializeDropShadow(Windows::UI::Xaml::UIElement^ shadowHost, Windows::UI::Xaml::Shapes::Shape^ shadowTarget)
{
    auto hostVisual = Windows::UI::Xaml::Hosting::ElementCompositionPreview::GetElementVisual(shadowHost);
    auto compositor = hostVisual->Compositor;

    // Create a drop shadow
    auto dropShadow = compositor->CreateDropShadow();
    dropShadow->Color = Windows::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
    Windows::UI::Xaml::Hosting::ElementCompositionPreview::SetElementChildVisual(shadowHost, shadowVisual);

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

    shadowVisual->StartAnimation("Size", bindSizeAnimation);
}

Milchglas

Erstellen Sie einen Effekt, der Hintergrundinhalte weichzeichnet und einfärbt. Beachten Sie, dass Entwickler das Win2D NuGet-Paket installieren müssen, um Effekte zu verwenden. Installationsanweisungen finden Sie auf der Win2D-Homepage .

Übersicht zur Umsetzung

  1. Holen Sie sich Handout Visual für das Host-Element
  2. Erstellen einer Weichzeichnereffektstruktur mithilfe von Win2D und CompositionEffectSourceParameter-
  3. Erstellen Sie eine CompositionEffectBrush basierend auf dem Effektbaum
  4. Festlegen der Eingabe des CompositionEffectBrush- auf eine CompositionBackdropBrush-, damit ein Effekt auf den hinter einem SpriteVisual- liegenden Inhalt angewendet werden kann.
  5. Legen Sie die CompositionEffectBrush- als Inhalt einer neuen SpriteVisual-fest, und legen Sie die SpriteVisual- als untergeordnetes Element des Hostelements fest. Alternativ dazu können Sie eine XamlCompositionBrushBase verwenden.
  6. Die Größe des SpriteVisual an die Größe des Hosts durch ein ExpressionAnimation binden.
<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);
}

Zusätzliche Ressourcen