CODEWITHSUNDEEP
imagewindows-phone-7windows-phone-8windows-phone
Noorul
Noorul

Reputation: 923

Image control not refreshed in windows phone app

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.

Upvotes: 0

Views: 761

Answers (4)

Noorul
Noorul

Reputation: 923

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.

Upvotes: 1

Mark
Mark

Reputation: 8291

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

Upvotes: 1

vincent.liu
vincent.liu

Reputation: 1

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

Upvotes: 0

Sandeep Chauhan
Sandeep Chauhan

Reputation: 1313

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

Upvotes: 0

Related Questions