在 WPF MVVM 中绑定图像 [英] Binding an Image in WPF MVVM

问题描述

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

查看:

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

视图模型:

 string _DisplayedImagePath = @"C:UsersPublicPicturesSample PicturesChrysanthemum.jpg";//string.Empty;int _DisplayedImageIndex;BitmapImage _DisplayedImage = null;public BitmapImage DisplayedImage{得到{_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();}返回 _Rail1DisplayedImage;}放{_Rail1DisplayedImage = 值；OnPropertyChanged("DisplayedImage");}}

解决方案

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

<Image Source="{Binding DisplayedImagePath}" Horizo​​ntalAlignment="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:UsersPublicPicturesSample PicturesChrysanthemum.jpg";}}

尽管您确实应该将图像添加到项目根目录中名为 Images 的文件夹中，并将它们的 Build Action 设置为 ResourceVisual Studio 中的属性窗口...然后您可以使用以下格式访问它们:

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

<小时>

更新>>>

最后一个提示...如果您遇到控件无法按预期工作的问题，只需在搜索引擎中输入WPF"、该控件的名称，然后输入类"一词.在这种情况下，您应该输入WPF Image Class".最重要的结果将始终是 MSDN，如果您单击该链接，您将找到有关该控件的所有信息，并且大多数页面也有代码示例.

<小时>

更新 2 >>>

如果您按照指向 MSDN 的链接中的示例操作但它不起作用，那么您的问题不是Image 控件.使用我建议的 string 属性，试试这个:

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

如果您在 TextBlock 中看不到文件路径，那么您可能没有将 DataContext 设置为您的视图模型的实例.如果您可以看到文本，那么问题出在您的文件路径上.

<小时>

更新 3 >>>

在 .NET 4 中，上述 Image.Source 值将起作用.但是，Microsoft 在 .NET 4.5 中做了一些可怕的更改，这些更改破坏了许多不同的东西，因此在 .NET 4.5 中，您需要使用完整的 pack 路径，如下所示:

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

<块引用>

有关包 URI 的更多信息，请参阅 在 WPF 中打包 URI Microsoft Docs 页面.

I am having some trouble binding in Image to my viewmodel. I finally got rid of the XamlParseException, but the image does not come up. I even hard coded the image in the ViewModel. Can someone see what I am doing wrong?

View:

<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>

ViewModel:

 string _DisplayedImagePath = @"C:UsersPublicPicturesSample PicturesChrysanthemum.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");
        }
    }

解决方案

Displaying an Image in WPF is much easier than that. Try this:

<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" />

And the property can just be a string:

public string DisplayedImage 
{
    get { return @"C:UsersPublicPicturesSample PicturesChrysanthemum.jpg"; }
}

Although you really should add your images to a folder named Images in the root of your project and set their Build Action to Resource in the Properties Window in Visual Studio... you could then access them using this format:

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

---

UPDATE >>>

As a final tip... if you ever have a problem with a control not working as expected, simply type 'WPF', the name of that control and then the word 'class' into a search engine. In this case, you would have typed 'WPF Image Class'. The top result will always be MSDN and if you click on the link, you'll find out all about that control and most pages have code examples as well.

---

UPDATE 2 >>>

If you followed the examples from the link to MSDN and it's not working, then your problem is not the Image control. Using the string property that I suggested, try this:

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

If you can't see the file path in the TextBlock, then you probably haven't set your DataContext to the instance of your view model. If you can see the text, then the problem is with your file path.

---

UPDATE 3 >>>

In .NET 4, the above Image.Source values would work. However, Microsoft made some horrible changes in .NET 4.5 that broke many different things and so in .NET 4.5, you'd need to use the full pack path like this:

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

For further information on pack URIs, please see the Pack URIs in WPF page on Microsoft Docs.

这篇关于在 WPF MVVM 中绑定图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！