A vizualizációs réteg használata WinUI XAML-vel

A Legtöbb Visual Layer-képességeket használó WinUI- és Windows App SDK-alkalmazás az XAML használatával határozza meg a fő felhasználói felületi tartalmat. A WinUI az XAML-keretrendszerben és a Visual Layerben olyan funkciókat biztosít, amelyek megkönnyítik a két technológia kombinálásával lenyűgöző felhasználói élmények létrehozását. Az XAML és a Visual Layer interop funkcióval speciális animációkat és effektusokat hozhat létre, amelyek csak az XAML API-k használatával nem érhetők el. Ez a következőket foglalja magában:

Ecseteffektusok, mint például az elmosódás és a fagyos üveg
Dinamikus világítási effektusok
Görgetésvezérelt animációk és parallax
Automatikus elrendezési animációk
Pixelesen tökéletes árnyékok

Ezek az effektusok és animációk alkalmazhatók a meglévő XAML-tartalmakra, így nem kell jelentősen átstrukturálnia a WinUI-alkalmazást a funkció előnyeinek kihasználásához. Az elrendezési animációkat, az árnyékokat és az elmosódott effektusokat az alábbi Receptek szakaszban találja. A parallaxot implementáló kódmintát a ParallaxingListItems minta ismerteti. A WindowsCompositionSamples adattár számos más mintával is rendelkezik az animációk, árnyékok és effektusok implementálására.

A XamlCompositionBrushBase osztály

A Microsoft.UI.Xaml.Media.XamlCompositionBrushBase egy alaposztályt biztosít az XAML-kefékhez, amelyek egy területet egy CompositionBrush-nal festenek. Ez használható az olyan kompozíciós effektusok egyszerű alkalmazására, mint az elmosódott vagy a fagyos üveg az XAML felhasználói felület elemeire.

Az kefék XAML felhasználói felülettel való használatával kapcsolatos további információkért tekintse meg az Ecsetek szakaszt.

Példakódokért tekintse meg az XamlCompositionBrushBase referenciaoldalát.

A XamlLight osztály

A Microsoft.UI.Xaml.Media.XamlLight egy alaposztályt biztosít az XAML-világítási effektusokhoz, amelyek dinamikusan megvilágítanak egy területet egy CompositionLight használatával.

A világítással kapcsolatos további információkért tekintse meg a Világítás szakaszt, beleértve az XAML felhasználói felület elemeinek megvilágítását is.

Példakódokért tekintse meg az XamlLight referenciaoldalát.

A WinUI XAML használata

Az ElementCompositionPreview egy statikus osztály, amely XAML és Visual Layer interop funkciókat biztosít. A vizualizáció rétegének és funkcióinak áttekintését a Visual Layerben tekintheti meg. Az ElementCompositionPreview osztály a következő WinUI interop metódusokat biztosítja:

GetElementVisual: Az elem rendereléséhez használt "emlékeztető" vizualizáció lekérése
SetElementChildVisual: Egy "handin" Visual-t állít be ennek az elemnek a vizuális fájának utolsó gyermekévé. Ez a vizuális elem az elem többi részének tetején jelenik meg.
GetElementChildVisual: A vizualizációkészlet lekérése a SetElementChildVisual használatával
GetScrollViewerManipulationPropertySet: Olyan objektum lekérése, amely 60fps animációk létrehozására használható a ScrollViewer görgetési eltolása alapján

GetElementVisual

Az ElementCompositionPreview.GetElementVisual egy "emlékeztető" vizualizációt ad vissza, amely az adott UIElement megjelenítésére szolgál. Az olyan tulajdonságokat, mint a Visual.Opacity, a Visual.Offset és a Visual.Size , az XAML-keretrendszer állítja be az UIElement állapota alapján. Ez lehetővé teszi az olyan technikákat, mint az implicit áthelyezési animációk (lásd : Receptek).

Vegye figyelembe, hogy mivel az eltolás és a méret az XAML-keretrendszer elrendezése alapján van beállítva, a fejlesztőknek óvatosnak kell lenniük a tulajdonságok módosításakor vagy animálásakor. A fejlesztők csak akkor módosíthatják vagy animálhatják az Offsetet, ha az elem bal felső sarka ugyanabban a pozícióban van, mint a szülő elem elrendezése. A méretet általában nem szabad módosítani, de a tulajdonság elérése hasznos lehet. A lenti Szórt árnyék és Matt üveg példák például egy képes bemutató méretét használják bemenetként egy animációhoz.

További figyelmeztetésként az emlékeztető vizualizáció frissített tulajdonságai nem jelennek meg a megfelelő UIElementben. Így például az UIElement.Opacity 0.5 értékre állítása a megfelelő emlékeztető vizualizáció opacitását 0,5 értékre állítja. Ha azonban az emlékeztető vizualizáció opacitását 0,5 értékre állítja, akkor a tartalom 50% opacitásnál jelenik meg, de nem módosítja a megfelelő UIElement opacitás tulajdonságának értékét.

Példa eltolásos animációra

Helytelen

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

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

Helyes

<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

Az ElementCompositionPreview.SetElementChildVisual lehetővé teszi a fejlesztő számára, hogy egy "handin" vizualizációt adjon meg, amely az elem Vizualizációfája részeként jelenik meg. Ez lehetővé teszi a fejlesztők számára, hogy létrehozzák a "Composition Island"-t, ahol a vizualizációalapú tartalmak megjelenhetnek egy XAML felhasználói felületen. A fejlesztőknek óvatosnak kell lenniük a technika használata terén, mivel a vizualizációalapú tartalmak nem rendelkeznek az XAML-tartalmak akadálymentességi és felhasználói élményével. Ezért általában azt javasoljuk, hogy ezt a technikát csak akkor használja, ha szükséges, hogy egyéni hatásokat implementáljon, például az alábbi Receptek szakaszban találhatóakat.

GetAlphaMask metódusok

A Kép, a TextBlock és az Alakzat minden esetben getAlphaMask nevű metódust implementál, amely egy szürkeárnyalatos képet képviselő CompositionBrush-t ad vissza az elem alakjával. Ez a CompositionBrush bemenetként szolgálhat a Composition DropShadow számára, így az árnyék téglalap helyett az elem alakját tükrözheti. Ez lehetővé teszi a képpontok tökéletes, kontúralapú árnyékolását a szöveghez, az alfa-képekhez és az alakzatokhoz. Az API-ra vonatkozó példát alább az Árnyék elvetése című témakörben találja.

Receptek

Animáció helyzetének módosítása

A kompozíció implicit animációinak használatával a fejlesztő automatikusan animálhatja az elemek elrendezésének változásait a szülőhöz képest. Ha például módosítja az alábbi gomb margóját , az automatikusan animálódik az új elrendezési pozícióba.

Implementáció áttekintése

A célelem Visual kézikönyvének lekérése
ImplicitAnimationCollection létrehozása, amely automatikusan animálja az Eltolás tulajdonság módosításait
Az ImplicitAnimationCollection társítása a háttérvizualizációval

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

Árnyék elvetése

Pixeltökéletes árnyék alkalmazása egy UIElement-re, például egy képet tartalmazó Ellipszis-re. Mivel az árnyékhoz az alkalmazás által létrehozott SpriteVisual szükséges, létre kell hoznunk egy "gazdagép" elemet, amely az ElementCompositionPreview.SetElementChildVisual használatával tartalmazza a SpriteVisual elemet.

Implementáció áttekintése

A gazdaelem kézikönyv Visual lekérése
A Microsoft.UI.Composition DropShadow létrehozása
Konfigurálja a DropShadow-t úgy, hogy az alakzatát a célelemből maszkon keresztül szerezze be
- A DropShadow alapértelmezés szerint téglalap alakú, ezért ez nem szükséges, ha a cél téglalap alakú
Árnyék csatolása egy új SpriteVisualhoz, és állítsa be a SpriteVisualt a gazdaelem gyermekének
A SpriteVisual méretét a gazdagép méretéhez köti az ExpressionAnimation használatával

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

Az alábbi lista az előző C#-kód C++/WinRT-ekvivalensét mutatja ugyanazzal az XAML-struktúrával.

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

Fagyos üveg

Olyan effektus létrehozása, amely elhomályosítja és színezi a háttértartalmakat. Vegye figyelembe, hogy a fejlesztőknek telepíteniük kell a Win2D NuGet-csomagot az effektusok használatához. A telepítési utasításokért tekintse meg a Win2D kezdőlapját .

Implementáció áttekintése

Kézikönyv Visual lekérése a gazdagép eleméhez
Elmosódás effektusfa létrehozása a Win2D és a CompositionEffectSourceParameter használatával.
CompositionEffectBrush létrehozása az effektusfa alapján
Állítsa be a CompositionEffectBrush bemenetét egy CompositionBackdropBrush-ba, amely lehetővé teszi, hogy effektust alkalmazzon a SpriteVisual mögötti tartalomra
Állítsa be a CompositionEffectBrush elemet egy új SpriteVisual tartalmaként, és tegye a SpriteVisualt a gazdaelem gyermekévé. Másik lehetőségként használhat egy XamlCompositionBrushBase-t.
A SpriteVisual méretét kössük a gazdagép méretéhez ExpressionAnimation használatával.

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

További források

A Visual Layer áttekintése
ElementCompositionPreview osztály
Speciális felhasználói felületi és összetételi minták a WindowsCompositionSamples GitHubon
BasicXamlInterop minta
ParallaxingListItems minta

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-03-17

Megosztás a következőn keresztül:

A vizualizációs réteg használata WinUI XAML-vel

A XamlCompositionBrushBase osztály

A XamlLight osztály

A WinUI XAML használata

GetElementVisual

Példa eltolásos animációra

Helytelen

Helyes

SetElementChildVisual

GetAlphaMask metódusok

Receptek

Animáció helyzetének módosítása

Implementáció áttekintése

Árnyék elvetése

Implementáció áttekintése

Fagyos üveg

Implementáció áttekintése

További források

Visszajelzés

További források