UWP随笔（二）前端

毛玻璃效果

产品实现上模仿计算器的毛玻璃，效果较为微弱避免干扰主要信息阅读效果。该套效果仅适用于WIN10，实现步骤：

①前端初始Grid层加入两个层

第一个Grid用于实现毛玻璃效果

第二个Grid用于展示界面信息，背景RGB为220，220，220

<Page>
  <Grid>
     <Grid x:Name="BlurLayer"/>     
     <Grid Background="#D8FFFFFF">
       <TextBlock Text="Hello World"/>
     </Grid>
  </Grid>
</Page>

②后端定义毛玻璃效果实现方法

private void BlurInitialize(UIElement blurLayer)
        {
            Visual hostVisual = ElementCompositionPreview.GetElementVisual(blurLayer);
            Compositor compositor = hostVisual.Compositor;
            var backdropBrush = compositor.CreateHostBackdropBrush();
            var glassVisual = compositor.CreateSpriteVisual();
            glassVisual.Brush = backdropBrush;
            Elem