WPF

Explain Combo Box Binding In MVVM - WPF

Hello every one. Today, I will show you how to bind the combo box in WPF MVVM. Before starting with this, you have to be clear with the concept of INotifyPropertyChanged and ICommand interface, which was explained in my previous articles, whose links are .

  1. Explain INotifyPropertyChanged In WPF - MVVM
  2. ICommand Interface In MVVM - WPF

Now, for binding the combo box in WPF MVVM, I will explain two methods -- one is using simple binding and another is using item template. First, we take simple binding, so create one WPF Application and put the combo box in it.



XAML Code

  1. <Window x:Class="MVVM_Combobox. MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window1" Height="350" Width="525" >  
  5.     <StackPanel Orientation="Vertical">  
  6.   
  7.         <ComboBox HorizontalAlignment="Left"   
  8.                   Margin="183,39,0,0"   
  9.                   VerticalAlignment="Top"   
  10.                   Width="120" />  
  11.     </StackPanel>  
  12. </Window>  
Now, consider that we have one model ‘Person’ and it has two properties ‘Id’ and ‘Name’ with get and set method. Make it public.

Code - Person.cs
  1. public class Person  
  2.     {  
  3.   
  4.         private int _id;  
  5.   
  6.         public int Id  
  7.         {  
  8.             get { return _id; }  
  9.             set { _id = value; }  
  10.         }  
  11.           
  12.   
  13.         private string _name;  
  14.   
  15.         public string Name  
  16.         {  
  17.             get { return _name; }  
  18.             set { _name = value; }  
  19.         }  
  20.           
  21.     }  
Our model as person class is ready with its property. Next, we have to make view-model. We have to create the collection of the person class because we have to give the collection to the combo box as an item source, so we create the property in view-mode, where one is ObservableCollection of the person class and second is person class. Since we want single class property, we have to select any item from the combo box collection.
  1. private ObservableCollection<Person> _persons;  
  2.   
  3.         public ObservableCollection<Person> Persons  
  4.         {  
  5.             get { return _persons; }  
  6.             set { _persons = value; }  
  7.         }  
  8.   
  9.   
  10.         private Person _sperson;  
  11.   
  12.         public Person SPerson  
  13.         {  
  14.             get { return _sperson; }  
  15.             set { _sperson = value; }  
  16.         }  
Now, create the constructor of this view model and set the ObservableCollection with some static value like-

ID=1,Name=”Nirav”
ID=2,Name=”Kapil”
ID=3,Name=”Arvind”
ID=4,Name=”Rajan”

Code
  1. public ViewModel()  
  2.  {  
  3.      Persons = new ObservableCollection<Person>()   
  4.      {  
  5.       new Person(){ Id=1, Name="Nirav"}  
  6.             ,new Person(){Id=2,Name="Kapil"}  
  7.             ,new Person(){Id=3 , Name="Arvind"}  
  8.             ,new Person(){Id=4 , Name="Rajan"}  
  9.      };  
  10.   }  
Now, we have to give this collection to the combo box as an item source, so we have to give this view model reference to the our design (XAML) file.
  1. xmlns:viewmodel="clr-namespace:MVVM_Combobox.ViewModel"  
Now, define the Window resources, as shown below and assign some key to it.
  1. <Window.Resources>  
  2.    <viewmodel:ViewModel x:Key="vm"></viewmodel:ViewModel>  
  3. </Window.Resources>  
Now, move to combo box control and assign its Item source. Select Item and display member property.
  1. ItemsSource="{Binding Path=Persons}"   
  2. SelectedItem="{Binding Path=SPerson}"  
  3. DisplayMemberPath="Name"  
Here, in item source, we give the collection name and in selected item, we give single person property. We have to define the display member here and you have to give whatever we have to display in combo box dropdown list.

Full Code
  1. <Window x:Class="MVVM_Combobox.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:viewmodel="clr-namespace:MVVM_Combobox.ViewModel"  
  5.         Title="MainWindow" Height="350" Width="525">  
  6.     <Window.Resources>  
  7.         <viewmodel:ViewModel x:Key="vm"></viewmodel:ViewModel>  
  8.     </Window.Resources>  
  9.     <StackPanel Orientation="Vertical" DataContext="{Binding Source={StaticResource vm}}">  
  10.       
  11.         <ComboBox HorizontalAlignment="Left"   
  12.                   Margin="183,39,0,0"   
  13.                   VerticalAlignment="Top"   
  14.                   Width="120"   
  15.                   ItemsSource="{Binding Path=Persons}"    
  16.                   SelectedItem="{Binding Path=SPerson}"  
  17.                   DisplayMemberPath="Name"/>  
  18.     </StackPanel>  
  19. </Window>  
Now, run the Application and show the result.



Combo box binding using Item template

Now, add another combo box in the Window with its item source and the selected item property.
  1. <ComboBox ItemsSource="{Binding Path=Persons}"  
  2.                   SelectedItem="{Binding Path=SPerson}"  
  3.                   Width="120"  
  4.                   HorizontalAlignment="Left"   
  5.                   Margin="183,39,0,0"   
  6.                   VerticalAlignment="Top"  >  
  7.         </ComboBox>  
Now, we define the item template for this combo box, as shown below-
  1. <ComboBox ItemsSource="{Binding Path=Persons}"  
  2.                   SelectedItem="{Binding Path=SPerson}"  
  3.                   Width="120"  
  4.                   HorizontalAlignment="Left"   
  5.                   Margin="183,39,0,0"   
  6.                   VerticalAlignment="Top"  >  
  7.             <ComboBox.ItemTemplate>  
  8.                 <DataTemplate>  
  9.                     <StackPanel Orientation="Horizontal">  
  10.                         <TextBlock Text="{Binding Path=Id}"/>  
  11.                         <TextBlock Text=" - "/>  
  12.                         <TextBlock Text="{Binding Path=Name}"/>  
  13.                     </StackPanel>  
  14.                 </DataTemplate>  
  15.             </ComboBox.ItemTemplate>  
  16. </ComboBox>  
As shown in the code, shown above, we define combo box followed by the item template and the data template. In data template, we define our custom design code, as shown in the example, above, so complete XAML code looks, as shown below-
  1. <Window x:Class="MVVM_Combobox.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:viewmodel="clr-namespace:MVVM_Combobox.ViewModel"  
  5.         Title="MainWindow" Height="350" Width="525">  
  6.     <Window.Resources>  
  7.         <viewmodel:ViewModel x:Key="vm"></viewmodel:ViewModel>  
  8.     </Window.Resources>  
  9.     <StackPanel Orientation="Vertical" DataContext="{Binding Source={StaticResource vm}}">  
  10.       
  11.         <ComboBox HorizontalAlignment="Left"   
  12.                   Margin="183,39,0,0"   
  13.                   VerticalAlignment="Top"   
  14.                   Width="120"   
  15.                   ItemsSource="{Binding Path=Persons}"    
  16.                   SelectedItem="{Binding Path=SPerson}"  
  17.                   DisplayMemberPath="Name"/>  
  18.         <ComboBox ItemsSource="{Binding Path=Persons}"  
  19.                   SelectedItem="{Binding Path=SPerson}"  
  20.                   Width="120"  
  21.                   HorizontalAlignment="Left"   
  22.                   Margin="183,39,0,0"   
  23.                   VerticalAlignment="Top"  >  
  24.             <ComboBox.ItemTemplate>  
  25.                 <DataTemplate>  
  26.                     <StackPanel Orientation="Horizontal">  
  27.                         <TextBlock Text="{Binding Path=Id}"/>  
  28.                         <TextBlock Text=" - "/>  
  29.                         <TextBlock Text="{Binding Path=Name}"/>  
  30.                     </StackPanel>  
  31.                 </DataTemplate>  
  32.             </ComboBox.ItemTemplate>  
  33.         </ComboBox>  
  34.     </StackPanel>  
  35. </Window>  
Output


 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs