Udostępnij przez

Używanie warstwy wizualnej z językiem XAML

Większość aplikacji korzystających z funkcji warstwy wizualnej będzie używać języka XAML do zdefiniowania głównej zawartości interfejsu użytkownika. W rocznicowej aktualizacji systemu Windows 10 istnieją nowe funkcje w strukturze XAML i warstwie wizualnej, które ułatwiają łączenie tych dwóch technologii w celu tworzenia wspaniałych środowisk użytkownika. Funkcje międzyoperacyjności XAML i Visual Layer mogą służyć do tworzenia zaawansowanych animacji i efektów niedostępnych za pomocą samych interfejsów API XAML. Obejmuje to:

  • Efekty szczotki, takie jak rozmycie i matowe szkło
  • Dynamiczne efekty oświetlenia
  • Animacje sterowane przewijaniem i efektem paralaksy
  • Automatyczne animacje układu
  • Doskonałe cienie w pikselach

Te efekty i animacje można zastosować do istniejącej zawartości XAML, więc nie trzeba znacząco zmieniać struktury aplikacji XAML, aby korzystać z nowych funkcji. Animacje układu, cienie i efekty rozmycia zostały omówione w poniższej sekcji Przepisy. Przykładowy kod implementujący efekt paralaksy można znaleźć w przykładzie programu ParallaxingListItems. Repozytorium WindowsCompositionSamples zawiera również kilka innych przykładów do implementowania animacji, cieni i efektów.

Klasa XamlCompositionBrushBase

XamlCompositionBrush udostępnia klasę bazową pędzli XAML do malowania obszaru za pomocą CompositionBrush. Może to służyć do łatwego stosowania efektów kompozycji, takich jak rozmycie lub matowe szkło do elementów interfejsu użytkownika XAML.

Aby uzyskać więcej informacji na temat używania pędzli z interfejsem użytkownika XAML, zobacz sekcję Brushes.

Przykłady kodu można znaleźć na stronie referencyjnej XamlCompositionBrushBase.

Klasa XamlLight

XamlLight udostępnia klasę bazową dla efektów oświetleniowych XAML, które dynamicznie oświetlają obszar za pomocą CompositionLight.

Aby uzyskać więcej informacji na temat używania świateł, w tym elementów interfejsu użytkownika XAML, zobacz sekcję Oświetlenie.

Przykłady kodu można znaleźć na stronie referencyjnej XamlLight.

Klasa ElementCompositionPreview

ElementCompositionPreview jest klasą statyczną, która zapewnia funkcjonalność współpracy XAML i Visual Layer. Aby zapoznać się z omówieniem warstwy wizualnej i jej funkcjonalności, zobacz Visual Layer. Klasa ElementCompositionPreview udostępnia następujące metody:

  • GetElementVisual: pobierz wizualizację "pomoc", która jest używana do renderowania tego elementu
  • SetElementChildVisual: ustawia wizualizację "handin" jako ostatni element podrzędny drzewa wizualnego tego elementu. Ta wizualizacja będzie rysować na wierzchu pozostałej części elementu.
  • GetElementChildVisual: pobierz zestaw wizualizacji przy użyciu SetElementChildVisual
  • GetScrollViewerManipulationPropertySet: pozyskaj obiekt, który może być użyty do tworzenia animacji z częstotliwością 60 klatek na sekundę w oparciu o przesunięcie przewijania w ScrollViewer

Uwagi dotyczące elementu CompositionPreview.GetElementVisual

ElementCompositionPreview.GetElementVisual zwraca wizualizację "handout", która jest używana do renderowania danego elementu interfejsu użytkownika . Właściwości takie jak Visual.Opacity, Visual.Offseti Visual.Size są ustawiane przez strukturę XAML na podstawie stanu elementu UIElement. Umożliwia to techniki, takie jak niejawne animacje zmieniania położenia (zobacz Recipes).

Należy pamiętać, że ponieważ przesunięcie i rozmiar są ustawiane w wyniku układu struktury XAML, deweloperzy powinni zachować ostrożność podczas modyfikowania lub animowania tych właściwości. Deweloperzy powinni modyfikować lub animować "Offset" tylko wtedy, gdy lewy górny róg elementu ma taką samą pozycję jak jego element nadrzędny w układzie. Rozmiar nie powinien być zwykle modyfikowany, ale uzyskiwanie dostępu do właściwości może być przydatne. Na przykład poniższe próbki Drop Shadow i Frosted Glass używają opcji Rozmiar wizualizacji informacyjnej jako danych wejściowych do animacji.

W ramach dodatkowego zastrzeżenia zaktualizowane właściwości wizualizacji informacyjnej nie zostaną odzwierciedlone w odpowiednim elemecie UIElement. Na przykład ustawienie UIElement.Opacity na 0,5 spowoduje ustawienie odpowiedniego elementu wizualnego na nieprzezroczystość 0,5. Jednak ustawienie nieprzezroczystości wizualizacji na 0,5 spowoduje, że zawartość będzie wyświetlana na poziomie 50% nieprzezroczystości, ale nie zmieni wartości odpowiadającej właściwości Nieprzezroczystości elementu UIElement.

Przykład animacji przesunięcia

Błędny

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

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

Poprawny

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

Metoda ElementCompositionPreview.SetElementChildVisual

ElementCompositionPreview.SetElementChildVisual umożliwia deweloperowi podanie wizualizacji "handin", która będzie wyświetlana jako część drzewa wizualnego elementu. Dzięki temu deweloperzy mogą utworzyć "Wyspę kompozycji", na której zawartość oparta na wizualizacji może pojawiać się w interfejsie użytkownika XAML. Deweloperzy powinni ostrożnie korzystać z tej techniki, ponieważ zawartość oparta na systemie Visual nie będzie mieć takich samych ułatwień dostępu i gwarancji dotyczących doświadczenia użytkownika jak zawartość XAML. W związku z tym zaleca się stosowanie tej techniki tylko wtedy, gdy jest to konieczne do zaimplementowania efektów niestandardowych, takich jak te znajdujące się w sekcji Przepisy poniżej.

metody GetAlphaMask

image, TextBlocki Shape każdy implementuje metodę o nazwie GetAlphaMask, która zwraca CompositionBrush reprezentujący obraz skali szarości z kształtem elementu. Ten CompositionBrush może być używany jako wejście dla CompositionDropShadow, tak aby cień mógł odzwierciedlać kształt elementu zamiast prostokąta. Umożliwia to precyzyjne, pikselowe cienie na podstawie konturu dla tekstu, obrazów z kanałem alfa i kształtów. Zobacz drop shadow poniżej, aby zapoznać się z przykładem tego interfejsu API.

Przepisy

Zmienia położenie animacji

Korzystając z ukrytych animacji kompozycji, deweloper może automatycznie animować zmiany w układzie elementu względem elementu nadrzędnego. Jeśli na przykład zmienisz Margines przycisku poniżej, zostanie on automatycznie animowany do nowej pozycji układu.

Omówienie implementacji

  1. Pobierz materiały informacyjne Visual dla elementu docelowego
  2. Utwórz ImplicitAnimationCollection, która automatycznie animuje zmiany we właściwości Offset
  3. Powiąż ImplicitAnimationCollection z visualem podstawowym.
<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;
}

Cień rzucany

Zastosuj cień do UIElement, na przykład wielokropka zawierającego obraz. Ponieważ cień wymaga SpriteVisual utworzonej przez aplikację, musimy utworzyć element "host", który będzie zawierać SpriteVisual przy użyciu ElementCompositionPreview.SetElementChildVisual.

Omówienie implementacji

  1. Pobierz materiały informacyjne Visual dla hosta
  2. Utwórz Windows.UI.Composition DropShadow
  3. Skonfiguruj DropShadow, aby uzyskać jego kształt z elementu docelowego za pomocą maski
    • dropShadow jest domyślnie prostokątny, więc nie jest to konieczne, jeśli obiekt docelowy jest prostokątny
  4. Dołącz cień do nowej SpriteVisuali ustaw SpriteVisual jako element podrzędny elementu hosta
  5. Powiąż rozmiar SpriteVisual z rozmiarem hosta, używając 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);
}

Na poniższych dwóch listach przedstawiono C++/WinRT i C++/CX odpowiedniki poprzedniego kodu C# przy użyciu tej samej struktury XAML.

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

Szkło matowe

Utwórz efekt, który rozmywa i nakłada odcień na zawartość tła. Należy pamiętać, że deweloperzy muszą zainstalować pakiet NuGet Win2D, aby używać efektów. Aby uzyskać instrukcje dotyczące instalacji, zobacz stronę główną Win2D.

Omówienie implementacji

  1. Pobierz materiały informacyjne Visual dla elementu głównego
  2. Tworzenie drzewa efektu rozmycia przy użyciu Win2D i CompositionEffectSourceParameter
  3. Twórz CompositionEffectBrush oparty na drzewie efektów
  4. Ustaw dane wejściowe CompositionEffectBrush na CompositionBackdropBrush, co pozwala na zastosowanie efektu do zawartości znajdującej się za SpriteVisual
  5. Ustaw CompositionEffectBrush jako zawartość nowego SpriteVisuali ustaw SpriteVisual jako element podrzędny elementu hosta. Alternatywnie można użyć klasy XamlCompositionBrushBase.
  6. Powiąż rozmiar SpriteVisual z rozmiarem hosta, używając 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);
}

Dodatkowe zasoby

  • Last updated on