Question

我用Visual Studio编写了一个通用的Windows平台应用程序，我希望在我的主网格布局上获得一个简单的模糊效果，但我不知道如何在我的网格上应用GaussianBlurEffect对象。我搜索了很长时间，并且我已经阅读了Microsoft文档，但我不理解Visual Layer part。如果有人能给我一些关于视觉效果的解释，那就太好了:)。

对不起，如果我的英语不好，我就是法国人。

Answer 1

你会在Windows UI DevLabs repository

上找到很多好的样本

Visuals的想法是提供一个低级API（但不低于DirectX）来处理UI上的大量GPU加速效果。它允许您绘制所需的内容或在渲染上创建一些效果。

这是一个非常基本的示例，展示如何在网格上应用模糊效果。（它适用于任何其他UIElement）。

此代码在XAML渲染器用于渲染网格的图层上添加了一个图层。此最新图层将在XAML渲染器渲染的图像顶部应用效果。

页面的XAML：

<Page
x:Class="BlurSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BlurSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="MainGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Rectangle Fill="Red" />
    <Rectangle Fill="Green" Grid.Column="1" />
    <Rectangle Fill="Blue" Grid.Row="1" Grid.Column="1" />
    <Rectangle Fill="Yellow" Grid.Row="1" />
</Grid>

背后的代码：

public sealed partial class MainPage : Page
{
    private CompositionEffectBrush  brush;
    private Compositor              compositor;

    public MainPage()
    {
        this.InitializeComponent();

        MainGrid.SizeChanged    += OnMainGridSizeChanged;

        compositor      = ElementCompositionPreview.GetElementVisual(MainGrid).Compositor;

        // we create the effect. 
        // Notice the Source parameter definition. Here we tell the effect that the source will come from another element/object
        var blurEffect  = new GaussianBlurEffect
        {
            Name        = "Blur",
            Source      = new CompositionEffectSourceParameter("background"),
            BlurAmount  = 100f,
            BorderMode  = EffectBorderMode.Hard,
        };

        // we convert the effect to a brush that can be used to paint the visual layer
        var blurEffectFactory   = compositor.CreateEffectFactory(blurEffect);
        brush                   = blurEffectFactory.CreateBrush();

        // We create a special brush to get the image output of the previous layer.
        // we are basically chaining the layers (xaml grid definition -> rendered bitmap of the grid -> blur effect -> screen)
        var destinationBrush    = compositor.CreateBackdropBrush();
        brush.SetSourceParameter("background", destinationBrush);

        // we create the visual sprite that will hold our generated bitmap (the blurred grid)
        // Visual Sprite are "raw" elements so there is no automatic layouting. You have to specify the size yourself
        var blurSprite          = compositor.CreateSpriteVisual();
        blurSprite.Size         = new Vector2((float) MainGrid.ActualWidth, (float) MainGrid.ActualHeight);
        blurSprite.Brush        = brush;

        // we add our sprite to the rendering pipeline
        ElementCompositionPreview.SetElementChildVisual(MainGrid, blurSprite);
    }

    private void OnMainGridSizeChanged(object sender, SizeChangedEventArgs e)
    {
        SpriteVisual blurVisual = (SpriteVisual) ElementCompositionPreview.GetElementChildVisual(MainGrid);

        if (blurVisual != null)
        {
            blurVisual.Size = e.NewSize.ToVector2();
        }
    }
}

更新：动画

要为模糊效果设置动画，您必须做两件事：

声明要制作动画的属性
制作动画

要声明属性，您必须更改blurEffectFactory创建。请注意Blur.BlurAmount属性的声明：

// we convert the effect to a blur that can be used to paint the visual layer
var blurEffectFactory   = compositor.CreateEffectFactory(blurEffect, new[] { "Blur.BlurAmount" });
brush           = blurEffectFactory.CreateBrush();

声明后，您可以在任何想要的动画中使用Blur.BlurAmount属性。在这里，我宣布一个3秒的连续动画，它会模糊/解开图像：

var blurAnimation       = compositor.CreateScalarKeyFrameAnimation();
blurAnimation.InsertKeyFrame(0.0f, 100.0f);
blurAnimation.InsertKeyFrame(0.5f, 0.0f);
blurAnimation.InsertKeyFrame(1.0f, 100.0f);
blurAnimation.Duration  = TimeSpan.FromSeconds(3);
blurAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
brush.StartAnimation("Blur.BlurAmount", blurAnimation);

如何应用简单的模糊效果？

1 个答案: