MultiSelect ListView in Xamarin Forms

In a regular Xamarin Forms ListView, you have the option to select one row at a time, but not multiple at a time. The ListView control itself, is not capable of this, hence we need to determine which rows have been selected, manually. There are two way to accomplish this. We can listen for the ItemSelected event, and manually track each one selected, or we can place a Switch, in each row, for the user to turn on or off.

I have done this both ways, but the first way contains numerous issues to work around such as not being able to select, then deselect a row, then removing the selected styling. In this post, I will be working on the latter method, of including a Switch.

Wrapping Data

Before we even begin with creating the ListView, we need a place to store the state of each row. While you can place a Boolean inside your existing data, it is recommended that you create a wrapper, to hold the state, so that you do not pollute your models.

public class SelectableData<T> 
{ 
    public T Data { get; set; }
    public bool Selected { get; set; } 
}

ListView

Next, you will want to create the ListView, that shows the data and the Switch.  In this example, my Data, just has Name and Description inside it. The wrapper, then contains the Selected Boolean.

<ListView ItemsSource="{Binding DataList}" Margin="20">
    <ListView.ItemTemplate> 
        <DataTemplate> 
            <ViewCell> 
                <Grid Margin="0,0,0,10"> 
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition Width="*" /> 
                        <ColumnDefinition Width="Auto" /> 
                    </Grid.ColumnDefinitions> 
                    <StackLayout VerticalOptions="CenterAndExpand"> 
                        <Label Text="{Binding Data.Name}"  /> 
                        <Label Text="{Binding Data.Description}" FontSize="10" /> 
                    </StackLayout> 
                    <Switch IsToggled="{Binding Selected}" Grid.Column="1" /> 
                </Grid> 
            </ViewCell> 
        </DataTemplate> 
    </ListView.ItemTemplate>
</ListView>

You can place a Finish button or have an even triggered on every toggle change, to then get all Selected items, and use the selected items as you require.

The DataList is just a list of SelectableData<T>.

public class ExampleData
{
    public string Name { get; set; }
    public string Description { get; set; }
}

public List<SelectableData<ExampleData>> DataList { get; set; }

Learn More

If you want to see how this is done in a full project, please look at my MultiSelectListView Github repo. This example, actually starts off with a list of what is selected, which is nothing. You press Edit, select the items, then Finish. It then takes you back to the first screen, to show what has been selected.

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer |
Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

2 Comments

Leave A Comment?