Xamarin forms: Hide and show listview items based on a string value

Question

I have a listview like the following picture. There is a more icon(in blue color) and switch on the right side of each list item.

I have a string variable called type, if "type" value is "switch", I need to hide the more icon from the list and show switch icon only and if the "type" value is "more" hide the switch from the list and show more icon only.

The more and switch are inside listview like below:

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                    <StackLayout>
                        //Items like profile image name 
                        <Image   //more icon     />
                        <Switch/>
                    </StackLayout>
                </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Thanks in advance

The DataTemplateSelector groups together various DataTemplate. You could have two DataTemplate , one with the content and the other with 0 high. — Miguel Angel Muñoz
– Miguel Angel Muñoz, Commented Apr 11, 2018 at 16:14

valdetero · Accepted Answer · 2018-04-11 15:17:10Z

1

You can try to create a converter:

public class StringToBoolConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if ((string)value == "switch")
        {
            if ((string)parameter == "Image") return false;

            return true;
        }
        if ((string)parameter == "Image") return true;
        return false;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Then use this in the page xaml:

<ContentPage.Resources>
    <ResourceDictionary>
        <local:StringToBoolConverter x:Key="stringToBool" />
    </ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
    <ListView x:Name="MyListView">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <StackLayout Orientation="Horizontal">
                            <Image IsVisible="{Binding Path=type, Converter={StaticResource stringToBool}, ConverterParameter=Image}" />
                            <Switch IsVisible="{Binding Path=type, Converter={StaticResource stringToBool}, ConverterParameter=Switch}"/>
                        </StackLayout>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Convert the string to bool, and use a parameter to tell the converter which control should be hidden.

edited Apr 11, 2018 at 15:17

valdetero

4,6522 gold badges33 silver badges46 bronze badges

answered Apr 11, 2018 at 8:02

Luting

6,6512 gold badges16 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sreejith Sree Over a year ago

Where is the type check happening?

Luting Over a year ago

@SreejithSree I misunderstood your meaning. Please see my updating.

Sreejith Sree Over a year ago

I added your codes, but in both cases, both icons are showing.

Luting Over a year ago

@SreejithSree I make a simple sample for you here

valdetero · Accepted Answer · 2018-04-11 15:15:32Z

You could create a converter (like Land Lu mentioned) or you could just create a property for each. If you're only going to do it for just a couple of items, then a property is good enough. If you have a bunch of them, then using a converter would probably be a better approach.

In your BindingContext for this page (should be the ViewModel), add two new properties:

public bool CanShowSwitch => type == "switch";
public bool CanShowMore => type == "more";

With "type" being a public string property in this same class. Now just update your xaml to add the IsVisible property:

<Image IsVisible="{Binding CanShowMore}" />
<Switch IsVisible="{Binding CanShowSwitch}"/>

Alternatively, if there is only two items, and you want to show either/or, you could have only one property and use an inverse boolean converter, but at that point, you're using a converter and might as well go with the other converter approach. All three are different ways to solve the same issue.

Collectives™ on Stack Overflow

Xamarin forms: Hide and show listview items based on a string value

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related