Using dependency properties to create reusable Windows 8 app components

This article will show you how we turned our progress spinner, that we use on all pages in the Reseguiden Sista-minuten app, into an even nicer reusable component than what it was before.

The spinner looks like this:


We have it on every page of the application, and the backing properties controlling the behaviour are in our BaseVM, the superclass for all view models. The properties are IsBusy and ProgressVisibility. The text comes from a resource, LoadingPage_LoadingData.Text, and the Windows 8 resource system automatically inserts it into the textblock thanks to it’s nice convention system. We described the convention system in our Windows Phone to Windows 8 conversion series, part 9.

The meat of the user control used to look this:




And in our resources we had:


This all worked fine when we used the same text on all pages, but we wanted different texts on each page.

We could have put a property in the view model and data bound the text value to that, but we want to use the nice resource system, so we instead went for:



What happened here? Well, we just bound the Text of the TextBlock to the property BusyText on the element userControl. If we had not bound using the element name, the DataContext for the TextBlock would get inherited, and hence be the view model for that page – and that’s not where we want to take the value from.

So, how is the the BusyText property defined on the user control then? Like this:

public static readonly DependencyProperty BusyTextProperty =
    typeof(Loader), null);

public string BusyText
    get { return (string)GetValue(BusyTextProperty); }
    set { SetValue(BusyTextProperty, value); }

As you can see it’s a dependency property. The reason it has to be a dependecy property instead of just a property with INPC is that we want to use the Loader user control like this on the pages:

Nice huh? We can use the resource system just as before – and the Loader gets it’s text from it’s creator, and visibility is still controlled via the view model. For completeness, we show what the resource entry for this page looks like:


Thank you for reading!


This Post Has 2 Comments

Leave a Reply

Close Menu