multiple image at the same component (image placeholder) - xaml

Question

In my app, I load an image from URL.
<Image Source="{Binding Image}" />
I want to load a small image from local in advance. After the image from remote is downloaded completely, replace or overwrite this local image.
Is there any simple way to achieve this function?
Such as multiple background image in a div.
http://css-tricks.com/stacking-order-of-multiple-backgrounds/

Answer 1

This is the simplest way to achieve what you desire;
<Grid>
<Image Source="YourLocalImage" />
<Image Source="{Binding Image}" />
</Grid>
So, in your app until your URL image is loaded, your local image will be visible & once your URL image is loaded, that will be visible. See, if this helps.

Answer 2

Not a built-in functionality in xaml...but this would do the trick.
At first you put the local image location as a value in image property. Then you need to have a Image downloaded completed event so that you can detect when Image is successfully downloaded from remote location.
Inside this event you can replace Image property value so that it changes the image in the UI. But make sure your class in which Image is defined has implemented INotifyPropertyChanged interface.
public class MyData : INotifyPropertyChanged{
private string image;
public string Image {
set{
Notify("Image");
image = value;
}
get{ return image; }
}
public event PropertyChangedEventHandler PropertyChanged;
private void Notify(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}