Handling null when binding to an Image in XAML

Question

I have an Image element in XAML. I bind the Source property to a string property in my ViewModel. However, sometimes the value is null and then I get errors in the debug window.

I read here: ImageSourceConverter error for Source=null that I could make a converter to return DependencyProperty.UnsetValue if the value is null.

Now I'm wondering if it is possible to do it directly in XAML? Perhaps by using a FallbackValue? I have tried some variants but with no luck.

This is my Image element in XAML:

<Image Name="img" Source="{Binding Path=CurrentImageSource}" Stretch="None" />

And CurrentImageSource is just a string property on the DataContext.

The error message is: System.Windows.Data Error: 23 :

Cannot convert '' from type '' to type 'System.Windows.Media.ImageSource' for 'sv-SE' culture with default conversions; consider using Converter property of Binding. NotSupportedException:'System.NotSupportedException: ImageSourceConverter cannot convert from (null).

Answer 1

I used x:Null with TargetNullValue, that way you get an easy blank image...

<Image Source="{Binding LogoPath, TargetNullValue={x:Null}}" />

That way you don't need to mess around with Triggers or BitmapImages as static resources.

Answer 2

You can check for a null reference using a data trigger:

<Image Name="img" Stretch="None" >
    <Image.Style>
        <Style TargetType="{x:Type Image}">
            <Setter Property="Source" Value="{Binding CurrentImageSource}" /> 
            <Style.Triggers>
                <DataTrigger Binding="{Binding CurrentImageSource}" Value="{x:Null}">
                    <Setter Property="Source" Value="/ImageNullRef;component/errorImage.png" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

Whilst it is not possible to test directly whether two values differ, you can see whether a value is greater or smaller, etc. using this approach Mike Hillberg blogged about.

Answer 3

I haven't tested it, but I think this is what TargetNullValue is for:

<Image Name="img" Source="{Binding Path=CurrentImageSource, TargetNullValue=/ImageNullRef;component/errorImage.png}" Stretch="None" />

Answer 4

I just check the answer of Sascha Hennig. It runs well on my side. I just have a little modification on my side (remove /ImageNullRef; in image resource) <BitmapImage x:Key='defaultImage' UriSource='component/errorImage.png' />