WriteableBitmap 到 MVVM 中的图像源

Question

最终目标：使用 WPF 和 MVVM 打印二维条码：

背景信息（可能不相关）我的解决方案中有两个项目。一个项目控制我的业务逻辑，第二个项目控制标签的打印逻辑、创建和打印。我正在为 IPC 使用命名管道。我正在使用 MVVM 并有一个 Xaml 模板来设计标签，并在运行时填充它的属性并打印它。这一切正常。

更多信息：（可能相关）我正在使用创建二维条码的第三方库。这是有效的，使条形码返回一个可写位图的调用

问题： 我正在尝试将可写位图数据绑定到模板上的 Image 控件。

public void FooBar(string[] LabelProperties)
{
    try
    {
        BarcodeWriter writer = new BarcodeWriter()
        {
           Format = BarcodeFormat.PDF_417,
           Options = new ZXing.Common.EncodingOptions
           {
              Height = 50,
              Width = 132,
              Margin = 0
           }
        };

        var wb = writer.Write("Some String");

        System.Windows.Controls.Image newImage = new System.Windows.Controls.Image()
        {
           Height = 50,
           HorizontalAlignment = HorizontalAlignment.Left,
           Name = "image",
           Stretch = Stretch.None,
           VerticalAlignment = VerticalAlignment.Top,
           Width = 132,
           Source = wb,
        };

        this.BarCodeImage = newImage;
    }
    catch (Exception e)
    {
        Console.WriteLine(e.Message.ToString().Trim());
    }
}

值得注意的是，我不能直接将 WritableBitmap 放到 BarCodeImage.Source 中

this.BarCodeImage.Source = wb;

因为我使用的是 MVVM 设计，所以 BarCodeImage 没有被实例化，所以如果我尝试为其源设置一些东西，它会抛出一个空引用。

模板中的 XAML

<Image Height="50" 
       HorizontalAlignment="Left" 
       Margin="10,2,0,0" 
       Name="image" 
       Stretch="None" 
       VerticalAlignment="Top" 
       Width="132" 
       Source="{Binding lblBarCodeImage}" />

我的想法因为我必须实例化一个新的 Controls.Image() 然后将其设置为 BarCodeImage 它以某种方式打破了这一点。

其他事情我可以显示其他类和设置以证明我的 MVVM 设置正确，但所有其他控件都正确数据绑定 - 尽管它们都是我正在数据绑定的字符串 - 没有其他图像控制。

我也试过将 WritableBitmap 转换为字节数组和tried using this solution, but that also did not work

Answer 1

不要在后面的代码中创建图像控件！

相反，声明一个 ImageSource 类型的视图模型属性，并在 XAML 中将 Image 控件的 Source 属性绑定到该视图模型属性。

查看模型：

public class YourViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private ImageSource barCodeImage;

    public ImageSource BarCodeImage
    {
        get { return barCodeImage; }
        set
        {
            barCodeImage = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("BarCodeImage"));
        }
    }

    ...
}

XAML：

<Image ... Source="{Binding BarCodeImage}"/>

在后面的代码中，将 WriteableBitmap 分配给 BarCodeImage 属性：

yourViewModel.BarCodeImage = wb;

Answer 2

你应该有一个像这样的 BitmapImage 属性：

    private BitmapImage photoSelected;

    public BitmapImage PhotoSelected
    {
        get { return photoSelected; }
        set { photoSelected = value; OnPropertyChanged("PhotoSelected"); }
    }

然后在您希望执行的操作上：

PhotoSelected = new BitmapImage(new Uri(@"pack://application:,,,/Images/4.png"));

将 /Images/4.png 替换为从解决方案级别开始的图像路径。例如，这就是我的解决方案树达到这一点的样子：

XAML 用于绑定：

<Image x:Name="BitMapImage" Source="{Binding PhotoSelected, Mode=TwoWay}" RenderOptions.BitmapScalingMode="HighQuality"/>