如何在Windows 10 Creators中正确使用Acrylic Accent（CreateHostBackDropBrush（））？

Question

我想做一些可能有点棘手的事情，因为它是Win 10 Creators Update中的一项新功能：我想使用新的Acrylic Accent功能在UWP应用程序中制作透明的Windows。 我看到微软已经在Fast Insider Ring中引入了Groove和Film &电视。

这是我开发的，采用在Win开发中心的例子和一些其他的答案在这里堆栈溢出代码：

public sealed partial class MainPage : Page 
{ 
    // Some other things 

    private void initializeInterface() 
    { 

     /// Applying Acrylic Accent 
     LayoutRoot.Background = null; 

     GaussianBlurEffect blurEffect = new GaussianBlurEffect() 
     { 
      Name = "Blur", 
      BlurAmount = 5.0f, 
      BorderMode = EffectBorderMode.Hard, 
      Optimization = EffectOptimization.Balanced, 
      Source = new CompositionEffectSourceParameter("source"), 
     }; 

     LayoutRoot.Background = null; 

     var rootVisual = ElementCompositionPreview.GetElementVisual(LayoutRoot as UIElement); 
     var compositor = rootVisual.Compositor; 
     var factory = compositor.CreateEffectFactory(blurEffect); 
     var effectBrush = factory.CreateBrush(); 

     // This is the effect I wanted to use, the "Acrylic Accent", as it is called by MS itself. 
     var backdropBrush = compositor.CreateHostBackdropBrush();    
     effectBrush.SetSourceParameter("source", backdropBrush); 

     var blurVisual = compositor.CreateSpriteVisual(); 
     blurVisual.Brush = effectBrush; 
     ElementCompositionPreview.SetElementChildVisual(LayoutRoot as UIElement, blurVisual); 
    } 
} 

哪里LayoutRoot是用作根面板RelativePanel。

但是有些东西不起作用：什么？ 如何将它应用于UIElement，如Page或Panel？

我真的很感谢你的帮助，谢谢。

Answer 1

自己解决：必须手动指定SpriteVisual大小（使其适合UIElement目标）和UIElement本身的sizeChanged事件。

下面是示例代码，我使用的通用Panel类（为了方便地使用Panel.ActualWidth/ActualHeight属性...），但每UIElement是确定的亚克力效果：

private Compositor compositor; 
    private SpriteVisual hostVisual; 

    private void applyAcrylicAccent(Panel e) 
     { 
      compositor = ElementCompositionPreview.GetElementVisual(e).Compositor; 
      hostVisual = compositor.CreateSpriteVisual(); 
      hostVisual.Size = new System.Numerics.Vector2((float)e.ActualWidth, (float)e.ActualHeight); 

     // You can choose which effect you want, it is indifferent 
     GaussianBlurEffect blurEffect = new GaussianBlurEffect() 
     { 
      Name = "Blur", 
      BlurAmount = 0.0f, 
      BorderMode = EffectBorderMode.Hard, 
      Optimization = EffectOptimization.Balanced, 
      Source = new CompositionEffectSourceParameter("source"), 
     }; 

     var factory = compositor.CreateEffectFactory(blurEffect, null); 
     var effectBrush = factory.CreateBrush(); 

     effectBrush.SetSourceParameter("source", compositor.CreateHostBackdropBrush()); 

     hostVisual.Brush = effectBrush; 
     ElementCompositionPreview.SetElementChildVisual(e, hostVisual); 
    } 

和sizeChanged与目标UIElement（此处称为LayoutRoot）相关的事件：

private void LayoutRoot_SizeChanged(object sender, SizeChangedEventArgs e) 
    { 
     if (hostVisual != null) 
     { 
      hostVisual.Size = new System.Numerics.Vector2((float)e.NewSize.Width, (float)e.NewSize.Height); 
     } 
    } 

享受。

; d

Answer 2

这是为了避免样品XAML代码，当你打算申请亚克力口音其他视觉元素消失：

<SomePanelSubclass "rootGrid"> 
     <SomePanelSubclassForAcrylic> 
      <SomePanelSubclass "AcrylicGrid"/> 
      <!-- Comment: some background is needed in order to make elements more visible --> 
      <SomeElementWithBackgroundProperty Background="SomeBrush" Canvas.ZIndex="ValueAboveZero"/> 
     </SomePanelSubclassForAcrylic> 
     <AllOtherChildrenElements Canvas.ZIndex="ValueAboveZero"/> 
    </SomePanelSubclass> 

你应适用亚克力口音仅对“AcrylicGrid”。 请记住：所有应用了丙烯酸口音的UIElement的所有儿童元素都将“消失”，因此目标丙烯酸UIElement不得有子女。

你可以把其他所有的XAML元素成一个单一的茁壮元素，以简化Canvas.ZIndex东西，为了它仅适用于面板本身。

显然，这仅仅是一个示例代码段，这样你就可以重命名每一个你想要的名称的那些元素。

希望能有所帮助。

;）