.NET MAUI ComboBox Selection
ComboBox for .NET MAUI enables the app users to quickly and easily select item/items fro a dropdown list. This topic will go through the provided by the ComboBox API related to item/items selection.
ComboBox control has a support for single and multiple selection. You can easily specify the required selection using the SelectionMode property.
Main Properties
-
SelectionMode(enumeration of typeTelerik.Maui.Controls.ComboBoxSelectionMode): Defines whether the selection is single or multiple. -
SelectedIndex(int): Specifies the index of the first item in the current selection or -1 if the selection is empty. -
SelectedItem(object): Defines the first item in the current selection, or null if the selection is empty. -
SelectedItems(readonly ObservableCollection <object >): Gets the collection of currently Selected Items.
SelectedItemscollection can be changed only whenSelectionModeisMultiple. ForSingleSelectionModeuseSelectedItem.
Single Selection
The default SelectinMode(enumeration of type Telerik.Maui.Controls.ComboBoxSelectionMode) of the ComboBox control is Single.
Example with Single Selection and SelectedIndex set
Here is the ComboBox definition in XAML:
<telerik:RadComboBox ItemsSource="{Binding Items}"
DisplayMemberPath="Name"
SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
SelectionMode="Single"
AutomationId="selectedIndexCombo">
<telerik:RadComboBox.BindingContext>
<local:ViewModel/>
</telerik:RadComboBox.BindingContext>
</telerik:RadComboBox>
you need to add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
public class City
{
public string Name { get; set; }
public int Population { get; set; }
}
and the ViewModel used:
public class ViewModel
{
public ViewModel()
{
this.Items = new ObservableCollection<City>
{
new City { Name = "Tokyo", Population = 13929286 },
new City { Name = "New York", Population = 8623000 },
new City { Name = "London", Population = 8908081 },
new City { Name = "Madrid", Population = 3223334 },
new City { Name = "Los Angeles", Population = 4000000},
new City { Name = "Paris", Population = 2141000 },
new City { Name = "Beijing", Population = 21540000 },
new City { Name = "Singapore", Population = 5612000 },
new City { Name = "New Delhi", Population = 18980000 },
new City { Name = "Bangkok", Population = 8305218 },
new City { Name = "Berlin", Population = 3748000 },
};
}
public ObservableCollection<City> Items { get; set; }
}
This is how single selection looks:
Example with Single Selection and SelectedItem set
Here is the ComboBox definition in XAML:
<telerik:RadComboBox ItemsSource="{Binding Items}"
DisplayMemberPath="Name"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
SelectionMode="Single"
AutomationId="selectedItemCombo">
<telerik:RadComboBox.BindingContext>
<local:ViewModel/>
</telerik:RadComboBox.BindingContext>
</telerik:RadComboBox>
the sample business model
public class City
{
public string Name { get; set; }
public int Population { get; set; }
}
and the ViewModel used:
public class ViewModel : NotifyPropertyChangedBase
{
private int selectedIndex;
private City selectedItem;
private ObservableCollection<object> selectedItems;
public ViewModel()
{
this.Items = new ObservableCollection<City>
{
new City { Name = "Tokyo", Population = 13929286 },
new City { Name = "New York", Population = 8623000 },
new City { Name = "London", Population = 8908081 },
new City { Name = "Madrid", Population = 3223334 },
new City { Name = "Los Angeles", Population = 4000000},
new City { Name = "Paris", Population = 2141000 },
new City { Name = "Beijing", Population = 21540000 },
new City { Name = "Singapore", Population = 5612000 },
new City { Name = "New Delhi", Population = 18980000 },
new City { Name = "Bangkok", Population = 8305218 },
new City { Name = "Berlin", Population = 3748000 },
};
this.SelectedIndex = 1;
this.SelectedItem = this.Items[2];
}
public ObservableCollection<City> Items { get; set; }
public ObservableCollection<object> SelectedItems
{
get
{
return this.selectedItems;
}
set
{
if (this.selectedItems != value)
{
this.selectedItems = value;
this.selectedItems.Add(this.Items[0]);
this.selectedItems.Add(this.Items[1]);
this.OnPropertyChanged();
}
}
}
public int SelectedIndex
{
get
{
return this.selectedIndex;
}
set
{
if (this.selectedIndex != value)
{
this.selectedIndex = value;
OnPropertyChanged();
}
}
}
public City SelectedItem
{
get
{
return this.selectedItem;
}
set
{
if (this.selectedItem != value)
{
this.selectedItem = value;
OnPropertyChanged();
}
}
}
}
Multiple Selection
If you want to achieve multiple selection you will need to set the SelectionMode to Multiple. The multiple selected items are visualized inside tokens.
As the SelectedItems collection is read-only, in order to be notified when the collection is changed, you should listen to the
CollectionChangedevent of theSelectedItems.
Example with Multiple Selection and SelectedItems set
Here is the ComboBox definition in XAML:
<telerik:RadComboBox ItemsSource="{Binding Items}"
SelectionMode="Multiple"
DisplayMemberPath="Name"
SelectedItems="{Binding SelectedItems}"
SelectionChanged="RadComboBox_SelectionChanged"
AutomationId="selectedItemMultipleCombo">
<telerik:RadComboBox.BindingContext>
<local:ViewModel/>
</telerik:RadComboBox.BindingContext>
</telerik:RadComboBox>
the sample business model
public class City
{
public string Name { get; set; }
public int Population { get; set; }
}
and the ViewModel used:
public class ViewModel : NotifyPropertyChangedBase
{
private int selectedIndex;
private City selectedItem;
private ObservableCollection<object> selectedItems;
public ViewModel()
{
this.Items = new ObservableCollection<City>
{
new City { Name = "Tokyo", Population = 13929286 },
new City { Name = "New York", Population = 8623000 },
new City { Name = "London", Population = 8908081 },
new City { Name = "Madrid", Population = 3223334 },
new City { Name = "Los Angeles", Population = 4000000},
new City { Name = "Paris", Population = 2141000 },
new City { Name = "Beijing", Population = 21540000 },
new City { Name = "Singapore", Population = 5612000 },
new City { Name = "New Delhi", Population = 18980000 },
new City { Name = "Bangkok", Population = 8305218 },
new City { Name = "Berlin", Population = 3748000 },
};
this.SelectedIndex = 1;
this.SelectedItem = this.Items[2];
}
public ObservableCollection<City> Items { get; set; }
public ObservableCollection<object> SelectedItems
{
get
{
return this.selectedItems;
}
set
{
if (this.selectedItems != value)
{
this.selectedItems = value;
this.selectedItems.Add(this.Items[0]);
this.selectedItems.Add(this.Items[1]);
this.OnPropertyChanged();
}
}
}
public int SelectedIndex
{
get
{
return this.selectedIndex;
}
set
{
if (this.selectedIndex != value)
{
this.selectedIndex = value;
OnPropertyChanged();
}
}
}
public City SelectedItem
{
get
{
return this.selectedItem;
}
set
{
if (this.selectedItem != value)
{
this.selectedItem = value;
OnPropertyChanged();
}
}
}
}
This is how multiple selection looks:
The Selection example can be found in our SDK Browser Application. You can find the applications in the Examples folder of your local Telerik UI for .NET MAUI installation or in the following GitHub repo.
Events
ComboBox exposes a SelectionChanged event which is raised when item is selected.
The SelectionChanged event handler receives two parameters:
- The
senderwhich is the RadComboBox control. - ComboBoxSelectionChangedEventArgs provides the following properties:
-
AddedItems: the items added to the SelectedItemsCollection -
RemovedItems: the items removed from the SelectedItmesCollection
-
Commands
ComboBox has two commands related to the Selection feature:
-
SelectAllCommand(ICommand): Selects all items from the source. -
ClearSelectionCommand(ICommand): Sets the selection to null. If Multiple SelectionMode is used, this command will clear all selected items.