异步加载图像

Question

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

<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是一个流。请看看这个：Image UriSource and Data Binding

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;