How to bind SelectedItem of SfComboBox with View Model
Steps to bind the SelectedItem property using view model in SfComboBox:
Step 1: Create a view model class and add the properties to bind the values.
Step 2: The SelectedItem property is an object type, so for binding multiple selected items, create a property, and its type should be a collection of objects.
Step 3: Set the binding context to the content page.
Step 4: Define the SfComboBox control and bind the SelectedItem property.
The following code demonstrates how to bind the SelectedItem property using view model.
Code:
<ContentPage.BindingContext>
<local:ComboBoxViewModel/>
</ContentPage.BindingContext>
<StackLayout Padding="0,50,0,0">
<combobox:SfComboBox x:Name="comboBox"
HeightRequest="50"
IsEditableMode="false"
IgnoreDiacritic="true"
MultiSelectMode="Token"
DataSource="{Binding Colors}"
SelectedItem="{Binding SelectedItem}"
Watermark="Select an Item"
ComboBoxMode="Suggest">
</combobox:SfComboBox>
</StackLayout>
View Model code to bind the SelectedItem property:
public class ComboBoxViewModel : INotifyPropertyChanged { public ComboBoxViewModel() { Colors = new ObservableCollection<object>(); Colors.Add("Red"); Colors.Add("Pink"); Colors.Add("Orange"); Colors.Add("Blue"); Colors.Add("Violet"); Colors.Add("Yellow"); Colors.Add("Green"); SelectedItem = new ObservableCollection<object>{ "Red", "Blue" }; }
private ObservableCollection<object> _colors;
private ObservableCollection<object> _selectedItem;
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string name) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(name)); } } public ObservableCollection<object> Colors { get { return _colors; } set { _colors = value; RaisePropertyChanged("Colors"); } }
public ObservableCollection<object> SelectedItem { get { return _selectedItem; } set { _selectedItem = value; RaisePropertyChanged("SelectedItem"); } } } |
Before updating the image:
|
Please find the sample from the following link: Sample
