Articles in this section
Category / Section

How to achieve multi selection drop down list items in Xamarin ListView?

1 min read

SfListView can be displayed as a drop-down view while tapping button through a custom ContentView. By setting the SelectionMode property value as ‘Multiple’, get the collection of items selected using the SelectedItems property. Change the image source inside the ItemTemplate of SfListView to achieve multi selection drop down view as like below.

 

C#

public partial class MainPage : ContentPage
{
  public MainPage()
  {
    InitializeComponent();
  }
 
  private void ListView_SelectionChanged(object sender, ItemSelectionChangedEventArgs e)
  {
    // To remove the unselected items from the list
    if (e.RemovedItems.Count > 0)
    {
      var removeditems = e.RemovedItems[0] as Contacts;
      removeditems.IsDone = !removeditems.IsDone;
    }
    entry.Text = null;
    var items = listView.SelectedItems;
 
    // Need to display the selected items in the combo box entry
    for (int i = 0; items.Count > i; i++)
    {
      var item = items[i] as Contacts;
      item.IsDone = true;
      if (i == items.Count - 1)
        entry.Text = entry.Text + item.ContactName + " . ";
      else
        entry.Text = entry.Text + item.ContactName + " , ";
     }
   }
 
   private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
   {
     // Need to Hide/Show the PopUpView when tapped the down arrow image button
     if (!popUpLayout.IsVisible)
       popUpLayout.ShowPopup();
     else
       popUpLayout.Dismiss();
   }
 }
 
 private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
 {
   searchBar = (sender as SearchBar);
   if (listView.DataSource != null)
   {
     this.listView.DataSource.Filter = FilterContacts;
     this.listView.DataSource.RefreshFilter();
   }
 }
 
 private bool FilterContacts(object obj)
 {
   if (searchBar == null || searchBar.Text == null)
     return true;
 
   var contacts = obj as Contacts;
   if (contacts.ContactName.ToLower().Contains(searchBar.Text.ToLower())
                 || contacts.ContactName.ToLower().Contains(searchBar.Text.ToLower()))
     return true;
   else
     return false;
  }
 
  protected override void OnSizeAllocated(double width, double height)
  {
    // To set size for the custom PopUpView
    viewModel.PageWidth = (width / 2) - 50;
    viewModel.PageHeight = (height / 2);
    base.OnSizeAllocated(width, height);
  }
}
 
// Custom PopUpView
public class PopUpView:ContentView
{
  public void ShowPopup()
  {
    this.IsVisible = true;
  }
 
  public void Dismiss()
  {
    this.IsVisible = false;
  }
}

 

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewSample;assembly=ListViewSample"
             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable"
             x:Class="ListViewSample.MainPage">
    
   <ContentPage.Resources>
        <ResourceDictionary>
            <helpers:InverseBoolConverter x:Key="inverseBoolConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    
    <ContentPage.BindingContext>
        <local:ContactsViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
 
    <ContentPage.Content>
        <Grid RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
 
            <StackLayout BackgroundColor="Bisque" x:Name="stack" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Grid x:Name="stackgrid" HorizontalOptions="Center" Margin="0,15,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid BackgroundColor="#d3d3d3" WidthRequest="{Binding PageWidth}" HeightRequest="50" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
                        <Label x:Name="entry" HorizontalOptions="FillAndExpand" VerticalOptions="Center" />
                    </Grid>
                    <Image Source="GroupExpand.png" HeightRequest="50" HorizontalOptions="Start" Grid.Column="1" VerticalOptions="Start">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                        </Image.GestureRecognizers>
                    </Image>
                </Grid>
                <local:PopUpView x:Name="popUpLayout" 
                                 HorizontalOptions="Center" VerticalOptions="Center"
                                 IsVisible="{Binding ShowPopUp, Mode=TwoWay}">
                    <local:PopUpView.Content>
                        <Grid HorizontalOptions="Center" Margin="0,15,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="45"/>
                            </Grid.ColumnDefinitions>
                            <StackLayout x:Name="PopUpStack" BackgroundColor="#d3d3d3" HeightRequest="{Binding PageHeight}" WidthRequest="{Binding PageWidth}">
                                <SearchBar x:Name="searchBar" TextChanged="SearchBar_TextChanged" HeightRequest="50"/>
                                <listView:SfListView x:Name="listView" BackgroundColor="#d3d3d3" SelectionBackgroundColor="Transparent" SelectionMode="Multiple" ItemsSource="{Binding contactsinfo}" SelectionChanged="ListView_SelectionChanged">
                                    <listView:SfListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell>
                                                <ViewCell.View>
                                                    <Grid>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="50"/>
                                                            <ColumnDefinition Width="*"/>
                                                        </Grid.ColumnDefinitions>
                                                        <Image Source="Checked.png" HeightRequest="20" IsVisible="{Binding IsDone}"/>
                                                        <Image Source="Unchecked.png" HeightRequest="20" IsVisible="{Binding IsDone, Converter={StaticResource inverseBoolConverter}}"/>
                                                        <Label Text="{Binding ContactName}" FontAttributes="Bold" LineBreakMode="NoWrap" FontSize="20" Grid.Column="1"/>
                                                    </Grid>
                                                </ViewCell.View>
                                            </ViewCell>
                                        </DataTemplate>
                                    </listView:SfListView.ItemTemplate>
                                </listView:SfListView>
                            </StackLayout>
                        </Grid>
                    </local:PopUpView.Content>
                </local:PopUpView>
            </StackLayout>
        </Grid>
    </ContentPage.Content>
</ContentPage>

 

 

Screenshot:

Section

 

Click here to download the sample.

 

Conclusion

I hope you enjoyed learning about how to achieve multi selection drop down list items in Xamarin ListView.

You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms ListView documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied