Xamarin : Adding condition inside isvisible in xaml - xamarin.forms

Question

I am new with xamarin, I am facing an issue in my xamarin forms project.
I have an inside listview-viewcell, having 250 width and height.
Sometimes the value of mediaUrl is null. I want to hide the Image for null mediaUrl values and make visible for other values.
My problem is if the value of the mediaUrl is null showing blank space in the UI. Inside isVisible property how can I apply this condition?
My code is giving below:
<StackLayout>
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Image
WidthRequest="250"
HeightRequest="250"
Source="{Binding mediaUrl}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
Anybody please suggest a solution with working code.
Thanks in advance

Answer 1

You can achieve this using a value converter
Create a converter like this
public class NullToBoolConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return value != null;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
This will return false if the value is null
Register it in your page like this
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:yourNameSpaceToWhereYourConverteClassIs"
x:Class="yourNameSpace.Views.MyPage">
<ContentPage.Resources>
<ResourceDictionary>
<local:NullToBoolConverter x:Key="NullToBoolConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
Then add it like this
<StackLayout>
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Image
WidthRequest="250"
HeightRequest="250"
Source="{Binding mediaUrl}"
IsVisible={Binding mediaUrl, Converter={StaticResource NullToBoolConverter}}/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>

Answer 2

You can also use trigger for that
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding isMediaUrlNull}" Value="True">
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
</Image.Triggers>
Edit
You can also add property in model isMediaUrlNull and try above code
public bool isMediaUrlNull {get {return !string.IsNullOrEmpty(mediaUrl);}}
<Image WidthRequest="250" HeightRequest="250" IsVisible="{Binding mediaUrl}" Source="{Binding mediaUrl}"/>

Answer 3

the solution of Steve Chadbourne is good.
you should declare the converter this :
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SAMPLE.Sample">
<!--RESOURCES-->
<ContentPage.Resources>
<ResourceDictionary>
<local:NullToBoolConverter x:Key="NullToBoolConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<!-- CONTENT -->
<ContentPage.Content>
<ListView >
Use Converter
</ListView>
</ContentPage.Content>