Selection in .NET MAUI ComboBox (SfComboBox)

30 Aug 202414 minutes to read

The .NET MAUI ComboBox allows user to select single or multiple items from the .NET MAUI drop-down list. The selection mode can be set by using the SelectionMode property. There are two different selection modes: Single, and Multiple.

Single selection

The .NET MAUI ComboBox allows users to select an single item from the .NET MAUI drop-down list.

UI Selection

The selected item can be changed interactively by selecting from the .NET MAUI drop-down list or entering the value.

XAML

<editors:SfComboBox x:Name="comboBox"
                    IsEditable="True"
                    WidthRequest="250"
                    ItemsSource="{Binding SocialMedias}"
                    DisplayMemberPath="Name"
                    TextMemberPath="Name" />

The following gif image illustrates the result of the above code:

Programmatic selection

The selected item can be changed programmatically by using the SelectedItem or SelectedIndex properties of the .NET MAUI ComboBox control.

XAML

<editors:SfComboBox x:Name="comboBox"
                    WidthRequest="250"
                    MaxDropDownHeight="250"
                    IsEditable="True"
                    ItemsSource="{Binding SocialMedias}"
                    DisplayMemberPath="Name"
                    TextMemberPath="Name"
                    SelectedIndex="2" />

C#

comboBox.SelectedIndex = 2;

The following gif image illustrates the result of the above code:

Multiple selection

The .NET MAUI ComboBox allows user to select multiple values from the .NET MAUI drop-down list by setting the SelectionMode property as Multiple. The selected items can be changed programmatically by using the SelectedItems property. This property allows both getting and setting of the selected items in the .NET MAUI ComboBox control.

Also there are two ways to display multi-selection items in the .NET MAUI ComboBox control using MultiSelectionDisplayMode Property. By default MultiSelectionDisplayMode is Token.

• Delimiter
• Token

XAML

<editors:SfComboBox x:Name="comboBox" 
             HeightRequest="50"
             WidthRequest="350"
             ItemsSource="{Binding SocialMedias}"
             SelectedItems="{Binding SelectedItemsList}"
             SelectionMode="Multiple"
             MaxDropDownHeight="250"
             DisplayMemberPath="Name"
             TextMemberPath="Name" />

C#

public ObservableCollection<SocialMedia> SelectedItemsList { get; set; }
  SocialMediaViewModel socialMediaViewModel = (this.comboBox.BindingContext as SocialMediaViewModel);
  ObservableCollection<SocialMedia> socialMediasList = socialMediaViewModel.SocialMedias;
  SelectedItemsList = new ObservableCollection<SocialMedia>();
  SelectedItemsList.Add(socialMediasList[0]);
  SelectedItemsList.Add(socialMediasList[2]);

The following image illustrates the result of the above code.

Delimiter

When setting MultiSelectionDisplayMode to Delimiter, the selected items can be separated by the desired character specified as the delimiter. We can set the delimiter text to any preferred character using the DelimiterText property. By default DelimiterText is “,”.

XAML

<editors:SfComboBox x:Name="combobox" 
                         HeightRequest="50"
                         WidthRequest="350"
                         ItemsSource="{Binding SocialMedias}"
                         SelectionMode="Multiple"
                         MultiSelectionDisplayMode="Delimiter"
                         DelimiterText="/"
                         DisplayMemberPath="Name"
                         TextMemberPath="Name"
                         Placeholder="Enter Media" />

Token

Multi-selection token mode has two different layouts to display the selected items by setting TokensWrapMode property.

• Wrap
• None

Wrap mode

When the TokensWrapMode is set to Wrap, the selected items will be wrapped to the next line of the SfComboBox.

XAML

<editors:SfComboBox x:Name="comboBox" 
             HeightRequest="50"
             WidthRequest="350"
             ItemsSource="{Binding SocialMedias}"
             SelectionMode="Multiple"
             Placeholder="Enter Media"
             DisplayMemberPath="Name"
             TextMemberPath="Name"
             TokensWrapMode="Wrap" />

None mode

When the TokensWrapMode is set to None, the selected item will be wrapped in a horizontal orientation.

XAML

<editors:SfComboBox x:Name="comboBox" 
             HeightRequest="50"
             WidthRequest="350"
             ItemsSource="{Binding SocialMedias}"
             SelectionMode="Multiple"
             Placeholder="Enter Media"
             DisplayMemberPath="Name"
             TextMemberPath="Name"
             TokensWrapMode="None" />

Selection changed notification

When an item is selected from the .NET MAUI drop-down list, the SelectionChanged event is triggered. The SelectionChanged event contains the newly selected and previously selected items in the AddedItems and RemovedItems properties. The SelectionChanged contains the following properties:

• AddedItems - Contains the item that were currently selected.
• RemovedItems - Contains the item that were unselected.

XAML

<editors:SfComboBox x:Name="comboBox" 
                    WidthRequest="250"
                    TextMemberPath="Name"
                    DisplayMemberPath="Name"
                    ItemsSource="{Binding SocialMedias}"
                    SelectionChanged="OnSelectionChanged" />

C#

comboBox.SelectionChanged += OnSelectionChanged;

The SelectionChanged event can be handled as follows:

C#

private async void OnSelectionChanged(object sender, Syncfusion.Maui.Inputs.SelectionChangedEventArgs e)
{
    await DisplayAlert("Alert", $"Selected Item has changed", "Ok");
}

The following image illustrates the result of the above code:

NOTE

SelectionChanged event arguments CurrentSelection and PreviousSelection marked as “Obsolete”. You can use the AddedItems and RemovedItems event arguments.

Selected value

The SelectedValue property in a ComboBox control allows you to get or set the selected value based on the SelectedItem or SelectedItems depending on the selection mode. The SelectedValuePath property specifies which property of the selected item is used to populate the SelectedValue.

In single selection mode, the SelectedValue property holds the value defined by the SelectedValuePath property, such as “ID”. When the SelectedItem returns the entire object (e.g., SocialMedia), the SelectedValue contains the value of SocialMedia.ID field.

XAML

<Label Text="SelectedValue :" />
<Label x:Name="selectedValue" />

<editors:SfComboBox x:Name="comboBox"
                    WidthRequest="250"
                    MaxDropDownHeight="250"
                    TextMemberPath="Name"   
                    DisplayMemberPath="Name"
                    ItemsSource="{Binding SocialMedias}"
                    SelectedValuePath="ID"
                    SelectionChanged="OnSelectionChanged"/>

C#

comboBox.SelectedValuePath = "ID";
comboBox.SelectionChanged += OnSelectionChanged;

C#

private void OnSelectionChanged(object sender, Syncfusion.Maui.Inputs.SelectionChangedEventArgs e)
{
    selectedValue.Text = comboBox.SelectedValue.ToString();
}

The following gif image illustrates the result of the above code:

In multi-selection mode, the SelectedValue is a collection of values derived from the SelectedItems based on the SelectedValuePath property such as “ID”, the SelectedValue will contains a list of IDs (e.g., SocialMedia.ID) corresponding to the selected SocialMedia items.

XAML

<Label Text="SelectedValue count :" />
<Label x:Name="selectedValue" />

<editors:SfComboBox x:Name="comboBox"
                    WidthRequest="250"
                    MaxDropDownHeight="250"
                    TextMemberPath="Name"   
                    DisplayMemberPath="Name"
                    ItemsSource="{Binding SocialMedias}"
                    SelectionMode="Multiple"
                    SelectedValuePath="ID"
                    SelectedValue="{Binding SelectedValueList}"
                    SelectionChanged="OnSelectionChanged"/>

C#

public ObservableCollection<object> SelectedValueList { get; set; }
SocialMediaViewModel socialMediaViewModel = (this.comboBox.BindingContext as SocialMediaViewModel);
ObservableCollection<SocialMedia> socialMediasList = socialMediaViewModel.SocialMedias;
SelectedValueList = new ObservableCollection<object>();
SelectedValueList.Add(socialMediasList[4].ID);
SelectedValueList.Add(socialMediasList[6].ID);
comboBox.SelectedValuePath = "ID";
comboBox.SelectionChanged += OnSelectionChanged;

C#

private void OnSelectionChanged(object sender, Syncfusion.Maui.Inputs.SelectionChangedEventArgs e)
{
    if(comboBox != null && comboBox.SelectedValue is IList<object> value)
    {
        selectedValue.Text = value.Count.ToString();
    }
}

The following gif image illustrates the result of the above code:

NOTE

If the SelectedValuePath is not specified, the SelectedValue will be the same as the SelectedItem or SelectedItems, depending on the selection mode.

Open a drop-down programmatically

In the .NET MAUI ComboBox control, the .NET MAUI drop-down list can be opened or closed programmatically by using the IsDropDownOpen property. The default value of the IsDropDownOpen property is false.

XAML

<editors:SfComboBox x:Name="comboBox"
                    WidthRequest="250"
                    IsEditable="true"
                    ItemsSource="{Binding SocialMedias}"
                    IsDropDownOpen = true;
                    DisplayMemberPath="Name"
                    TextMemberPath="Name">
</editors:SfComboBox>

C#

comboBox.IsDropDownOpen = true;