Xamarin : Adding condition inside isvisible in xaml

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 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 2

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