How to create a custom filter Chips in .NET MAUI (SfChip)?

In .NET MAUI Chips, creating custom filter chips can enhance the user interface by providing a visually appealing and interactive way to filter content. This article will guide you through the process of implementing custom filter chips using the .NET MAUI Chip control.

Step 1: Define the Chip Group in XAML

Open your XAML file and add the ChipGroup control within a Grid. Configure the properties to customize the appearance and behavior of the filter chips.

XAML

<Grid>
    <core:SfChipGroup ItemsSource="{Binding Employees}"
                      ChipType="Filter"
                      DisplayMemberPath="Name"
                      HorizontalOptions="Start"
                      VerticalOptions="Center"/>
</Grid>

Step 2 : Add View Model

In the ViewModel, create a collection of items that will be represented as chips. Here is an example of how to set up your ViewModel:

C#

public class Person 
{
    public string Name {
        get;
        set;
    }
}
public class ViewModel : INotifyPropertyChanged {
    private ObservableCollection<Person> employees;
    public ObservableCollection<Person> Employees {
        get { return employees; }
        set { Employees = value; OnPropertyChanged("Employees"); }
    }

    public ViewModel() {
        employees = new ObservableCollection<Person>();
        employees.Add(new Person() { Name = "John" });
        employees.Add(new Person() { Name = "James" });
        employees.Add(new Person() { Name = "Linda" });
        employees.Add(new Person() { Name = "Rose" });
        employees.Add(new Person() { Name = "Mark" });
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string property) {
        if (PropertyChanged != null) {
            PropertyChanged(this, new PropertyChangedEventArgs(property));
        }
    }
}

Output

Conclusion

I hope you enjoyed learning how to create a custom filter chips in .NET MAUI.

You can refer to our .NET MAUI ChipGroup’s feature tour page to learn about its other groundbreaking features. You can explore our .NET MAUI Chips documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI 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 .NET MAUI ChipGroup (SfChipGroup) and other .NET MAUI components.

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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!