Sladescross's Blog

Blogging about Sharepoint related stuff

WPF ComboBox BreakDown Into WPF Classes December 1, 2011

Introduction to all aspects of WPF binding.

Data binding overview.

CodePlex solid introduction to data binding.

Run through of the different ways of notifying a data change in WPF

To bind the data to ComboBox

List<ComboData> ListData = new List<ComboData>(); 
ListData.Add(new ComboData { Id = "1", Value = "One" }); 
ListData.Add(new ComboData { Id = "2", Value = "Two" }); 
istData.Add(new ComboData { Id = "3", Value = "Three" }); 
ListData.Add(new ComboData { Id = "4", Value = "Four" }); 
ListData.Add(new ComboData { Id = "5", Value = "Five" }); 
cbotest.ItemsSource = ListData; 
cbotest.DisplayMemberPath = "Value"; 
cbotest.SelectedValuePath = "Id"; 
cbotest.SelectedValue = "2";

Recently, I received a question from one of my twitter tribemates on using the ComboBox in WPF with objects, and it centered around the difference between the SelectedValue, SelectedValuePath, and SelectedItem properties. This post will go through the differences, and how they are used, and also do a little review on databinding in WPF.

Specific example of parent detail binding in both directions.

Now, all of that aside, let’s go over the more common properties used in DataBinding to a Selector control.  Note that when I refer to the ViewModel I’m assuming that the DataContext of the page is set to your ViewModel instance and that the ComboBox has inherited that DataContext.

  • DataContext (FrameworkElement) - The object which will be the default binding source for the ItemsSource, SelectedItem and SelectedValue properties.
  • DisplayMemberPath (ItemsControl) - As the Selector iterates through its list of items, if you don’t want to display the object’s .ToString() value you can specify a path to a property here.  For example, if the item is of type “Customer” (meaning your ItemsSource binds to an ObservableCollection<Customer> or similar property) which has a property @Name of type Name { FirstName, LastName } and you want to display the customer’s first name.  To do this, you would set DisplayMemberPath=”Name.FirstName”.
  • SelectedItem (Selector) – Binds the ACTUAL object in the ItemsControl which is selected (which would be your “Customer” object in the previous example).  If you want to bind the actual item, you can specify your binding property in your ViewModel here.  For example, SelectedItem=”{Binding Path=SelectedCustomer, Mode=TwoWay}” would bind the selected Customer object to the SelectedCustomer property in your ViewModel (and since I didn’t specify a binding source, that would default to the DataContext).
  • SelectedValue & SelectedValuePath (Selector) - Specifies the binding which the property from the selected item at the path provided in SelectedValuePath should be bound to.  Using our customer example, if you wanted to bind the selected customer’s @Name.FirstName property to a property named SelectedCustomerFirstName on your ViewModel, you would set your SelectedValue=”{Binding SelectedCustomerFirstName}” and SelectedValuePath=”Name.FirstName”.

WPF Tree Visualiser

WPF debugging.

<Window xmlns:diag=”clr-namespace:System.Diagnostics;assembly=WindowsBase” />

<TextBlock Text=”{Binding Path=x, diag:PresentationTraceSources.TraceLevel=High}” />

SelectedItem binding to last item using CollectionView override.

Selected Value Path property binding.

Binding in code.

Binding b = new Binding();
b.Source = pre;
b.Path = new PropertyPath(“DisplayName”);
b.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
b.Mode = BindingMode.TwoWay;
this.SetBinding(IdentityCard.DisplayNameProperty, b);

public override bool Equals(object otherObject)    

 {         if (!(otherObject is ActivityStatus))

 return false;        

 return Equals(otherObject as ActivityStatus);     }    

 public bool Equals(ActivityStatus otherStatus)     {       

  if (!(otherStatus is ActivityStatus) ||            

otherStatus == null) return false;        

 return Id == otherStatus.Id &&          

   Name == otherStatus.Name;     }

<StackPanel Name=”mainStackPanel”>
        <ListBox ItemsSource=”{Binding}” DisplayMemberPath=”Name” SelectedValue=”Messenger of the Gods” SelectedValuePath=”Description” Name=”listBox1″ (…) />

The difference between SelectedValue and SelectedItem should be obvious now. SelectedValue returns the string it was set to (“Messenger of the Gods”), while SelectedItem returns the actual GreekGod object with that description.

    string messengerOfGods = (string)(listBox1.SelectedValue);
    GreekGod hermes = (GreekGod)(listBox1.SelectedItem);

SelectedValue is particularly useful when only part of your item is stored in the model you are data binding to. In this scenario, you would data bind the SelectedValue property to the partial information in your model but the ListBox can show a lot more information about that item.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

Join 63 other followers