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?
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.