Events in .NET MAUI Chips

27 Jul 202613 minutes to read

SfChipGroup and SfChip raise events to notify users application when the user interacts with the chips. This page documents the events exposed by both controls.

Prerequisites

Before using the SfChip, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Core

For a step-by-step setup, refer to the Getting Started documentation.

Supported Events

Event Control EventArgs Trigger
SelectionChanging SfChipGroup SelectionChangingEventArgs Raised before a chip is selected. Can be canceled.
SelectionChanged SfChipGroup SelectionChangedEventArgs Raised after a chip is selected.
ChipClicked SfChipGroup EventArgs Raised when a chip is clicked.
ItemRemoved SfChipGroup SelectionChangedEventArgs Raised after a chip is removed from an Input-type SfChipGroup.
CloseButtonClicked SfChip EventArgs Raised when the close button of an SfChip is clicked.

NOTE

The SelectionChanging and SelectionChanged events are supported only for Choice and Filter chip types. The ItemRemoved event is supported only for the Input chip type.

Selection changing event

The SelectionChanging event is raised before a chip is selected. Cancel the selection by setting the Cancel property of the event argument to true.

Event Arguments

Property Type Description
AddedItem object The chip that is about to be selected.
RemovedItem object The previously selected or deselected chip.
Cancel bool Set to true to cancel the selection. 
<VerticalStackLayout>
    <chip:SfChipGroup x:Name="chipGroup"
                      ChipType="Choice"
                      SelectionChanging="OnSelectionChanging">
        <chip:SfChip Text="Apple" />
        <chip:SfChip Text="Banana" />
        <chip:SfChip Text="Cherry" />
    </chip:SfChipGroup>
</VerticalStackLayout>
var chipGroup = new SfChipGroup
{
    ChipType = SfChipsType.Choice
};

// Subscribe to event
chipGroup.SelectionChanging += OnSelectionChanging;

// Add chips
chipGroup.Items.Add(new SfChip() { Text = "Apple" });
chipGroup.Items.Add(new SfChip() { Text = "Banana" });
chipGroup.Items.Add(new SfChip() { Text = "Cherry" });

// Create layout and add ChipGroup
var layout = new VerticalStackLayout();
layout.Children.Add(chipGroup);
Content = layout;

The SelectionChanging event can be handled in C# as follows:

private void OnSelectionChanging(object? sender, SelectionChangingEventArgs e)
{
    // Block selection of the "Cherry" chip.
    if (e.AddedItem is SfChip chip && chip.Text == "Cherry")
    {
        e.Cancel = true;
    }
}

Selection changed event

The SelectionChanged event is raised after a chip is selected.

Event Arguments

Property Type Description
AddedItem object The newly selected chip.
RemovedItem object The previously selected chip. 
<VerticalStackLayout>
    <chip:SfChipGroup x:Name="chipGroup"
                      ChipType="Filter"
                      SelectionChanged="OnSelectionChanged">
        <chip:SfChip Text="Red" />
        <chip:SfChip Text="Green" />
        <chip:SfChip Text="Blue" />
    </chip:SfChipGroup>
</VerticalStackLayout>
var chipGroup = new SfChipGroup
{
    ChipType = SfChipsType.Filter
};

chipGroup.SelectionChanged += OnSelectionChanged;

chipGroup.Items.Add(new SfChip() { Text = "Apple" });
chipGroup.Items.Add(new SfChip() { Text = "Banana" });
chipGroup.Items.Add(new SfChip() { Text = "Cherry" });

var layout = new VerticalStackLayout();
layout.Children.Add(chipGroup);
Content = layout;

The SelectionChanged event can be handled in C# as follows:

void OnSelectionChanged(object? sender, SelectionChangedEventArgs e)
{
    if (e.AddedItem is SfChip chip)
    {
        System.Diagnostics.Debug.WriteLine($"Selected: {chip.Text}");
    }
}

Chip clicked event

The ChipClicked event is raised when a chip is clicked. The event argument is of type EventArgs, which exposes the clicked chip.

<VerticalStackLayout>
    <chip:SfChipGroup x:Name="chipGroup"
                      ChipType="Choice"
                      ChipClicked="OnChipClicked">
        <chip:SfChip Text="Red" />
        <chip:SfChip Text="Green" />
        <chip:SfChip Text="Blue" />
    </chip:SfChipGroup>
</VerticalStackLayout>
var chipGroup = new SfChipGroup
{
    ChipType = SfChipsType.Choice
};

chipGroup.ChipClicked += OnChipClicked;

chipGroup.Items.Add(new SfChip() { Text = "Apple" });
chipGroup.Items.Add(new SfChip() { Text = "Banana" });
chipGroup.Items.Add(new SfChip() { Text = "Cherry" });

var layout = new VerticalStackLayout();
layout.Children.Add(chipGroup);
Content = layout;

The ChipClicked event can be handled in C# as follows:

void OnChipClicked(object? sender, EventArgs e)
{
    if (sender is SfChip chip)
    {
        System.Diagnostics.Debug.WriteLine($"Clicked: {chip.Text}");
    }
}

Item removed event

The ItemRemoved event is raised after a chip is removed from the SfChipGroup. The argument contains the following information,

Event Arguments

Property Type Description
AddedItem object The newly selected chip.
RemovedItem object The previously selected chip. 
<VerticalStackLayout>
    <chip:SfChipGroup x:Name="chipGroup"
                      ChipType="Input"
                      DisplayMemberPath="Name"
                      ItemRemoved="OnChipItemRemoved"
                      ItemsSource="{Binding Employees}"/>
</VerticalStackLayout>
var viewModel = new EmployeeViewModel();
BindingContext = viewModel;

var chipGroup = new SfChipGroup
{
    ChipType = SfChipsType.Input,
    DisplayMemberPath = "Name",
    ItemsSource = viewModel.Employees
};

chipGroup.ItemRemoved += OnChipItemRemoved;

Content = new VerticalStackLayout
{
    Children =
    {
        chipGroup
    }
};
public class Employee
{
    public string Name { get; set; }
}

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> employees;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Employee> Employees
    {
        get => employees;
        set
        {
            employees = value;
            OnPropertyChanged();
        }
    }

    public EmployeeViewModel()
    {
        Employees = new ObservableCollection<Employee>
        {
            new Employee { Name = "Joseph" },
            new Employee { Name = "Anne Joseph" },
            new Employee { Name = "Andrew Fuller" },
            new Employee { Name = "Emilio Alvaro" },
            new Employee { Name = "Janet Leverling" }
        };
    }

    public void OnPropertyChanged([CallerMemberName] string name = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

The ItemRemoved event can be handled in C# as follows:

void OnChipItemRemoved(object sender, SelectionChangedEventArgs e)
{
    if (e.RemovedItem is Employee employee)
    {
        System.Diagnostics.Debug.WriteLine($"Removed: {employee.Name}");
    }
}

Close button clicked event

The CloseButtonClicked event is raised when the close button of an SfChip is clicked. The event argument is of type EventArgs.

<VerticalStackLayout>
    <chip:SfChip x:Name="chip"
                 Text="John"
                 ShowCloseButton="True"
                 CloseButtonClicked="OnCloseButtonClicked" />
</VerticalStackLayout>
var chip = new SfChip
{
    Text = "John",
    ShowCloseButton = true
};
chip.CloseButtonClicked += OnCloseButtonClicked;
Content = new VerticalStackLayout
{
    Children =
    {
        chip
    }
};

The CloseButtonClicked event can be handled in C# as follows:

void OnCloseButtonClicked(object? sender, CloseButtonClickedEventArgs e)
{
    // write your code.
}

See Also