ViewModel中应用BlurEffect无效问题求助

我自行实现了MosaicEffect马赛克特效，但特定场景下失效。改用系统自带的System.Windows.Media.Effects.BlurEffect测试，同样无效，说明是实现方法存在问题。

核心问题：从ViewModel（MainWindowViewModel.cs）中动态创建Image对象并应用BlurEffect，触发后图片未呈现模糊效果，仍显示原始状态。

已验证情况：通过XAML定义或代码后台（MainWindow.cs）添加Image并应用特效均能正常工作。尝试将Image放入View面板容器并执行image.UpdateLayout()，仍未解决问题。

相关代码片段 #

ViewModels/MainWindowViewModel.cs 关键代码

public class MainWindowViewModel : BindableBase
{
    public ReactiveCommand BlurEffectImage { get; }

    public MainWindowViewModel()
    {
        BlurEffectImage = new ReactiveCommand().WithSubscribe(() =>
        {
            var mosaic = new MosaicViewModel();
            mosaic.Bitmap = new BitmapImage(new System.Uri("../net7.0-windows10.0.22000.0/Assets/Fm2MhTmakAAlBhz.jpg", System.UriKind.Relative));
            var drawingVisual = new DrawingVisual();
            using (var context = drawingVisual.RenderOpen())
            {
                var mainwindow = App.Current.MainWindow as MainWindow;

                var image = new Image();
                image.Source = mosaic.Bitmap;
                image.DataContext = mosaic;
                image.Width = mosaic.Bitmap.Width;
                image.Height = mosaic.Bitmap.Height;
                RenderOptions.SetBitmapScalingMode(image, BitmapScalingMode.HighQuality);
                mainwindow.test.Content = image;
                image.Effect = new BlurEffect()
                {
                    Radius = 30,
                    KernelType = KernelType.Gaussian,
                };
                image.UpdateLayout();

                BitmapCacheBrush _brush = new BitmapCacheBrush(image);

                context.DrawRectangle(_brush, null, new Rect(0, 0, mosaic.Bitmap.Width, mosaic.Bitmap.Height));
            }
            OpenCvSharpHelper.ImShow("BlurEffectResult", drawingVisual, (int)mosaic.Bitmap.Width, (int)mosaic.Bitmap.Height);
        });
    }
}

Helpers/OpenCvSharpHelper.cs 代码

static class OpenCvSharpHelper
{
    [Conditional("DEBUG")]
    public static void ImShow(string windowTitle, BitmapSource rtb)
    {
        FormatConvertedBitmap newFormatedBitmapSource = new FormatConvertedBitmap();
        newFormatedBitmapSource.BeginInit();
        newFormatedBitmapSource.Source = rtb;
        newFormatedBitmapSource.DestinationFormat = PixelFormats.Bgr24;
        newFormatedBitmapSource.EndInit();

        var mat = OpenCvSharp.WpfExtensions.BitmapSourceConverter.ToMat(newFormatedBitmapSource);
        OpenCvSharp.Cv2.ImShow(windowTitle, mat);
    }

    [Conditional("DEBUG")]
    public static void ImShow(string windowTitle, System.Windows.Media.Visual visual, int width, int height)
    {
        var rtb = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Pbgra32);
        rtb.Render(visual);
        ImShow(windowTitle, rtb);
    }

    [Conditional("DEBUG")]
    public static void ImShow(string windowTitle, VisualBrush brush, int width, int height)
    {
        var rtb = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Pbgra32);
        DrawingVisual visual = new DrawingVisual();
        using (DrawingContext context = visual.RenderOpen())
        {
            context.DrawRectangle(brush, null, new System.Windows.Rect(0, 0, width, height));
        }
        rtb.Render(visual);
        ImShow(windowTitle, rtb);
    }
}

可正常运行的代码示例

Views/MainWindow.xaml 部分代码

<Image
    Grid.Row="1"
    Grid.Column="1"
    Source="../Assets/Fm2MhTmakAAlBhz.jpg">
    <Image.Effect>
        <BlurEffect Radius="30" />
    </Image.Effect>
</Image>
<Image
    x:Name="baseImage"
    Grid.Row="1"
    Grid.Column="2"
    Source="../Assets/Fm2MhTmakAAlBhz.jpg">
    <Image.DataContext>
        <viewModels:MosaicViewModel>
            <viewModels:MosaicViewModel.Bitmap>
                <BitmapImage UriSource="../Assets/Fm2MhTmakAAlBhz.jpg" />
            </viewModels:MosaicViewModel.Bitmap>
        </viewModels:MosaicViewModel>
    </Image.DataContext>
    <Image.Effect>
        <effects:MosaicEffect
            Width="{Binding ElementName=baseImage, Path=ActualWidth, UpdateSourceTrigger=PropertyChanged}"
            Height="{Binding ElementName=baseImage, Path=ActualHeight, UpdateSourceTrigger=PropertyChanged}"
            Bytecode="{Binding Path=Bytecode.Value, UpdateSourceTrigger=PropertyChanged}"
            Cp="10"
            Rp="10" />
    </Image.Effect>
</Image>
<ContentControl
    x:Name="manualBlurEffect"
    Grid.Row="2"
    Grid.Column="1" />
<ContentControl
    x:Name="manualMosaicEffect"
    Grid.Row="2"
    Grid.Column="2" />

Views/MainWindow.cs 部分代码

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        {
            var imageBlurEffect = new Image();
            imageBlurEffect.Source = new BitmapImage(new Uri(@"/Assets/Fm2MhTmakAAlBhz.jpg", UriKind.Relative));
            this.manualBlurEffect.Content = imageBlurEffect;
            var blurEffect = new BlurEffect();
            blurEffect.Radius = 30;
            imageBlurEffect.Effect = blurEffect;
        }
    }
}

解决方案 #

问题原因 #

直接用BitmapCacheBrush捕获Image时，Image的特效还未完成渲染。WPF特效属于异步渲染操作，ViewModel中创建UI元素后，UI线程还没来得及完成特效绘制，导致Brush捕获的是原始图像。

修改代码 #

通过Dispatcher延迟捕获操作，确保UI完成渲染，再将Image渲染到RenderTargetBitmap后创建Brush：

BlurEffectImage = new ReactiveCommand().WithSubscribe(() =>
{
    var mosaic = new MosaicViewModel();
    mosaic.Bitmap = new BitmapImage(new System.Uri("../net7.0-windows10.0.22000.0/Assets/Fm2MhTmakAAlBhz.jpg", System.UriKind.Relative));
    var drawingVisual = new DrawingVisual();
    var mainwindow = App.Current.MainWindow as MainWindow;

    var image = new Image();
    image.Source = mosaic.Bitmap;
    image.DataContext = mosaic;
    image.Width = mosaic.Bitmap.Width;
    image.Height = mosaic.Bitmap.Height;
    RenderOptions.SetBitmapScalingMode(image, BitmapScalingMode.HighQuality);
    image.Effect = new BlurEffect()
    {
        Radius = 30,
        KernelType = KernelType.Gaussian,
    };
    mainwindow.test.Content = image;

    // 延迟执行，确保UI完成特效渲染
    Application.Current.Dispatcher.BeginInvoke(DispatcherPriority.Render, new Action(() =>
    {
        // 将Image渲染到RenderTargetBitmap，确保特效已生效
        var rtb = new RenderTargetBitmap((int)image.Width, (int)image.Height, 96, 96, PixelFormats.Pbgra32);
        rtb.Render(image);

        // 用渲染后的Bitmap创建Brush
        BitmapCacheBrush _brush = new BitmapCacheBrush(rtb);

        using (var context = drawingVisual.RenderOpen())
        {
            context.DrawRectangle(_brush, null, new Rect(0, 0, mosaic.Bitmap.Width, mosaic.Bitmap.Height));
        }
        OpenCvSharpHelper.ImShow("BlurEffectResult", drawingVisual, (int)mosaic.Bitmap.Width, (int)mosaic.Bitmap.Height);
    }));
});

额外说明 #

• 从ViewModel直接操作UI元素违反MVVM设计原则，建议通过绑定或命令传递参数到View层，由View负责创建UI元素和应用特效。
• WPF特效依赖UI线程的渲染周期，延迟操作或强制渲染是确保特效生效的关键。

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