如何在 uwp 上模糊网格的背景

本文关键字:网格 背景 模糊 uwp | 更新日期: 2023-09-27 18:26:44

grid background="white"

现在,我想模糊它,例如在ios上模糊。

如何在 uwp 上模糊网格的背景

使用 UWPCommunityToolkit 的 Blur。

<Grid>
    <Grid>
        <interactivity:Interaction.Behaviors>
            <behaviors:Blur x:Name="BlurBehavior" Value="25" Duration="0" 
                              Delay="0" AutomaticallyStart="True"/>
        </interactivity:Interaction.Behaviors>
    </Grid>
    <Grid>
        <!-- Your Content -->
    </Grid>
</Grid>

如果要增加或减少模糊量,请更改行为中的值。

如果需要任何代码示例,请查看此 GitHub 项目。具有磨砂玻璃效果的UWP汉堡菜单,滑动以打开/关闭。

不透明度不是模糊效果。要制作纯模糊效果,您可以使用RendertargetBitmap或Win2D。

我更喜欢使用 Win2D,因为高斯模糊效果是明确的,可以更精确地配置:

using (var stream = await Content.RenderToRandomAccessStream())
{
    var device = new CanvasDevice();
    var bitmap = await CanvasBitmap.LoadAsync(device, stream);
    var renderer = new CanvasRenderTarget(device, 
                                          bitmap.SizeInPixels.Width, 
                                          bitmap.SizeInPixels.Height, bitmap.Dpi);
    using (var ds = renderer.CreateDrawingSession())
    {
        var blur = new GaussianBlurEffect();
        blur.BlurAmount = 5.0f;
        blur.Source = bitmap;
        ds.DrawImage(blur);
    }
    stream.Seek(0);
    await renderer.SaveAsync(stream, CanvasBitmapFileFormat.Png);
    BitmapImage image = new BitmapImage();
    image.SetSource(stream);
    paneBackground.ImageSource = image;
}

如果您想阅读更多相关信息,这里是 MSDN 页面。

您可以使用 Windows 10 周年更新的合成 API 应用模糊。但是,如果您试图模糊窗口或应用程序后面的内容,那是不可能的。另一方面,如果你的网格后面有一张图片,并希望图片模糊,那么这将起作用。

我在这里写了一个类似问题的答案。