Saturday, September 03, 2016

Back to WPF

Hello Dorks!

Lots of changes recently. Seems that the one thing in life that's constant for me is change. I've moved on to a new gig (working at Blackbird Interactive, for those keeping score) doing tools stuffs. This means I'm back in the world of WPF. And lots of trying to remember stuff from over 2 years ago.

So, I thought I'd share (and maybe get some recommendations from other WPF gurus out there).

One of the things I've been working with lately is ComboBoxes. Lots of fun stuff going on there. The current thing I've been working on is how to have the drop down list in a combo box be different from the actual data that the combo box is bound to.

For example, let's say we have a class that represents an item in a list:

And then, let's say we have a completely different class, which contains an ID:

The question is, how do we bind the dropdown list with a list of Items but also have the ability to populate a bound Asset?

Here's what I've come up with (and by no stretch is it perfect):

So, what have I done? Let's walk through it, step by step:

  1. Created the list that's going to populate the drop down list. That's the elements list.
  2. Set the comboBox's ItemsSource to that list. This is nothing more than the data store for the contents of the dropdown list.
  3. Set the comboBox's SelectedValuePath to the Name property in the Item class. If we don't do this, the combo box has no way of determining what it should use to display in the drop down, and defaults to the ToString() method (and thus giving us the class name). We use Name here, because it gives us something more user friendly (hopefully).
  4. Set the comboBox's selected value 'path'. This is nothing more than telling the combo box that we are interested in getting it ID property in the selected Item in the drop down. It's also used to select the right item in the list box (we only have to set the SelectedValue to the ID, rather than iterate through the list ourself).
  5. We set the SelectedValue to the ID we want to show selected.
  6. We set the Tag property on the combo box to the actual object we want bound to this combo box. We'll use that Tag later to populate our value.
  7. We set the callback for handling a selection changed operation.

A number of steps, yes. But all fairly straightforward. Next we need some code to handle setting the value bound to the combo box. That's in the OnSelectionChanged method.
  1. We get the bound ComboBox, Asset bound to the ComboBox and the selected Item.
  2. Now that we have our data, we set the asset's ID.

I probably could migrate OnSelectionChanged to a lambda function to simplify, but for now, I want to keep this as clean as possible.

If you want to try this yourself, I've pushed the code up to github. Feel free to peruse and comment here:


Ian Gipson said...

You couldn't use a dataconverter instead of doing it all in codebehind?

Ash Matheson said...

Sure, but I don't know how to do a data converter yet.

Also, there's issues with dataconverters and Value types. But that's for a later article.