在WPF MVVM中绑定图像

Question

我在Image中绑定到我的viewmodel时遇到了一些问题.我终于摆脱了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

Image在WPF中显示比这更容易.试试这个:

<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 DisplayedImage 
{
    get { return @"C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"; }
}

虽然您确实应该将图像添加到Images项目根目录中指定的文件夹中,并在Visual Studio 的" 属性"窗口中将" 构建操作"设置为" 资源 " ...然后您可以使用以下格式访问它们:

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

更新>>>

作为最后一个提示......如果您遇到控件无法正常工作的问题,只需键入"WPF",该控件的名称,然后在搜索引擎中输入"class"一词.在这种情况下,您将键入"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">

有关包URI的更多信息,请参阅Microsoft Docs上的WPF页面中的包URI.

Answer 2

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

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

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

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

）

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

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

Answer 3

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

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

XAML

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

查看模型字段

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