如何绑定位于隔离存储中的图像

Question

我需要绑定位于孤立存储中的图像 - 我在这里找到了一个答案，它似乎适用于我的情况。
绑定孤立存储中的图像 但是，这个人后来转向了另一个解决方案，并使用ClientBin存储图像。我的图片将一直不同。现在我使用来自服务器的图像，但我需要将它们保存到孤立存储并绑定到listBox. XAML代码:

Image Width="110" CacheMode="BitmapCache" Source="{Binding ThumbURL}"

代码后台:

public string ThumbURL
    {
        get
        {
            return String.Format("http://localhost:3041/Pictures/thumbs/{0}.jpg", _ID);
        }
        set
        {
            this.OnThumbURLChanging(value);
            this._ThumbURL = value;
            this.OnThumbURLChanged();
            this.OnPropertyChanged("ThumbURL");
        }
    }

有谁能告诉我如何做到这一点？我会非常、非常感激。

请发布一些代码示例。

- infoexpert.it

---

欢迎来到StackOverflow - 很棒的第一个问题！顺便说一下，值得了解一下你可以使用的简单标记语言（特别是对于代码块），这样读者就更容易看出发生了什么。 - Paul Annetts

谢谢，正如你所提到的，这是第一个问题，实际上它是第二个回答的问题，但总体而言是第二个。 - infoexpert.it

Answer 1

要从网上下载图片，请参阅此前的SO问题 - 如何下载并保存网络图片。

与将图像绑定到孤立存储相比，不同之处在于您必须绑定到一个BitmapImage对象，该对象从您的绑定代码对象初始化。我已将您的属性从“ThumbURL”重命名为“ThumbImage”以显示差异。

因此，在XAML中：

Image Width="110" CacheMode="BitmapCache" Source="{Binding ThumbImage}"

在您的绑定对象中 - 假设这张图片不会改变 - 如果它改变了，您就需要适当地引发属性更改事件。(代码已编辑以处理类序列化问题)。

private string _thumbFileName;
public string ThumbFileName
{
    get
    {
        return _thumbFileName;
    }
    set
    {
        _thumbFileName = value;
        OnNotifyChanged("ThumbFileName");
        OnNotifyChanged("ThumbImage");
    }
}

[IgnoreDataMember]
public BitmapImage ThumbImage 
{ 
    get 
    { 
        BitmapImage image = new BitmapImage();                    
        IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication();
        string isoFilename = ThumbFileName;
        var stream = isoStore.OpenFile(isoFilename, System.IO.FileMode.Open);
        image.SetSource(stream);
        return image;
    }     
}

public event PropertyChangedEventHandler PropertyChanged;

private void OnNotifyChanged(string propertyChanged)
{
    var eventHander = PropertyChanged;
    if (eventHander != null)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyChanged));
    }
}

（编辑添加了下载图片的链接）

- Paul Annetts

---

不，绑定需要ThumbImage是ImageSource类型才能正常工作。那个异常看起来是这个更改的副作用：我猜你的绑定类以某种方式被序列化（可能是为了墓碑或存储到隔离存储）。您可以在序列化中使用ThumbFileName {get;set}属性，其中包含Iso Storage中的文件名（替换ThumbURL）。然后将ThumbImage标记为不参与序列化。我会编辑答案... - Paul Annetts

非常感谢您的帮助，这个“神奇”的代码行[IgnoreDataMember]使我的代码工作正常。 是的，你说得对，这是由于存储到独立存储中。 - infoexpert.it

@PaulAnnetts 你好，我对这个问题有疑问，OnNotifyChanged("ThumbFileName");和OnNotifyChanged("ThumbImage");这两个函数是用来做什么的？我需要同时调用吗？我是Windows Phone应用程序开发的新手，在我的应用程序中，我遇到了与问题中提到的位图图像相同的问题。 - Sujiz

@Sujiz 对不起，我已经两年没涉及这个主题了，所以很遗憾无法帮助你。 - infoexpert.it

需要使用OnNotifyChanged来确保XAML页面获取到ThumbFileName和ThumbFileImage的新更新值。这个概念被称为“数据绑定”，在微软开发中被广泛使用：这是使用INotifyPropertyChanged接口的一个示例。请参阅http://msdn.microsoft.com/en-gb/library/windows/apps/xaml/hh464965.aspx进行快速入门。 - Paul Annetts