WPF中无需图片如何实现嵌套Grid的背景模糊效果？

先修正基础布局的错误 #

你提供的原始XAML存在语法和逻辑错误：

• x:name的正确写法是x:Name（WPF对XAML属性大小写敏感）
• Grid.Background只能赋值Brush类型，不能直接放置TextBlock，应把TextBlock作为Grid的子元素放在底层。

修正后的基础结构：

<UserControl>
    <Grid x:Name="Grid1">
        <!-- 底层的背景内容（要被模糊的TextBlock） -->
        <TextBlock Text="需要模糊的文本" FontSize="48" Foreground="#666"/>
        <!-- 上层的Grid2，需要实现模糊背景 -->
        <Grid x:Name="Grid2">
            <!-- Grid2的自定义内容 -->
        </Grid>
    </Grid>
</UserControl>

方案一：使用VisualBrush + BlurEffect（纯XAML实现） #

这是最简洁的方案，通过VisualBrush捕获底层背景内容的视觉，再给这个Brush添加模糊效果，作为Grid2的背景。

为避免递归模糊（Grid2的内容被重复捕获），建议把背景内容放在单独容器中：

<UserControl>
    <Grid x:Name="Grid1">
        <!-- 单独容器存放要模糊的背景元素 -->
        <Grid x:Name="BackgroundContent">
            <TextBlock Text="需要模糊的文本" FontSize="48" Foreground="#666"/>
            <!-- 可添加其他背景元素，如形状、渐变等 -->
        </Grid>

        <!-- 上层的Grid2 -->
        <Grid x:Name="Grid2">
            <Grid.Background>
                <VisualBrush Visual="{Binding ElementName=BackgroundContent}">
                    <VisualBrush.Effect>
                        <!-- 模糊半径，取值0-100，数值越大模糊程度越高 -->
                        <BlurEffect Radius="8"/>
                    </VisualBrush.Effect>
                </VisualBrush>
            </Grid.Background>

            <!-- Grid2的上层清晰内容 -->
            <Border Background="White" Padding="10" CornerRadius="4" 
                    HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="清晰的上层内容" FontSize="20"/>
            </Border>
        </Grid>
    </Grid>
</UserControl>

方案细节说明 #

• VisualBrush会实时绑定BackgroundContent的视觉，当背景内容变化时，模糊效果自动更新。
• 调整BlurEffect.Radius可控制模糊强度，数值越大性能消耗略高，需根据需求平衡效果和性能。
• 如果Grid2不是全屏覆盖，可设置VisualBrush.Stretch属性（如Stretch="None"）匹配背景内容尺寸。

方案二：使用RenderTargetBitmap + BlurEffect（代码后台实现，适合动态场景） #

如果背景内容需要动态更新（比如文本、元素尺寸变化），或者需要更灵活的模糊控制，可通过后台代码渲染背景内容到位图，再添加模糊效果。

XAML结构 #

<UserControl x:Class="YourNamespace.YourUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="Grid1">
        <Grid x:Name="BackgroundContent">
            <TextBlock x:Name="DynamicText" Text="动态文本" FontSize="48" Foreground="#666"/>
        </Grid>
        <Grid x:Name="Grid2">
            <!-- 上层清晰内容 -->
            <Border Background="White" Padding="10" CornerRadius="4" 
                    HorizontalAlignment="Center" VerticalAlignment="Center">
                <Button Content="点击修改文本" Click="Button_Click"/>
            </Border>
        </Grid>
    </Grid>
</UserControl>

后台代码 #

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Effects;
using System.Windows.Media.Imaging;

namespace YourNamespace
{
    public partial class YourUserControl : UserControl
    {
        public YourUserControl()
        {
            InitializeComponent();
            UpdateBlurredBackground();
            // 监听背景容器尺寸变化，自动更新模糊背景
            BackgroundContent.SizeChanged += (s, e) => UpdateBlurredBackground();
        }

        /// <summary>
        /// 更新Grid2的模糊背景
        /// </summary>
        private void UpdateBlurredBackground()
        {
            // 捕获背景容器的视觉到位图
            var renderBitmap = new RenderTargetBitmap(
                (int)BackgroundContent.ActualWidth,
                (int)BackgroundContent.ActualHeight,
                96, 96,
                PixelFormats.Pbgra32);
            renderBitmap.Render(BackgroundContent);

            // 创建带模糊效果的ImageBrush
            var blurredBrush = new ImageBrush(renderBitmap);
            blurredBrush.Effect = new BlurEffect { Radius = 8 };

            // 赋值给Grid2的背景
            Grid2.Background = blurredBrush;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            DynamicText.Text = "文本已更新";
            UpdateBlurredBackground();
        }
    }
}

方案细节说明 #

• 每次背景内容变化时，需手动调用UpdateBlurredBackground()刷新模糊效果。
• 适合需要动态修改背景内容、或对模糊效果做复杂逻辑控制的场景。
• 性能消耗略高于纯XAML方案，但对于常规UI元素影响不大。

内容的提问来源于stack exchange，提问作者saurabh