How to set a default source for an Image if binding source is null?

Question

I'm using binding for source of an Image control.

<Image Source="{Binding ImageUri}"/>

But this ImageUri can be null, therefor I want to use a default image, a place holder, for that, which can be in /Assets/PlaceHolder.png for example.

How can I set a default image? thanks. (It's a WP8 app, but should not be different of WPF)

score 34 · Answer 1 · answered Aug 31 '13 at 04:27

34

You can achieve it by setting TargetNullValue

<Image>
    <Image.Source>
        <Binding Path="ImageUri" >
            <Binding.TargetNullValue>
                <ImageSource>/Assets/PlaceHolder.png</ImageSource>
            </Binding.TargetNullValue>
        </Binding>
    </Image.Source>
</Image>

answered Aug 31 '13 at 04:27

Nitesh

7,261
3
30
25

1

I have an application where it loads hundreds of images. How to show a default image until the actual image is loaded? – Arjun K R May 19 '14 at 07:13
@ArjunKR you might want to visit http://stackoverflow.com/questions/19113141/is-it-possible-to-show-default-image-before-original-load-from-server – Fandi Susanto Jul 28 '15 at 06:58
Brilliant! WPF never ceases to amaze me with its veering from simple elegance to frustrating verbosity. – Holf Apr 21 '18 at 14:48
1

Just to add in case it is not obvious, the "ImageUri" is a binding path to the Image control's data context's property "ImageUri" and can be changed to the appropriate path -- it's not part of ImageSource. I also had to specify my ImageSource as an assembly uri for it to work: `/AssemblyName;component/Images/Placeholder.png` – Slate Feb 14 '19 at 12:45

score 4 · Answer 2 · answered Jul 20 '15 at 21:42

4

You can actually go the other way around which is a better experience in my opinion by simply using two Image controls in a Grid layout, one with the local placeholder source and one with the remote Binding. The local image is already there when you your remote binding is null. However if the binding is not null, it automatically covers the local placeholder image once it gets rendered.

<Grid>
    <Image Source="Assets/Placeholder.png"/>
    <Image Source="{Binding ImageUri}"/>
</Grid>

answered Jul 20 '15 at 21:42

Shikhar

1,411
1
11
17

This works in theory but my images have transparent backgrounds. That means that I can see the image below my other image. How can I hide the image underneath? – Sweepster Nov 07 '17 at 00:18
@Sweepster Try using the ImageOpened event of the bound image. Set the opacity of the placeholder image to 0 if the image opened event of the data bound event gets successfully triggered!! – Shikhar Nov 09 '17 at 18:28

ZombieSheep · Answer 3 · 2013-09-26T12:22:29.823

3

You can set the ImageFailed event on your image,

<Image Source="{Binding ImageUri}" ImageFailed="Image_ImageFailed"/>

and use the following C# to load a specific image in its place.

private void Image_ImageFailed(object sender, ExceptionRoutedEventArgs e)
{
    ((Image)sender).Source = new BitmapImage(new Uri("/Assets/MyDefaultImage.png", UriKind.Relative));
}

edited Sep 26 '13 at 12:22

answered Sep 26 '13 at 12:06

ZombieSheep

29,603
12
67
114

Hossein Narimani Rad · Answer 4 · 2019-03-11T09:30:16.460

2

You may try this:

<Image>
    <Image.Source>
        <Binding Path="ImageUri">
            <Binding.TargetNullValue>
                <BitmapImage UriSource="/ProjName;component/Assets/PlaceHolder.png" />                    
            </Binding.TargetNullValue>
        </Binding>
    </Image.Source>
</Image>

edited Mar 11 '19 at 09:30

answered Mar 11 '19 at 07:57

Hossein Narimani Rad

31,361
18
86
116

SeyedPooya Soofbaf · Answer 5 · 2013-09-26T11:22:03.090

You can use ImageFailed event and ChangePropertyAction.

This Code Snippet worked for me:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

<Image x:Name="GeologyMapsLegend" Stretch="Fill" Height="150">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="ImageFailed">
            <ei:ChangePropertyAction PropertyName="Source" TargetName="GeologyMapsLegend">
                <ei:ChangePropertyAction.Value>
                    <ImageSource>
                        /LanSysWebGIS;component/Pictures/Icon/NoImageAvailable.jpg
                    </ImageSource>
                </ei:ChangePropertyAction.Value>
            </ei:ChangePropertyAction>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Image>

I have an application where it loads hundreds of images. How to show a default image until the actual image is loaded? — Arjun K R, May 19 '14 at 07:14

score 1 · Answer 6 · edited Aug 03 '16 at 12:36

1

use TargetNullValue attribute. It is very helpful if I don't want to display any image.

edited Aug 03 '16 at 12:36

CinCout

9,486
12
49
67

answered Aug 03 '16 at 12:23

Muhammad Ammar

11
1
2

score -2 · Answer 7 · edited May 23 '17 at 11:47

-2

You should try to play with FallBackValue here. These two links should provide more help

WPF Binding - Default value for empty string

MSDN

edited May 23 '17 at 11:47

Community

1
1

answered Aug 31 '13 at 02:15

AsitK

651
1
4
14

How to set a default source for an Image if binding source is null?

7 Answers7

Linked