異步加載圖像

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;