Blend Gotcha - Databinding and IsSynchronized

Working on Windows Live Writer finally (yay Live Tools), and I thought I'd share my experiences with a Blend Gotcha that might take a while to figure out.  I had the luxury of going and asking some of the people who wrote the features, but since many of you may not... I'll post 'em as I come across 'em.

This particular gotcha has to do with one of WPF and Blend's most powerful features -- Databinding.  Databinding looks like the simplest thing in the world when it works, but when you're stuck on a tricky issue, it all feels like black magic.  This issue isn't as tricky as it seems, but until you know the magic secret.... erg.

The following is a trivial application, but I came across the same issue in my super-secret project (the few details of which I mentioned earlier).  In this sample app, we have two labels and two comboboxes.  The labels aren't necessary to show the issue; they just help for screenshot purposes.

 

Fantastic.  Now, we want the comboboxes to have a supply of possible favorite colors, and we're going to stick to a list that looks like it came out of the cheapest box of Crayolas you can find (no Burnt Umber allowed).  So we go to the code-behind file and create a list.  My Window1.xaml.cs now reads:

public partial class Window1
{
    public Window1()
    {       
        this.InitializeComponent();
    }

}

public class ColorDataSource
{
    private List<string> colorList;

    public ColorDataSource()
    {
        this.colorList = new List<string>();
        colorList.AddRange(new string[] { "Red", "Orange", "Yellow", "Green", "Blue", "Purple" });
    }

    public List<string> ColorList
    {
        get { return this.colorList; }
    }
}

Now I go back to Blend and build (building in VS won't force Blend to be using the updated files).  Bobby and Timmy are picking from the same list of colors, so I want to bind the itemsource of both comboboxes to the same list.  Why would I want to instantiate two lists?  Such a solution would scale horribly... suppose we were using the expensive crayola box and assigning favorite colors to Bobby and Timmy's whole school.  Anyhow, let's add a CLR Datasource by clicking in the data box on the + CLR Object button.

We can see our new ColorDataSource object in there, so let's use that.  A cool feature of Blend is that you can do databinding simply by dragging and dropping the datasource into an appropriate container!  Grab the ColorList array -

and drop it into one of the comboboxes.  Select the first option, to "Bind ColorList' to 'ComboBox,'" then select your field as ItemsSource (the default) as shown:

and define a data template (pick what part of the ColorList you are showing in the combobox).  Again, the default is what you want:

Do the same thing for the other combobox, and congrats!  You've got two databound comboboxes for picking Bobby and Timmy's favorite colors.

 

So, we press F5 to test the app, and we can pick Bobby and Timmy's favorite colors.... except... that whenever I change Bobby's favorite color, Timmy's changes to match, and vice versa.  That's not what I want -- is it because both boxes are bound to the same list? 

Yes and no.  It is partially caused by Bobby and Timmy's comboboxes being bound to the same list.  It is also caused by a little property that I never used to pay much attention to before I came across this issue. Close the app, go back to Blend, and select one of the comboboxes.  Now open up the property inspector and take a look down in the "Common Properties" box.  The offending property is that little checkbox, "IsSynchronized."

Uncheck that box, and repeat for the other combobox.  Now that neither of them is synchronized, when you test the app you can do what you wanted to do:

The world is right again... little boys can differ on their favorite colors.  Even if they both picked strange colors.

Comments

• Anonymous
  January 09, 2008
  PingBack from http://magictricks.co.cc/blend-gotcha-databinding-and-issynchronized/