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

问题描述

我有一些麻烦图像到我的视图模型绑定。我终于摆脱了XamlParseException的，但图像不上来。我甚至很难codeD中的视图模型的图像。有人可以看到我在做什么错了？

查看：

 ＆lt;图像的Horizo​​ntalAlignment =左保证金=0,0,0,0NAME =此搜索拉伸=填充VerticalAlignment =底Grid.Row = 8宽度=200Grid.ColumnSpan =2＆GT;
＆LT; Image.Source＆GT;
    ＆LT; BitmapImage的德codePixelWidth =200UriSource ={绑定路径= DisplayedImage，模式=双向}/＆GT;
＆LT; /Image.Source>
 

视图模型：

 字符串_DisplayedImagePath = @C：\\用户\\公用\\图片\\样品图片\\ Chrysanthemum.jpg; //的String.Empty;
    INT _DisplayedImageIndex;
    BitmapImage的_DisplayedImage = NULL;
    公众的BitmapImage DisplayedImage
    {
        得到
        {
            _DisplayedImage =新的BitmapImage（）;
            如果（！string.IsNullOrEmpty（_DisplayedImagePath））
            {
                _Rail1DisplayedImage.BeginInit（）;
                _Rail1DisplayedImage.CacheOption = BitmapCacheOption.OnLoad;
                _Rail1DisplayedImage.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
                _Rail1DisplayedImage.UriSource =新的URI（_DisplayedImagePath）;
                _Rail1DisplayedImage.De codePixelWidth = 200;
                _Rail1DisplayedImage.EndInit（）;
            }
            返回_Rail1DisplayedImage;
        }
        组
        {
            _Rail1DisplayedImage =价值;
            OnPropertyChanged（DisplayedImage）;
        }
    }
 

解决方案

显示一个图片在WPF较容易得多。试试这个：

 ＆lt;图像来源={结合DisplayedImagePath}的Horizo​​ntalAlignment =左
    保证金=0,0,0,0NAME =此搜索拉伸=填充VerticalAlignment =底
    Grid.Row =8宽度=200Grid.ColumnSpan =2/＆GT;
 

和该属性可以只是一个字符串：

 公共字符串DisplayedImage
{
    得到{@C：\\用户\\公用\\图片\\样品图片\\ Chrysanthemum.jpg }
}
 

虽然你真的应该你的图片添加到文件夹名为在项目的根目录下的图像并设置它们的生成操作的到的资源的在属性窗口的Visual Studio中...然后你可以使用此格式访问它们：

 公共字符串DisplayedImage
{
    {返回/AssemblyName;component/Images/ImageName.jpg }
}
 

---

更新>>>

作为最后一个提示......如果你曾经有预期控制不灵的问题，只需键入WPF，该控件的名称，然后在搜索引擎中的词类。在这种情况下，你会键入WPF图像类。顶部的结果将永远是MSDN，如果你点击链接，你会发现所有关于控制和大多数页面有code的例子也是如此。

---

更新2 >>>

如果您是从链接到MSDN的例子和它不工作，那么你的问题的不的的图片控制。使用字符串属性，我建议，试试这个：

 ＆LT;＆StackPanel的GT;
    ＆lt;图像来源={结合DisplayedImagePath}/＆GT;
    ＆LT; TextBlock的文本={结合DisplayedImagePath}/＆GT;
＆LT; / StackPanel的＆GT;
 

如果您无法看到的TextBlock ，那么你可能还没有设置文件路径的的DataContext 您的视图模型的实例。如果你的可以的看到文字，那么问题是您的文件的路径。

---

更新3 >>>

在.NET 4中，上述 Image.Source 值会工作。不过，微软取得了.NET 4.5，打破很多不同的东西，所以在.NET 4.5，你需要使用完整的包路径类似这样的一些可怕的变化：

 ＆lt;图像源=包：//应用：,,, /的AssemblyName;组件/图片/ image_to_use.png＆GT;
 

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:\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");
        }
    }

解决方案

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:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.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">

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