I have written how to write a simple WPF application in the MVVM design patter, with and without the DevExpress tools. In this post I’ll show to you an interesting feature: how to bind a list to a ComboBox item in the UI. The good thing is you can use a list of string or anything else custom class, with some attribute to show in the selector.

In your ViewModel class, you have to create a List and an object to bind the selectedItem of the comboBox.

Here the code for a DevExpress project:


private string p_SourceList;
public string SourceList
{
 get { return p_SourceList; }
 set { p_SourceList = value; base.RaisePropertiesChanged("SourceList"); }
}
private string p_SelectedItem;
public string SelectedItem
{
 get { return p_SelectedItem; }
 set { p_SelectedItem = value; base.RaisePropertiesChanged("SelectedItem"); }
}

and for a not-DevExpress project:


private List<string> p_SourceList;
public List<string> SourceList
{
get { return p_SourceList; }
set { p_SourceList = value; RaisePropertiesChanged("SourceList"); }
}
private string p_SelectedItem;
public string SelectedItem
{
 get { return p_SelectedItem; }
 set { p_SelectedItem = value; RaisePropertiesChanged("SelectedItem"); }
}

where RaisePropertyChanged is:

    internal void RaisePropertyChanged(string prop)
    {
        if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(prop)); }
    }
    public event PropertyChangedEventHandler PropertyChanged;

As you can see the differences here are only in notifications engine: DevExpress gives it to us ready to use, but with few code lines we can do it too. Anyway, DevExpress is very powerful and its better features are in the UI.

Now we have to write the View side, with XAML.

Also here, we can see two different version, because DevExpress provides us a different WPF comboBox.

Here with DevExpress:

...
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
...
<dxe:ComboBoxEdit IsTextEditable="False" 
                  EditValue="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged}" 
                  NullText="Mandatory data"
                  ItemsSource="{Binding SourceList}"/>

and here without DevExpress:

...
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
...
<ComboBox EditValue="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged}" 
          ItemsSource="{Binding SourceList}"/>

In this way we have binded a simple List<string> in out View. The UpdateSourceTrigger=PropertyChanged is useful to get the variables in our ViewModel updated in the same moment when the user changes value to the comboBox. Without this, the value changes only the focus leaves this comboBox item.

If we want to use a List of a custom class, for example:


public class CustomClass
{
    string name;
	string surname;
	int age;
}

We have to decide which attribute show and use for selection in the comboBox.

In the XAML, with DevExpress we use

...
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
...
<dxe:ComboBoxEdit IsTextEditable="False" 
                  EditValue="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged}" 
                  NullText="Mandatory data"
                  ItemsSource="{Binding SourceList}"
                  DisplayMember="name"/>

and without we use:

<ComboBox EditValue="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged}" 
          ItemsSource="{Binding SourceList}"
          DisplayMemberPath="name"/>

This means that our comboBox will show us the attribute “name” of our List.

Advertisements