win10 uwp 毛玻璃

最新推荐文章于 2024-07-15 00:04:35 发布

lindexi_gd

最新推荐文章于 2024-07-15 00:04:35 发布

阅读量6k

点赞数 4

分类专栏： UWP # UWP控件 xaml # win10 uwp 控件入门 # UWP 入门文章标签： win2d 毛玻璃 uwp wpf 控件

本文链接：https://blog.csdn.net/lindexi_gd/article/details/73456809

版权

本文介绍了在UWP中如何使用win2D和Compositor创建毛玻璃效果。通过Compositor可以实现窗口毛玻璃，而win2D则适用于控件的毛玻璃。文中详细讲解了利用win2D对截图进行模糊处理以创建毛玻璃，并提供了简洁的实现方法。

摘要由CSDN通过智能技术生成

毛玻璃在UWP很简单，不会和WPF那样伤性能。

本文告诉大家，如何在 UWP 使用 win2d 做毛玻璃。

毛玻璃可以使用 win2D 方法，也可以使用 Compositor 。

使用 win2d 得到软件内控件毛玻璃，而使用 Compositor 可以获得窗口毛玻璃。

先来说下如何使用 Compositor 做窗口毛玻璃，感觉小伙伴感兴趣的是窗口毛玻璃。

Compositor 创建毛玻璃

先写最简单的页面，只有一个 Grid，给他名称 GlassHost，这个控件用于显示毛玻璃

            <Grid x:Name="GlassHost"></Grid>

然后在构造函数使用InitializeFrostedGlass，这个函数用于在一个控件显示毛玻璃


        public MainPage()
        {
            InitializeComponent();
            InitializeFrostedGlass(GlassHost);
        }

        private void InitializeFrostedGlass(UIElement glassHost)
        {
            Visual hostVisual = ElementCompositionPreview.GetElementVisual(glassHost);
            Compositor compositor = hostVisual.Compositor;
            var backdropBrush = compositor.CreateHostBackdropBrush();
            var glassVisual = compositor.CreateSpriteVisual();
            glassVisual.Brush = backdropBrush;
            ElementCompositionPreview.SetElementChildVisual(glassHost, glassVisual);
            var bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size");
            bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);
            glassVisual.StartAnimation("Size", bindSizeAnimation);
        }

这样就可以看到毛玻璃效果

这个代码是从 http://www.jianshu.com/p/3b49fd3d7edb 复制的

大概解释一下， compositor.CreateHostBackdropBrush() 获得创建之前绘制窗口后面视觉效果的区域，然后把他添加到Grid就可以了。

但是模糊的玻璃可以看不到里面控件，于是就把控件放在一个Grid 的最前，这样看起来背景就是毛玻璃

      <Grid > 最外层的 Grid 不要设置 BackGround 
        <Grid x:Name="GlassHost"></Grid> 把他放在最前
        <ListView ItemsSource="{x:Bind AvaloniaCol}" IsItemClickEnabled="True" ItemClick="ListViewBase_OnItemClick" >
            <ListView.ItemTemplate>
                <DataTemplate>
                   <Grid Background="#FFFFFF" PointerPressed="UIElement_OnPointerPressed">
                        <TextBlock Text="{Binding}"></TextBlock>
                   </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Button Content="添加" Click="ButtonBase_OnClick"></Button> 可以看到按钮，是清晰的