Deep property databinding with Caliburn.Micro

My favorite thing about the Caliburn.Micro MVVM framework is how much plumbing code it is eliminating in my current Windows Phone app. The framework excels at abstracting away the goo required to get stuff to show up on the screen, letting me concentrate on my application’s logic.

One exciting Caliburn.Micro feature is its support for databinding to deep property paths. This translates to fewer “wrapper” properties in my viewmodel—properties whose sole purpose is to expose data contained in other objects.

The old way

Suppose I have a model object, CurrentUser, and I want to display the user’s FirstName property on the page. Before I learned about deep property path binding, I might have written something like this in my viewmodel:

public class MyViewModel
{
    private User currentUser;
    public string UserFirstName { get; set; }

    public void MyViewModel()
    {
        UserFirstName = currentUser.FirstName;
    }
    ...
}

And my XAML might have looked like this:

<TextBlock Name="FirstName" Text="{Binding UserFirstName}" />

Not a horrible ordeal to code, but if you have several page elements that you want to bind this way, the wrapper properties start to pile up, two lines at a time (or more, if you don’t use auto-implemented properties). This code isn’t helping me make my application better—it’s just shuffling existing data from point A to point B.

Deep property binding to the rescue

Deep property databinding allows you to skip the step of creating a wrapper property and bind straight to the nested model object using Model_Property syntax. Here’s how the example above looks when reworked using deep property databinding:

public class MyViewModel
{
    public User CurrentUser { get; private set; }
}

We’re just exposing the user object itself as a property. The magic happens in the XAML:

<TextBlock Name="CurrentUser_FirstName" />

Using conventions, the Caliburn.Micro framework will find the CurrentUser property, then drill down to the CurrentUser.FirstName property and perform the databinding.

So that’s it, and now you can get back to writing the code that allows CurrentUser to do something with your app.

Deep property databinding is covered in the Caliburn.Micro binding conventions documentation.

Download the sample code

A complete Visual Studio project that implements the example above is available here. It was built with the February 2011 version of the Window Phone Developer tools. Other than the WP7 tools, there are no external dependencies. The Caliburn.Micro framework code is included in the Framework folder.

About these ads

7 Comments

Filed under MVVM, Windows Phone 7

7 responses to “Deep property databinding with Caliburn.Micro

  1. Thanks for the post! I’ve been using CM On my SL/WP7 apps for a while now, still loving it.

    FWIW you can still do deep property binding using traditional binding syntax, you just have to be explicit with the Path attribute:

    -Matt

    • Thanks, Matt. The thought did occur to me that there might be an equivalent available in stock WP7, but I wasn’t able to find anything after a few minutes of poking around Bing. Are there any good tutorials available?

  2. Ack it stripped out my TextBox :)

    TextBox Path=”{Binding Path=CurrentUser.FirstName}”

  3. Pingback: Click handler, begone: Databinding a selected list item with Caliburn.Micro | DotNetForge

  4. Also, its extremely easy to use deep binding the normal way using blend. One thing with that method is that it’s easy to keep the code blendable, one thing i consider very important.

  5. Hello,
    I cannot get this deep property binding to work…
    This is in my xaml:

    The first line doesn’t work, although the property is filled in.
    The second line does work.

    I have a very small, normal project setup. Just like the basic examples.
    Any ideas on this?

    • @Wouter Looks like WordPress ate your XAML example. If you’d post a link to somewhere where I could download a copy of your project I’d be glad to take a look at it for you.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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