我使用Visual Studio編寫了一個通用的Windows平臺應用程序,我想要在我的主網格佈局上獲得簡單的模糊效果,但我不知道如何在網格上應用GaussianBlurEffect對象。我搜索了很長時間,我已經收穫了微軟的文檔,但我不明白Visual Layer part。 如果任何人都可以給我一點關於視覺效果的說明,那就太好了:)如何應用簡單的模糊效果?
對不起,如果我的英語不好,我是法國人。
我使用Visual Studio編寫了一個通用的Windows平臺應用程序,我想要在我的主網格佈局上獲得簡單的模糊效果,但我不知道如何在網格上應用GaussianBlurEffect對象。我搜索了很長時間,我已經收穫了微軟的文檔,但我不明白Visual Layer part。 如果任何人都可以給我一點關於視覺效果的說明,那就太好了:)如何應用簡單的模糊效果?
對不起,如果我的英語不好,我是法國人。
你會發現很多好的樣本對Windows UI DevLabs repository
視覺效果的想法是提供一個低層次的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秒,這將模糊/ unblur圖像連續的動畫:
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);
謝謝你,它工作! – Mandragora
你知道如何動畫BlurAmount屬性嗎? – Mandragora
的可能的複製[模糊的WPF容器的背景](http://stackoverflow.com/questions/7815278/blur-the-wpf-container的背景) – lokusking