How to display a placeholder image in a list box that have bonded data?

Question

On windows phone 8 I have made a list box bandied with a web server data which are an image and a text sometimes the server returns only text as their are no image uploaded by the user. I need to display a placeholder image.

<ListBox Grid.Row="1"  ItemsSource="{Binding places}" Name="mrx" Margin="0,10,0,0" Loaded="mrx_Loaded">
   <ListBox.ItemTemplate>
     <DataTemplate >
       <StackPanel Orientation="Horizontal" Margin="10,0,10,8">
         <StackPanel  Margin="10,0,10,8">
           <TextBlock Text="{Binding name}" Foreground="Black" FontWeight="Bold" FontSize="40"/>
           <Image Source="{Binding url}" Width="100" Height="100"/>
         </StackPanel>
       </StackPanel>
     </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

Here how I access url:

public BitmapImage h { get; set; }
public BitmapImage url
{
   get { return h; }
   set
   {
     if (h == null)
     {
       h.UriSource = new Uri("profile-placeholder.gif", UriKind.RelativeOrAbsolute);
     }
   }
}

Answer 1

according to me you can try 2 options

1) make a image failed event of the image and when its called then set the default image as source.

2) put the image view inside a grid with background as the default image so if url comes then it will overlap the default image and show you user image and if it fails then the background of the image will be there as default image.

I hope this might help ......

Answer 2

If your h == null when there is no image returned then there is easier way to do what you want - use TargetNullValue in Binding:

<Image Source="{Binding url, TargetNullValue='/Example;component/Resources/placeholder.png'}" Width="100" Height="100"/>

In above case be sure to set BuildAction of placeholder.png as Resource. (Example here is your project name, Resources is a path to the file). You can also bind directly to your h in this case.

If you insist on using designed property then:

I'm not sure how the rest of your code looks like, but but when you have defined binding like this:

<Image Source="{Binding url}" Width="100" Height="100"/>

When the item is being loaded the Getter of url is fired. So using Setter to repleace null with Bitmapimage won't help here (of course if you are not running Setter somewhere else, but defining Setter without value - kind a weird, implement it different or provide separate method.

Check if that would help:

public BitmapImage url
{
    get
    {
        if (h == null)
          return new BitmapImage() { UriSource = new Uri("/Projectname;component/path/profile-placeholder.gif", UriKind.Relative) };
        return h;

    }
}

Setting UriSource depends also how your file is defined in your project (Build Action), you can take a look here.

Answer 3

Add a default image in your assets. Set this image path string as a default value to the "url" that you use for binding. and when you get a web response and parse it, check if there is a valid url path string for an image. If there is a valid url string parsed for the image, then assign it to "url" field else If there is no valid url string for the image, do not set it to the url field. The"url" string field will any way contain the default image that you set. Hope this helps you. Thanks.

Answer 4

See Conditional text formatting XAML WP8

You should bind to url and set conditional trigger if url is null

Answer 5

<Image Source = "{Binding url} " Width="100" Height="100"/>

Here, instead of binding image source to URL directly, bind it to property having URL as a global variable and initiate URL to placeholder URL.

Example:

private string yourURL= "/Resources/Images/placeholder.png";

public string YourURL
{
    get
    {
        return yourURL;
    }
    set
    {
        if (value != yourURL)
        {
            yourURL= value;                   
        }
    }
}

and statement will be like:

<Image Source="{Binding YourURL}" Width="100" Height="100"/>