Image control not refreshed in windows phone app

Question

I have a list of images in my app, which are all inside a list box, I am giving the source as a URL.

Everything working fine, am able to show the image from the URL I have given.

When I change a image, and reload my ListBox that change is not reflecting on that image, it shows the old image not the new one.

I am sure, after image change I bind the new image URL to the source, but it shows the old image, I am not able to find why is this happening, here my code

  <ListBox Grid.Row="1" HorizontalAlignment="Left" Margin="0,81,0,0" Name="wishListListBox" VerticalAlignment="Top" Width="480" Visibility="Visible">
        <ListBox.ItemTemplate>
            <DataTemplate>

                    <Image ImageFailed="wishlistImage_ImageFailed_1" x:Name="wishlistImage" HorizontalAlignment="Left" Width="164" Margin="12,54,0,88" Stretch="Fill">
                        <Image.Source>
                            <BitmapImage CreateOptions="DelayCreation,IgnoreImageCache" UriSource="{Binding thumb_image}" />
                        </Image.Source>
                    </Image>

            </DataTemplate>
        </ListBox.ItemTemplate>

    </ListBox>

here is my class from which i set itemsource for my image

[DataContract]
public class WishListResponse : INotifyPropertyChanged
{

 [DataMember]
 public List<string> thumb_images { get; set; }

 public string thumb_image
    {
        get
        {
            if (thumb_images.Count != 0)
                return thumb_images[0];
            else
                return "";
        }
        set
        {
            thumb_images[0] = value;
            OnPropertyChanged(thumb_images[0]);
        }
    }
   public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
 }

and in my main page i bind the item source like this

 public static List<WishListResponse> wishlistList = new List<WishListResponse>();

 wishListListBox.ItemsSource = wishlistList.ToArray();

Can anybody help me to refresh my image control. Thank you.

Answer 1

Okay thank you for your update :-)

First to your original question.. ;-) If you replace your List to an ObservableCollection it will automatically update the UI when you change an entry of the list.

 public ObservableCollection<string> ThumbImages { get; set; }

Now if you ever set ThumbImages new i.e. assign a new object to it, you will have to set the DataContext again to the new reference, for example:

ThumbImages = new ObservableCollection<string>(wishListResponse.thumb_images);
DataContext = ThumbImages;

Now usually you set the datacontext to the model of the view, which in your case is a list of string. You can set the datacontext like this in your code behind:

DataContext = ThumbImages;

Then you can reference the datacontext with the default binding:

 <ListBox ItemsSource="{Binding}">...</ListBox>

So you will no longer need to create a special property on your WishListResponse and set the ItemTemplate again to the Element i.e. in this context again the default binding:

 <ListBox ItemsSource="{Binding}" Grid.Row="1" HorizontalAlignment="Left" Margin="0,81,0,0" Name="wishListListBox" VerticalAlignment="Top" Width="480" Visibility="Visible">

        <ListBox.ItemTemplate>
            <DataTemplate>

                    <Image ImageFailed="wishlistImage_ImageFailed_1" x:Name="wishlistImage" HorizontalAlignment="Left" Width="164" Margin="12,54,0,88" Stretch="Fill">
                        <Image.Source>
                            <BitmapImage CreateOptions="DelayCreation,IgnoreImageCache" UriSource="{Binding}" />
                        </Image.Source>
                    </Image>

            </DataTemplate>
        </ListBox.ItemTemplate>

    </ListBox>

HTH

Answer 2

I tried very simple solution in this issue, and it works for me,

i just changed the image link every time when i need to refresh the image, that means i just append the current time with the image url.

That works fine for me.

Thank you.

Answer 3

I think that the change in code is not notified to the xaml so you will have to inherit the the class from INotifyChange and then make a property change event ... like

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

then in the set of the property of the list after

 listname = value;
OnPropertyChanged("listname");

i hope this might help you ....

Answer 4

i think the reason is you model don't implements INotifyPropertyChanged , so you property has changed ,but can't notify the image binding property, to solve this

one is implements INotifyPropertyChanged ;

another you can do like this

wishListListBox.ItemsSource =null;
wishListListBox.ItemsSource = itemsSource;

it also make your listbox show the new items

but it has problem when the itemsSource changed you must do like this ........

wish this can help you