Async loading of images

Question

I want to use best way to show images in my PanoramaPage. I download one page and shows it´s information a then I want to async load another page with images. So I am using HttpWebRequest and I get response. Everything is okay and hope this is best way for these. So I create my GaleryViewModel and for all images at page I add url to my class. And there is a problem. I can´t see images in view. This i my view:

<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>

This is content of my WebResponse event handler:

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;

and for all GaleryViewModel and 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; }
 ...
 }

I am not sure what I am doing wrong but I think that is something with binding. Thanks for help

Have you tried putting a breakpoint in `GaleryViewModel.ImgURL.get` and seeing if that is hit? If not that would indicate a binding problem. — Paul Annetts, Feb 07 '12 at 11:15
I tried it and I have hit first set a then multiple times get (for all images which I add) and last get for itemssource. — Libor Zapletal, Feb 07 '12 at 12:30
What is this movie in movie.Images.Add? Is it observableCollection? Also instead of using List<> you should use ObservableCollection<> http://www.codeproject.com/Articles/42536/List-vs-ObservableCollection-vs-INotifyPropertyCha — Teemu Tapanila, Feb 14 '12 at 21:15
I change List to ObservableCollection and it really helps. Thanks very much but I dont know how to add you reputation for this when its in comment. — Libor Zapletal, Feb 20 '12 at 06:53

score 0 · Answer 1 · answered Feb 07 '12 at 11:19

0

Looking at this it looks like you haven't notified that the MovieExt.Images property has changed. Without doing this your ListBox won't update its Items. To do this MovieExt will also need to support INotifyPropertyChanged.

answered Feb 07 '12 at 11:19

Paul Annetts

9,554
1
27
43

I added INotifyPropertyChanged and not help it :/ – Libor Zapletal Feb 07 '12 at 12:34

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

You have to convert Uri to BitmapImage, because BitmapImage UriSource is a stream. Please take a look at this: Image UriSource and Data Binding

edited May 23 '17 at 12:27

Community

1
1

answered Feb 14 '12 at 07:21

Rizky Ramadhan

7,360
4
27
31

score 0 · Answer 3 · edited May 14 '12 at 07:05

Replace loading method (just for test) to:

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;

and it works

I guess the problem is in this line:

if (matches.Count > 0)

You have no matches, so your Url is empty

Can you provide us data your service return to debug code in your context?

Also, why you need loop for this assignment?

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

Async loading of images

3 Answers3