异步加载图像

Question

我想用最好的方式在我的 PanoramaPage 中显示图像。我下载一个页面并显示它的信息，然后我想异步加载另一个带有图像的页面。所以我使用 HttpWebRequest 并得到响应。一切都很好，希望这是最好的方式。因此，我创建了 GaleryViewModel，并为页面上的所有图像添加了 url 到我的类中。 但有一个问题。我看不到视图中的图像。这是我的观点：

<ListBox ItemsSource="{Binding Images}" x:Name="listImages" Height="652" Canvas.Top="80">
    <ListBox.ItemTemplate>
        <DataTemplate>
           <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
               <Image Height="100" Width="100" Margin="12,0,9,0" >
                   <Image.Source>
                       <BitmapImage UriSource="{Binding ImgURL}" CreateOptions="BackgroundCreation"/>
                   </Image.Source>
               </Image>
               <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
           </StackPanel>
       </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

这是我的 WebResponse 事件处理程序的内容：

MovieExt movie = this.DataContext as MovieExt;

HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(response);

var photos = from ti in doc.DocumentNode.Descendants("div")
             where ti.Attributes["class"] != null && ti.Attributes["class"].Value == "photo"
             select ti;
Regex rgx = new Regex("http://[0-9a-zA-Z_./]+");

foreach (var photo in photos)
{
    GaleryViewModel fotka = new GaleryViewModel();
    string style = photo.Attributes["style"].Value;

    MatchCollection matches = rgx.Matches(style);
    if (matches.Count > 0)
    {
        foreach (Match match in matches)
            fotka.ImgURL = match.Value;
    }
    fotka.LineOne = "Test";
    movie.Images.Add(fotka);
}
this.DataContext = movie;
this.listImages.ItemsSource = movie.Images;

对于所有 GaleryViewModel 和 MovieExt：

    public class GaleryViewModel : INotifyPropertyChanged
    {
      private string _imgUrl;
      public string ImgURL
      {
        get
        {
            return _imgUrl;
        }
        set
        {
            if (value != _imgUrl)
            {
                _imgUrl = value;
                NotifyPropertyChanged("ImgURL");
            }
        }
    }

    private string _lineOne;
    public string LineOne
    {
        get
        {
            return _lineOne;
        }
        set
        {
            if (value != _lineOne)
            {
                _lineOne = value;
                NotifyPropertyChanged("LineOne");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

public class MovieExt
{
    public string Title { get; set; }
    public string Year { get; set; }
    public string Url { get; set; }
 ...
    public List<GaleryViewModel> Images { get; set; }
 ...
 }

我不确定我做错了什么，但我认为这是绑定的问题。感谢您的帮助

Answer 1

看看这个，您似乎还没有通知 MovieExt.Images 属性已更改。如果不这样做，您的 ListBox 将不会更新其 Items。为此，MovieExt 还需要支持 INotifyPropertyChanged。

Answer 2

您必须将 Uri 转换为 BitmapImage，因为 BitmapImage UriSource 是一个流。请看一下：图像 UriSource 和数据绑定

Answer 3

将加载方法（仅用于测试）替换为：

MovieExt movie = new MovieExt();
movie.Images = new List<GaleryViewModel>();
GaleryViewModel fotka1 = new GaleryViewModel();
fotka1.LineOne = "line1";
fotka1.ImgURL = "http://proservice.kiev.ua/wp-content/uploads/2011/10/apple-logo.jpg";
GaleryViewModel fotka2 = new GaleryViewModel();
fotka2.LineOne = "line2";
fotka2.ImgURL = "http://www.mykhailenko.com/blog/wp-content/uploads/2010/12/apple-logo-history-2.png";
movie.Images.Add(fotka1);
movie.Images.Add(fotka2);
listImages.ItemsSource = movie.Images;

并且它有效

我猜问题出在这一行：

if (matches.Count > 0)

您没有匹配项，因此您的 Url 为空

您可以向我们提供您的服务返回的数据吗在您的上下文中调试代码？

另外，为什么您需要循环来完成此作业？

foreach (Match match in matches)
    fotka.ImgURL = match.Value;