CODEWITHSUNDEEP
xamarin.forms
user4458270
user4458270

Reputation:

Xamarin : Adding condition inside isvisible in xaml

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

Upvotes: 3

Views: 6968

Answers (3)

Steve Chadbourne
Steve Chadbourne

Reputation: 6953

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>

Upvotes: 6

Miguel Angel Mu&#241;oz
Miguel Angel Mu&#241;oz

Reputation: 381

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>

Upvotes: 0

Ziyad Godil
Ziyad Godil

Reputation: 2680

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}"/>

Upvotes: 5

Related Questions