XAML ile Görsel Katmanı Kullanma

Görsel Katman özelliklerini kullanan uygulamaların çoğu ana kullanıcı arabirimi içeriğini tanımlamak için XAML kullanır. Windows 10 Yıldönümü Güncelleştirmesi'nde, XAML çerçevesi ve Görsel Katman'da bu iki teknolojiyi birleştirerek etkileyici kullanıcı deneyimleri oluşturmayı kolaylaştıran yeni özellikler vardır. XAML ve Görsel Katman birlikte çalışma işlevselliği, yalnızca XAML API'leri kullanılarak kullanılamayan gelişmiş animasyonlar ve efektler oluşturmak için kullanılabilir. Buna aşağıdakiler dahildir:

Bulanıklık ve buzlu cam gibi fırça efektleri
Dinamik aydınlatma efektleri
Kaydırma odaklı animasyonlar ve paralaks
Otomatik düzen animasyonları
Piksel-mükemmel gölgeler

Bu efektler ve animasyonlar mevcut XAML içeriğine uygulanabilir, bu nedenle yeni işlevden yararlanmak için XAML uygulamanızı önemli ölçüde yeniden yapılandırmanız gerekmez. Düzen animasyonları, gölgeler ve bulanıklaştırma efektleri aşağıdaki Tarifler bölümünde ele alınmıştır. Parallax uygulayan bir kod örneği için, ParallaxingListItems örneğine bakın. WindowsCompositionSamples deposu animasyonlar, gölgeler ve efektler uygulamak için birkaç örnek daha içerir.

XamlCompositionBrushBase sınıfı

XamlCompositionBrush, bir alanı CompositionBrushile boyayan XAML fırçaları için bir temel sınıf sağlar. Bu, bulanıklaştırma veya buzlu cam gibi bileşim efektlerini XAML kullanıcı arabirimi öğelerine kolayca uygulamak için kullanılabilir.

Fırçaları XAML kullanıcı arabirimiyle kullanma hakkında daha fazla bilgi için Fırçalar bölümüne bakın.

Kod örnekleri için XamlCompositionBrushBasebaşvuru sayfasına bakın.

XamlLight sınıfı

XamlLight, CompositionLightile bir alanı dinamik olarak aydınlatan XAML aydınlatma efektleri için bir temel sınıf sağlar.

Aydınlatma XAML kullanıcı arabirimi öğeleri dahil olmak üzere ışık kullanma hakkında daha fazla bilgi için Aydınlatma bölümüne bakın.

Kod örnekleri için XamlLightiçin başvuru sayfasına bakın.

ElementCompositionPreview sınıfı

ElementCompositionPreview, XAML ve Görsel Katman birlikte çalışma işlevselliği sağlayan statik bir sınıftır. Görsel Katmanına ve işlevselliğine genel bakış için bkz. Görsel Katmanı. ElementCompositionPreview sınıfı aşağıdaki yöntemleri sağlar:

GetElementVisual: Bu öğeyi görüntülemek için kullanılan bir "bilgilendirme görseli" alın
SetElementChildVisual: Bu öğenin görsel ağacında son alt öge olarak bir "handin" görseli ayarlanır. Bu Görsel, öğenin geri kalanının üzerine çizim yapacaktır.
GetElementChildVisual: SetElementChildVisual kullanarak Görsel kümesini alma
GetScrollViewerManipulationPropertySet: Kaydırma uzaklığını temel alan 60fps animasyonları oluşturmak için kullanılabilecek bir nesneyi ScrollViewer içinde elde etme.

ElementCompositionPreview.GetElementVisual ile ilgili açıklamalar

ElementCompositionPreview.GetElementVisual, verilen UIElementişlemek için kullanılan bir "dinleyici notu" Görseli döndürür. Visual.Opacity, Visual.Offsetve Visual.Size gibi özellikler, UIElement'in durumuna göre XAML çerçevesi tarafından ayarlanır. Bu, örtük yeniden konumlandırma animasyonları gibi teknikleri etkinleştirir (bkz. Recipes).

Uzaklık ve Boyutu XAML çerçevesi düzeninin sonucu olarak ayarlandığından, geliştiricilerin bu özellikleri değiştirirken veya animasyon oluştururken dikkatli olması gerektiğini unutmayın. Geliştiriciler, yalnızca öğenin sol üst köşesi, düzen içinde üst öğesinin konumuyla aynı olduğunda Ofset'i değiştirmeli veya animasyon uygulamalıdır. Boyut genellikle değiştirilmemelidir, ancak özelliğe erişim faydalı olabilir. Örneğin, aşağıdaki Gölge Efekti ve Buzlu Cam örnekleri, bir el broşürü görselinin boyutunu bir animasyon girişi olarak kullanır.

Ek bir uyarı olarak, el notu Görselinin güncellenmiş özellikleri ilgili UIElement'e yansıtılmayacaktır. Örneğin, UIElement.Opacity değerini 0,5 olarak ayarlamak, ilgili el ilanı görselinin opaklığını da 0,5 olarak ayarlar. Ancak dinleyici notu Görselinin Opaklık 0,5 olarak ayarlanması içeriğin 50% opaklıkta görünmesine neden olur, ancak ilgili UIElement'in Opaklık özelliğinin değerini değiştirmez.

Ofset animasyonu örneği

Yanlış

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

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

Doğru

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

ElementCompositionPreview.SetElementChildVisual yöntemi

ElementCompositionPreview.SetElementChildVisual, geliştiricinin bir öğenin Görsel Ağacında görünecek "handin" adlı bir Görsel sağlamasına olanak tanır. Bu, geliştiricilerin XAML kullanıcı arabiriminde Görsel tabanlı içeriğin görünebileceği bir "Composition Island" oluşturmasına olanak tanır. Görsel tabanlı içerik, XAML içeriğinin aynı erişilebilirlik ve kullanıcı deneyimi garantilerine sahip olmadığından geliştiricilerin bu tekniği kullanma konusunda tutucu olması gerekir. Bu nedenle, genellikle bu tekniğin yalnızca aşağıdaki Tarifler bölümünde bulunanlar gibi özel efektler uygulamak için gerekli olduğunda kullanılması önerilir.

GetAlphaMask yöntemlerini

Image, TextBlockve Shape her biri, öğenin şekliyle gri tonlamalı bir görüntüyü temsil eden bir CompositionBrush döndüren GetAlphaMask adlı bir yöntemi uygular. Bu CompositionBrush, Kompozisyon DropShadowiçin bir giriş işlevi görebilir, böylece gölge dikdörtgen yerine öğenin şeklini yansıtabilir. Bu, metin, alfa içeren görüntüler ve şekiller için piksel mükemmel, kontur tabanlı gölgeler sağlar. Bu API'nin bir örneği için aşağıdaki Drop Gölge'e bakın.

Yemek Tarifleri

Animasyonu yeniden konumlandır

Bir geliştirici, Bileşim Örtük Animasyonları'nı kullanarak, bir öğenin düzenindeki değişikliği üst öğesine göre otomatik olarak canlandırabilir. Örneğin, eğer aşağıdaki düğmenin Kenar Boşluğu değiştirirseniz, otomatik olarak yeni düzen konumuna geçer.

Uygulamaya genel bakış

Hedef öğe için Görsel el ilanını al
ImplicitAnimationCollection oluşturun ki bu, Offset özelliğindeki değişikliklere otomatik olarak animasyon uygulasın
ImplicitAnimationCollection ile arkaplan Görseli ilişkilendirin.

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

Gölge

UIElementüzerine, resim içeren Elips örneğinde olduğu gibi, piksel açısından mükemmel bir gölge efekti uygulayın. Gölge, uygulama tarafından oluşturulan bir SpriteVisual gerektirdiğinden, ElementCompositionPreview.SetElementChildVisualkullanarak SpriteVisual içeren bir "host" öğesi oluşturmamız gerekir.

Uygulamaya genel bakış

Konak öğesi için Visual dağıtım belgesini alın
Windows.UI.Composition DropShadow oluşturun
Hedef öğeden bir maske aracılığıyla şeklini alması için DropShadow yapılandırın.
- DropShadow varsayılan olarak dikdörtgendir, dolayısıyla hedef dikdörtgense bu gerekli değildir
Yeni bir SpriteVisualgölge ekleyin ve SpriteVisual konak öğesinin alt öğesi olarak ayarlayın
ExpressionAnimation kullanarak SpriteVisual boyutunu konağın boyutuna bağlama

<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şağıdaki iki listede aynı XAML yapısını kullanarak önceki C# kodunun eşdeğerleri olan C++/WinRT ve C++/CX gösterilmektedir.

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

Buzlu cam

Arka plan içeriğini bulanıklaştıran ve tonlayan bir efekt oluşturun. Geliştiricilerin efektleri kullanmak için Win2D NuGet paketini yüklemesi gerektiğini unutmayın. Yükleme yönergeleri için win2d giriş sayfası bakın.

Uygulamaya genel bakış

Host öğesi için Visual belgesini alın.
Win2D ve CompositionEffectSourceParameter kullanarak bulanıklaştırma efekti ağacı oluşturma
Etki ağacını temel alarak bir CompositionEffectBrush oluşturun
CompositionEffectBrush girişini CompositionBackdropBrusholarak ayarlayarak, SpriteVisual arkasındaki içeriğe bir efekt uygulanmasına olanak tanır.
yeni SpriteVisualiçeriği olarak CompositionEffectBrush ayarlayın ve SpriteVisual konak öğesinin alt öğesi olarak ayarlayın. Alternatif olarak XamlCompositionBrushBase kullanabilirsiniz.
ExpressionAnimation kullanarak SpriteVisual boyutunu konağın boyutuna bağlama

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

Ek Kaynaklar

Görsel Katmanına genel bakış
ElementCompositionPreview sınıfı
Gelişmiş Kullanıcı Arabirimi ve Oluşturma örnekleri, WindowsCompositionSamples GitHub'da
BasicXamlInterop örneği
ParallaxingListItems örneği

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-06-10

Aracılığıyla paylaş

XAML ile Görsel Katmanı Kullanma

XamlCompositionBrushBase sınıfı

XamlLight sınıfı

ElementCompositionPreview sınıfı

ElementCompositionPreview.GetElementVisual ile ilgili açıklamalar

Ofset animasyonu örneği

Yanlış

Doğru

ElementCompositionPreview.SetElementChildVisual yöntemi

GetAlphaMask yöntemlerini

Yemek Tarifleri

Animasyonu yeniden konumlandır

Uygulamaya genel bakış

Gölge

Uygulamaya genel bakış

Buzlu cam

Uygulamaya genel bakış

Ek Kaynaklar

Geri Bildirim

Ek kaynaklar