如何在WPF中采用MVVM模式为灰度BitmapImage上色？

我来给你讲讲在WPF的MVVM模式下给灰度BitmapImage上色的靠谱方案，完全贴合MVVM的关注点分离原则，不用碰代码后置，让ViewModel只负责提供原始数据，视图层处理上色逻辑。

核心思路：使用值转换器（IValueConverter） #

在MVVM里，我们要避免在View的代码后台处理UI逻辑，所以最适合的方式是写一个值转换器，把ViewModel里的灰度BitmapImage转换成带色调的图像，然后通过绑定应用到Image控件上。

步骤1：实现灰度转色调的转换器 #

先创建一个实现IValueConverter接口的转换器类，它会负责把灰度图的像素映射到指定色调上：

using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Imaging;

public class GrayscaleToTintedImageConverter : IValueConverter
{
    // 可绑定的色调属性，方便在XAML里灵活设置颜色
    public Color TintColor { get; set; } = Colors.Blue;

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // 如果传入的不是BitmapImage，直接返回原对象
        if (value is not BitmapImage grayscaleImage)
            return value;

        // 创建可写位图来修改像素数据
        var writableBitmap = new WriteableBitmap(grayscaleImage);
        int stride = writableBitmap.PixelWidth * 4; // 每个像素占4字节（BGRA格式）
        byte[] pixels = new byte[stride * writableBitmap.PixelHeight];
        
        // 把原图像的像素拷贝到数组里
        writableBitmap.CopyPixels(pixels, stride, 0);

        // 遍历每个像素，将灰度值应用到指定色调上
        for (int i = 0; i < pixels.Length; i += 4)
        {
            // 灰度图的RGB通道值相同，取任意一个作为灰度值（这里取B通道）
            byte grayValue = pixels[i];
            // 按灰度值比例计算色调后的各通道值，保留原透明度
            pixels[i] = (byte)(TintColor.B * grayValue / 255);       // B通道
            pixels[i + 1] = (byte)(TintColor.G * grayValue / 255);   // G通道
            pixels[i + 2] = (byte)(TintColor.R * grayValue / 255);   // R通道
        }

        // 将修改后的像素写回可写位图
        writableBitmap.WritePixels(new Int32Rect(0, 0, writableBitmap.PixelWidth, writableBitmap.PixelHeight), pixels, stride, 0);
        return writableBitmap;
    }

    // 反向转换不需要实现，直接抛出异常即可
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

步骤2：在XAML中使用转换器 #

接下来在你的ItemsControl的XAML里，先声明这个转换器，然后在Image的Source绑定中引用它。这里我补全了你提供的部分代码：

<!-- 先在资源里声明转换器，这里可以自定义色调颜色 -->
<Window.Resources>
    <local:GrayscaleToTintedImageConverter x:Key="TintConverter" TintColor="#FF4CAF50"/>
</Window.Resources>

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image, Converter={StaticResource TintConverter}}">
                <Image.RenderTransform>
                    <ScaleTransform RenderOptions.BitmapScalingMode="HighQuality"
                                    ScaleX="{Binding Scale}" ScaleY="{Binding Scale}"/>
                </Image.RenderTransform>
            </Image>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

进阶：动态调整色调（完全贴合MVVM） #

如果需要动态改变所有图像的色调，我们可以把转换器的TintColor绑定到ViewModel的属性上，这样不用修改任何视图代码，只需要更新ViewModel的属性就能实现颜色变化：

1. 首先在ViewModel里添加色调属性（记得实现INotifyPropertyChanged接口）：

private Color _tintColor = Colors.Orange;
public Color TintColor
{
    get => _tintColor;
    set
    {
        _tintColor = value;
        OnPropertyChanged(nameof(TintColor)); // 触发属性变更通知
    }
}

2. 然后修改XAML里的转换器声明，绑定到ViewModel的属性：

<local:GrayscaleToTintedImageConverter x:Key="TintConverter" 
                                       TintColor="{Binding DataContext.TintColor, RelativeSource={RelativeSource AncestorType=Window}}"/>

这样你就可以通过修改ViewModel的TintColor属性，动态给所有灰度图切换色调，完全符合MVVM的设计理念。

注意事项 #

• 如果你的图像数量多或者尺寸大，同步处理像素可能会卡顿，可以考虑在转换器里用异步方式处理（记得在UI线程创建WriteableBitmap，像素处理放在后台线程）。
• 确保你的ViewModel里的Image属性是BitmapImage类型，并且已经正确加载灰度图。

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