ImageBrush ImageSource x:Bind TargetNullValue different than datatamplate

Question

So, I have a ListView that is x:Bind to a list and a DataTemplate.

The DataTemplate has an Elipse filled with an ImageBrush.

Everything works as it should but:

If an item in the list has a Null value for its string URL image property, the app crashes.

I have tried setting a TargetNullValue but my problem is that the X:DataType of the template is a class from an API, so I cant control it. I want to have an image as a default value in case the item has an image value of null.

In other words, if the item's image URL property is Null, I want XAML to load a predefined image from my Assets folder.

The problem is that because I have set my DataType as the class, anything I x:Bind to has to be within that class.

<Ellipse Width="40" Height="40">
    <Ellipse.Fill>
        <ImageBrush ImageSource="{x:Bind IconUrl, Mode=OneWay,TargetNullValue=/Assets/NoAvatarIcon.png}"/>
    </Ellipse.Fill>
</Ellipse>

The above for example doesn't work for a Null string in ImageSource as the Path is set to the Class.

Right? Any workarounds?

Answer 1

The FallbackValue in Binding and x:Bind is different.

In Binding, FallbackValue is the value to use when the binding is unable to return a value.

A binding uses FallbackValue for cases where the Path doesn't evaluate on the data source at all, or if attempting to set it on the source with a two-way binding throws an exception that's caught by the data binding engine. FallbackValue is also used if the source value is the dependency property sentinel value DependencyProperty.UnsetValue.

But in x:Bind, FallbackValue specifies a value to display when the source or path cannot be resolved. It can't work with DependencyProperty.UnsetValue.

For your scenario, you can use Converter to operate DependencyProperty.UnsetValue just like following code.

public class ImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        object res;        
        res = (value == null ? false : true) ? string.IsNullOrEmpty(value.ToString()) ? null : new BitmapImage(new Uri(value.ToString())) : null;
        return res;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Usage in Xaml File

  <Page.Resources>
        <local:ImageConverter x:Key="cm" />
    </Page.Resources>
    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView x:Name="MyListView" ItemsSource="{x:Bind Items}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:HeadPhoto">
                    <Ellipse Width="40" Height="40">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="{x:Bind PicUri,TargetNullValue=/Assets/pic.png,Converter={StaticResource cm }}" />
                        </Ellipse.Fill>
                    </Ellipse>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
</Page>

Placeholder image effect.