2016-10-14 52 views
0

我使用Visual Studio編寫了一個通用的Windows平臺應用程序,我想要在我的主網格佈局上獲得簡單的模糊效果,但我不知道如何在網格上應用GaussianBlurEffect對象。我搜索了很長時間,我已經收穫了微軟的文檔,但我不明白Visual Layer part。 如果任何人都可以給我一點關於視覺效果的說明,那就太好了:)如何應用簡單的模糊效果?

對不起,如果我的英語不好,我是法國人。

+0

的可能的複製[模糊的WPF容器的背景](http://stackoverflow.com/questions/7815278/blur-the-wpf-container的背景) – lokusking

回答

1

你會發現很多好的樣本對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(); 
     } 
    } 
} 

App result

更新:動畫

要動態模糊效果,你必須做兩件事情:

  • 宣佈要動畫
  • 創建動畫

要申報財產的財產,你將有更改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); 
+1

謝謝你,它工作! – Mandragora

+0

你知道如何動畫BlurAmount屬性嗎? – Mandragora