Combo box harrasment

Hello Friends,

Whenever i spend more than an hour trying to fix an issue which seems very trivial at first sight(and eventually it turns out to be trivial), i put a blog entry. Just to allow other to save that time

This time i was handicapped by combo box. Here the rest of the story:

I had the following code:
<ComboBox IsTabStop=”False” ItemsSource=”{Binding Products}”  Margin=”6,2″ Height=”40″ VerticalAlignment=”Top” SelectedItem=”{Binding DefaultProduct}”>
<TextBlock Margin=”2,6″ Text=”{Binding ModelName}”/>

The list was successfully populated by list of product names. The list was a public property on my viewmodel called Products. The problem was that my when i try to select an item from the list, it would notget selected. After an hour of googling and head banging, i realised my mistakes.
Mistake one: The height of my combo box was not enough. So even though, it was honestly trying to select an item and show it as selected, due to less height of the control itself, it was not able to put it as selected and it would appear as if nothing was getting selected after repeated attempts.
Mistake two: I had a public property on my viewmodel, this was a default product which i wanted to have it come selected on form load. However, instead of picking one from the list of products, i was creating a new product instance. Later, i found out that combo box will only apply SelectedItem property successfully, if the item you are trying to set to SelectedItem exists in its collection. Sounds pretty obvious, but somehow, i was oblivious to this fact and kept trying until i realized that i need to return the first item from the collection and not create a new item altogether.

Also, there were others things i learned is that if you are using a custom datatemplate for the combobox, then you don’t need to use the SelectedValuePath and DisplayMemberPath properties. Your datatemplate can contain UIControl that can extract the necessary information from each Item(product in this case) and show it using standard binding expression. When you select another product, your setter in the viewmodel will be hit which will give you the new product. If you are not using a datatemplate, then you can set the SelectedValuePath to the value(e.g. productid) and you can set the DisplayMemberPath to the lable (e.g. ProductName). But again in an MVVM scenario, you should ideally have a selectedItem property set to an public property exposed from viewmodel and that property should just return an instance of the same type that your ItemSource collection  is bound to. (e.g. in this case – Products which is a collection of products, so viewmodel should have a CurrentProduct property with an return of type “Product”)

Happy MVVMing!

Leave a Reply

Please log in using one of these methods to post your comment: 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