Articles in this section
Category / Section

How to Bind Selected Item of ComboBox View Model in Xamarin.Forms?

1 min read

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:

 

ComboBox

 

Please find the sample from the following link: Sample


Conclusion

I hope you enjoyed learning about how to bind selected item of ComboBox view model of Xamarin.Forms ComboBox.

You can refer to our Xamarin ComboBox page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms ComboBox Documentation to understand how to manipulate data.

For current customers you can check out on our Xamarin.Forms components from the License and Download page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Xamarin.Forms  ComboBox  and other Xamarin.Forms components.

If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (3)
Please  to leave a comment
JM
Jiri Matejka
<div><p></p><div class="pasteContent" style="display:inline;"><p>The example does not work. </p> <p>SelectedItem should be of ObservableCollection<object> type rather than a List<object>.</p> <p>regards</p> <p>Jiri</p> </div><br><p></p></div>
CP
Chozarajan Pandiyarajan

Hi Jiri Matejka,

Sorry for the inconvenience.

We have modified the sample, please check and let us know the details.

Regards, Chozarajan P

MK
Mangal Krishna Pradhan

hello, what i want is , when i click on the button then i want to retreive the value of selected item of the combox box in view model... How do i do this.. Please Let me know.. thank you!

MJ
Marcin Jurkowski

Hi, is it possible to select ItemDisplayBinding like on standard Picker when DataSource has model with id, name, etc...?

Access denied
Access denied