Don't render Image when Image.Source is empty - xaml

Question

In the ListView, I need to show some images and text, only display the text when the Image.Source is empty. How to do?
<ListView ItemsSource="{x:Bind ViewModel.News}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="home:NormalNews">
<StackPanel>
<TextBlock Text="{x:Bind Title}"/>
<Image Source="{x:Bind Thumbnail}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
ViewModel Data Source like:
News.Add(new NormalNews{ Title = "title1", Thumbnail = "http://a.com/test.jpg" });
News.Add(new NormalNews{ Title = "title2", Thumbnail = "" });
When I tried to run this page, it stopped running.

Answer 1

You can handle this using xaml converters.
Add a converter and define a key for it in your page.
In XAML page
<converter:ImageUriConverter x:Key="ImageUriConvert"/>
In your list
<Image Source="{Binding Thumbnail,Converter={StaticResource ImageUriConvert}}"/>
Converter class code
class ImageUriConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value.ToString() == string.Empty)
{
return new BitmapImage();
}
return new BitmapImage(new Uri(value.ToString()));
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}

Answer 2

While you are populating the ViewModel object, do this:
ViewModel.News.Add(new NormalNews{
Thumbnail=(the Thumbnail source which you will be using),
Title=(the Thumbnail source which you will be using)==""?"Your Title":""});
This will set your Title to the specified string when your Thumbnail source is empty.
Hope this helps.