Aracılığıyla paylaş

WinUI XAML ile Görsel Katmanı kullanma

Görsel Katman özelliklerini kullanan çoğu WinUI ve Windows Uygulama SDK'sı uygulaması, ana kullanıcı arabirimi içeriğini tanımlamak için XAML kullanır. WinUI, etkileyici kullanıcı deneyimleri oluşturmak için bu iki teknolojiyi birleştirmeyi kolaylaştıran XAML çerçevesi ve Görsel Katman özellikleri sağlar. 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 temelli animasyonlar ve paralaks
  • Otomatik düzen animasyonları
  • Piksel mükemmel gölgeler

Bu efektler ve animasyonlar mevcut XAML içeriğine uygulanabilir, bu nedenle işlevden yararlanmak için WinUI 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 bkz. ParallaxingListItems örneği. WindowsCompositionSamples deposunda animasyonlar, gölgeler ve efektler uygulamak için birkaç örnek daha vardır.

XamlCompositionBrushBase sınıfı

Microsoft.UI.Xaml.Media.XamlCompositionBrushBase , CompositionBrush ile bir alanı boyayan XAML fırçaları için temel bir 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 XamlCompositionBrushBase başvuru sayfasına bakın.

XamlLight sınıfı

Microsoft.UI.Xaml.Media.XamlLight , CompositionLight ile 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 ışıkları kullanma hakkında daha fazla bilgi için Aydınlatma bölümüne bakın.

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

WinUI XAML ile çalışma

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 WinUI birlikte çalışma yöntemlerini sağlar:

  • GetElementVisual: Bu öğeyi işlemek için kullanılan bir "döküman" Görsel alın
  • SetElementChildVisual: Bir "handin" Görselini bu öğenin görsel ağacının son alt öğesi olarak ayarlar. Bu Görsel, öğenin geri kalanının üzerine çizim yapacaktır.
  • GetElementChildVisual: SetElementChildVisual kullanarak Görsel kümesini alma
  • GetScrollViewerManipulationPropertySet: ScrollViewer'da kaydırma uzaklığını temel alan 60fps animasyonları oluşturmak için kullanılabilecek bir nesne alma

GetElementVisual

ElementCompositionPreview.GetElementVisual, verilen UIElement'i işlemek için kullanılan "geçici" bir Görsel döndürür. Visual.Opacity, Visual.Offset ve 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 . Tarifler).

Uzaklık ve Boyut, 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 yerleşimdeki üst öğesiyle aynı konuma sahip olduğunda, Offset'i değiştirmeli veya hareketlendirmelidir. Boyutun genellikle değiştirilmemesi önerilir, ancak özelliğin erişimi yararlı olabilir. Örneğin, aşağıdaki Drop Shadow ve Frosted Glass örnekleri, bir sunum görselinin boyutunu bir animasyona giriş olarak kullanır.

Ek bir uyarı olarak, el yazısı Görselinin güncellenmiş özellikleri ilgili UIElement'e yansıtılmayacaktır. Örneğin, UIElement.Opacity değerinin 0,5 olarak ayarlanması, ilgili el broşür Görselinin Opaklığını 0,5 olarak ayarlar. Ancak, sunum Görselinin Opaklığının 0,5 olarak ayarlanması, içeriğin yüzde 50 opaklıkta görünmesine neden olur; ancak, ilgili UIElement'in Opaklık özelliğinin değerini değiştirmez.

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

SetElementChildVisual

ElementCompositionPreview.SetElementChildVisual geliştiricinin bir öğenin Görsel Ağacı'nın parçası olarak görünecek bir "handin" Visual temin etmesine 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öntemleri

Image, TextBlock ve Shape öğelerinin her biri, öğenin şekliyle gri tonlamalı bir görüntüyü temsil eden bir CompositionBrush döndüren GetAlphaMask adlı bir yöntem uygular. Bu CompositionBrush , Composition DropShadow için giriş işlevi görebilir, bu nedenle gölge bir 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 Gölgeyi Bırak bölümüne bakın.

Yemek Tarifleri

Animasyonu yeniden konumlandır

Bir geliştirici, Oluşturma Örtük Animasyonlarını kullanarak öğenin düzenindeki değişikliklere üst öğeye göre otomatik olarak animasyon ekleyebilir. Örneğin, aşağıdaki düğmenin Kenar Boşluğu'nu değiştirirseniz, düğme otomatik olarak yeni düzen konumuna geçer.

Uygulamaya genel bakış

  1. Hedef öğenin el ilanını Görsel olarak al
  2. Offset özelliğindeki değişikliklere otomatik olarak animasyon uygulayan bir ImplicitAnimationCollection oluşturma
  3. ImplicitAnimationCollection'ı backing Visual ile ilişkilendirme
<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'e, örneğin resim içeren bir Elips'e piksel açısından mükemmel bir gölge uygulayın. Gölge, uygulama tarafından oluşturulan bir SpriteVisual gerektirdiğinden, ElementCompositionPreview.SetElementChildVisual kullanarak SpriteVisual'ı içerecek bir "host" öğesi oluşturmamız gerekir.

Uygulamaya genel bakış

  1. Host öğesi için el notu Görsel'ini al
  2. Microsoft.UI.Composition DropShadow oluşturun
  3. DropShadow'u, hedef öğeden şeklini bir maske kullanarak alacak şekilde yapılandırın.
    • DropShadow varsayılan olarak dikdörtgendir, dolayısıyla hedef dikdörtgense bu gerekli değildir
  4. Yeni bir SpriteVisual'a gölge ekleyin ve SpriteVisual'ı konak öğesinin alt öğesi olarak ayarlayın
  5. 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 listede, aynı XAML yapısını kullanan önceki C# kodunun C++/WinRT eşdeğeri gösterilmektedir.

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

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ına bakın.

Uygulamaya genel bakış

  1. Konak öğesi için dağıtılacak belge Görseli alma
  2. Win2D ve CompositionEffectSourceParameter kullanarak bulanıklaştırma efekti ağacı oluşturma
  3. Efekt ağacını temel alan bir CompositionEffectBrush oluşturma
  4. CompositionEffectBrush girişini, bir SpriteVisual'ın arkasındaki içeriğe efekt uygulamayı mümkün kılan bir CompositionBackdropBrush olarak ayarlayın.
  5. CompositionEffectBrush değerini yeni bir SpriteVisual'ın içeriği olarak ayarlayın ve SpriteVisual öğesini konak öğesinin alt öğesi olarak ayarlayın. Alternatif olarak XamlCompositionBrushBase kullanabilirsiniz.
  6. 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

  • Last updated on