Ashish.Maui.Controls.MultiSelect 1.0.4

Ashish.Maui.Controls.MultiSelect

A reusable multi-select control for .NET MAUI applications.

The library provides a customizable multi-selection control with built-in search, select-all support, selected item chips, and MVVM-friendly APIs. It also includes helper classes that reduce the amount of boilerplate required when implementing multi-selection scenarios.

Features

• Multi-selection support
• Built-in search and filtering
• Select All support
• Selected item chips
• Custom item templates
• Custom empty view
• MVVM-friendly
• Helper base classes
• Cross-platform (.NET MAUI)

Installation

Install the package from NuGet.

.NET CLI

dotnet add package Ashish.Maui.Controls.MultiSelect

Package Manager

Install-Package Ashish.Maui.Controls.MultiSelect

Visual Studio

Open Manage NuGet Packages, search for Ashish.Maui.Controls.MultiSelect, and install the latest version.

Getting Started

Register the library

Register the control during application startup.

using Ashish.Maui.Controls.MultiSelect;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder()
            .UseMauiApp<App>()
            .UseMultiSelect()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        return builder.Build();
    }
}

Create a model

The easiest way to create selectable items is to inherit from SelectableModel.

using Ashish.Maui.Controls.MultiSelect;

public class Country : SelectableModel
{
    public override string Name { get; set; }

    public string Capital { get; set; }
}

SelectableModel already implements ISelectable and INotifyPropertyChanged, so you only need to add the properties required by your application.

Create a ViewModel

MultiSelectViewModel provides the common functionality required by the control.

using System.Collections.ObjectModel;
using Ashish.Maui.Controls.MultiSelect;

public class CountriesViewModel : MultiSelectViewModel
{
    private ObservableCollection<Country> _countries;

    public ObservableCollection<Country> Countries
    {
        get => _countries;
        set
        {
            _countries = value;
            ItemsSource = value;
            OnPropertyChanged();
        }
    }

    public CountriesViewModel()
    {
        Countries = new ObservableCollection<Country>
        {
            new() { Name = "United States" },
            new() { Name = "Canada" },
            new() { Name = "Germany" },
            new() { Name = "France" },
            new() { Name = "Japan" }
        };
    }
}

Use the control

<controls:MultiSelectListView
    ItemsSource="{Binding ItemsSource}"
    SelectedItems="{Binding SelectedItems}"
    AccentColor="Green">

    <controls:MultiSelectListView.ItemTemplate>

        <DataTemplate>

            <Grid Padding="12" ColumnDefinitions="Auto,*">

                <CheckBox
                    IsChecked="{Binding IsSelected}"
                    Color="Green"
                    VerticalOptions="Center"/>

                <Label
                    Grid.Column="1"
                    Margin="12,0,0,0"
                    Text="{Binding Name}"
                    VerticalOptions="Center"/>

            </Grid>

        </DataTemplate>

    </controls:MultiSelectListView.ItemTemplate>

</controls:MultiSelectListView>

Set the BindingContext

public partial class MainPage : ContentPage
{
    private readonly CountriesViewModel _viewModel = new();

    public MainPage()
    {
        InitializeComponent();
        BindingContext = _viewModel;
    }

    private void OnShowSelectionsClicked(object sender, EventArgs e)
    {
        ResultLabel.Text = _viewModel.ExportSelections();
    }
}