在 WPF MVVM 中绑定图像

Question

我在将图像绑定到我的视图模型时遇到一些问题。我终于摆脱了 XamlParseException，但图像没有出现。我什至在 ViewModel 中对图像进行了硬编码。有人能看到我做错了什么吗？

查看：

<Image HorizontalAlignment="Left" Margin="0,0,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Bottom" Grid.Row="8" Width="200"  Grid.ColumnSpan="2" >
<Image.Source>
    <BitmapImage DecodePixelWidth="200" UriSource="{Binding Path=DisplayedImage, Mode=TwoWay}" />
</Image.Source>

视图模型：

 string _DisplayedImagePath = @"C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg";//string.Empty;
    int _DisplayedImageIndex;
    BitmapImage _DisplayedImage = null;
    public BitmapImage DisplayedImage
    {
        get
        {
            _DisplayedImage = new BitmapImage();
            if (!string.IsNullOrEmpty(_DisplayedImagePath))
            {
                _Rail1DisplayedImage.BeginInit();
                _Rail1DisplayedImage.CacheOption = BitmapCacheOption.OnLoad;
                _Rail1DisplayedImage.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
                _Rail1DisplayedImage.UriSource = new Uri(_DisplayedImagePath);
                _Rail1DisplayedImage.DecodePixelWidth = 200;
                _Rail1DisplayedImage.EndInit();
            }
            return _Rail1DisplayedImage;
        }
        set
        {
            _Rail1DisplayedImage = value;
            OnPropertyChanged("DisplayedImage");
        }
    }

Answer 1

在 WPF 中显示

Image

比这容易得多。试试这个：

<Image Source="{Binding DisplayedImagePath}" HorizontalAlignment="Left" 
    Margin="0,0,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Bottom" 
    Grid.Row="8" Width="200"  Grid.ColumnSpan="2" />

该属性可以只是一个

string

:

public string DisplayedImagePath 
{
    get { return @"C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"; }
}

虽然您确实应该将图像添加到项目根目录中名为

Images

的文件夹中，并将其 Build Action 设置为 Visual Studio 中 Properties Window 中的 Resource...然后您可以使用以下方式访问它们这种格式：

public string DisplayedImagePath 
{
    get { return "/AssemblyName;component/Images/ImageName.jpg"; }
}

---

更新>>>

最后一点提示...如果您遇到控件无法按预期工作的问题，只需在搜索引擎中输入“WPF”、该控件的名称，然后输入“类”一词即可。在本例中，您将键入“WPF Image Class”。顶部结果始终是 MSDN，如果单击链接，您将找到有关该控件的所有信息，并且大多数页面也有代码示例。

---

更新2>>>

如果您按照 MSDN 链接中的示例进行操作，但它不起作用，那么您的问题是不是

Image

控件。使用我建议的

string

属性，试试这个：

<StackPanel>
    <Image Source="{Binding DisplayedImagePath}" />
    <TextBlock Text="{Binding DisplayedImagePath}" />
</StackPanel>

如果您在

TextBlock

中看不到文件路径，那么您可能尚未将

DataContext

设置为视图模型的实例。如果您可以看到文本，则问题出在您的文件路径上。

---

更新3>>>

在 .NET 4 中，上述

Image.Source

值可以工作。然而，微软在 .NET 4.5 中做了一些可怕的更改，破坏了许多不同的东西，因此在 .NET 4.5 中，您需要使用完整的

pack

路径，如下所示：

<Image Source="pack://application:,,,/AssemblyName;component/Images/image_to_use.png">

有关 Pack URI 的更多信息，请参阅 Microsoft Docs 上的WPF 中的 Pack URIs 页面。

Answer 2

如果您有一个已经生成并返回图像类型的进程，您可以更改绑定，而不必修改任何其他图像创建代码。

参考绑定声明中图片的“.Source”。

XAML

<Image Name="imgOpenClose" Source="{Binding ImageOpenClose.Source}"/>

查看模型字段

private Image _imageOpenClose;
public Image ImageOpenClose
{
    get
    {
        return _imageOpenClose;
    }
    set
    {
        _imageOpenClose = value;
        OnPropertyChanged();
    }
}

Answer 3

@Sheridan thx ..如果我尝试在两侧使用“DisplayedImagePath”的示例，它可以使用绝对路径，如您所示。

至于 relative 路径，这就是我总是连接相对路径的方式，我首先在我的项目中包含子目录（！）和图像文件..然后我使用 ~ 字符来表示 bin 路径..

    public string DisplayedImagePath
    {
        get { return @"~\..\images\osc.png"; }
    }

这已经过测试，请参阅下面我在 VS2015 中的解决方案资源管理器..

）

注意：如果您想要 Click 事件，请在图像周围使用 Button 标签,

<Button Click="image_Click" Width="128" Height="128"  Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Left">
  <Image x:Name="image" Source="{Binding DisplayedImagePath}" Margin="0,0,0,0" />
</Button>