imageIn this Windows Phone 7 tutorial you will learn how to take advantage of Caliburn.Micro when displaying a list of non-identical objects to the user.


Displaying a ListBox for a list which contains different kinds of items is a common scenario when developing applications for Windows Phone. For example your list can present a folder which contains files and subfolders. When presenting this list to the user you usually want the files and folders to look different. There’s many ways to make this happen, like ValueConverters and the following implementation using abstract DataTemplateSelector.

But if you’re using the Caliburn.Microframrwork, you’re all set. The functionalities inside the framework will take care of this automatically for you.


You want to present a folder structure to the end user. You have one bindable list which contains both the subfolders and files and you have one ListBox inside the XAML which shows both types of items. The File.cs and Folder.cs files contain our models:

    public class File
        public int Id { get; private set; }
        public string Name { get; private set; }
        public double Size { get; private set; }

        public File(int id, string name, double size)
            Id = id;
            Name = name;
            Size = size;
    public class Folder
        public int Id { get; private set; }
        public string Name { get; private set; }
        public List<Folder> SubFolders { get; private set; }

        public Folder(int id, string name, List<Folder> subFolders)
            Id = id;
            Name = name;
            SubFolders = subFolders;

In the ListBox you want to display the item’s name and a little icon next to it to indicate the item’s type.

Implementation – The ViewModel

What we’re going to need is just one ViewModel. We’re not going to create ViewModels for our models:

  • MainPageViewModel – The main VM which contains the list which is shown to the user.

The MainPageViewModel inherit’s the Caliburn.Micro’s Conductor-class. The Conductor provides our VM an observable list where we can add items. When the list is modified, our view automatically gets a notification and knows to update itself.

You could manually create a new ObservableCollection , but in our case we try to take the full advantage out of our framework of choice.

The list can be accessed through the Items-property. So, to add a new item into our observable list, we can just call Items.Add(OurObject). As you’ll notice, we have defined the conductor as type of object. This mean that the Items-property inside the conductor is of type BindableCollection<object>. Meaning, you can actually add any type of items inside the collection. You can use more precise type if you know what kind of items your list contains.

The actual work the MainPageViewModel has to do is to create some fixed data for our application:

    public class MainPageViewModel : Conductor<object>.Collection.AllActive
        protected override void OnInitialize()
            Items.AddRange(new List<object>()
                                   new Folder(1, "Folder 1", null),
                                   new Folder(2, "Folder 2", null),
                                   new File(1, "File 1", 30.0),
                                   new File(2, "File 2", 30.0),
                                   new File(3, "File 3", 30.0),
                                   new Folder(4, "Folder 3", null),

We now have our ViewModel all set up so let’s concentrate on the Views next.

Implementation – The Views

We need three different Views:

  • MainPage.xaml – The page which contains our ListBox
  • FolderView – A UserControl which displays the Folder-item
  • FileViewModel – A UserControl which displays the File-item

Our MainPage.xaml is simple, containing only the ListBox. We’ll name it “Items”so that the Caliburn.Micro automatically binds it to our MainPageViewModel’s Items-property. What differs from the usual is our DataTemplate. We’re making the Caliburn.Micro to find the correct UserControl to represent our item.

            <ListBox x:Name="Items">
                        <ContentControl cal:View.Model="{Binding .}" HorizontalAlignment="Left" />

Now that our MainPage is all set we can create the UserControls which represent the items inside the folder. Here’s the implementation of FileView:


    <Grid x:Name="LayoutRoot" Background="Transparent" Margin="12 0 0 0">
            <ColumnDefinition Width="auto"></ColumnDefinition>
        <Image Grid.Column="0" Source="/Icons/appbar.save.rest.png"/>
        <TextBlock Grid.Column="1" Text="{Binding Name}" VerticalAlignment="Center" Style="{StaticResource PhoneTextNormalStyle}"/>

And the FolderView looks similar, we’ll just change the Image. But notice, you could customize these views anyway you want, for example displaying the folder’s subfolders inline.

    <Grid x:Name="LayoutRoot" Background="Transparent">
            <ColumnDefinition Width="auto"></ColumnDefinition>
        <Image Grid.Column="0" Source="/Icons/appbar.folder.rest.png"/>
        <TextBlock Grid.Column="1" Text="{Binding Name}" VerticalAlignment="Center" Style="{StaticResource PhoneTextTitle3Style}"/>

imageIf we now run the application we will see that everything is almost set, except that the Caliburn.Micro can’t find the correct views for the File and Folder-classes. Let’s take care of that next.

Matching the ViewModel and Models to Views

As you remember, we didn’t create ViewModel-classes for the models. Instead we’ll tell Caliburn.Micro how to match the File and Folder –models to their views.

Caliburn.Micro uses conventions to match Views and ViewModels. The most common convention for finding a View for a ViewModel is to just drop the Model from the type name, for example CustomerViewModel –> CustomerView. The framework is highly configurable and you can add your own conventions. 

In order for the framework to find our views, we’ll add couple rules to its ViewLocator. We configure the ViewLocator inside the application’s bootstrapper. We could have named our models FileViewModel and FolderViewModel and if we had done so, we wouldn’t need the following because the Caliburn.Micro could automatically find the views:

            ViewLocator.NameTransformer.AddRule("caliburn_micro_datatemplate_selector.File", "caliburn_micro_datatemplate_selector.FileView");
            ViewLocator.NameTransformer.AddRule("caliburn_micro_datatemplate_selector.Folder", "caliburn_micro_datatemplate_selector.FolderView");

The code explains itself quite well. We just pass in the ViewModel-type’s full name and the matching View’s full name. To make the code refactoring easier we could use types instead of the magic strings:

            ViewLocator.NameTransformer.AddRule(typeof(File).FullName, typeof(FileView).FullName);
            ViewLocator.NameTransformer.AddRule(typeof (Folder).FullName, typeof (FolderView).FullName);

And that’s it. We now have an application which can handle the situation where one list contains multiple types of objects.



Caliburn.Micro offers a powerful solution for those situations where your list contains multiple types of objects and you want to display them in a single ListBox.

Full source code for the sample app is available from the GitHub.



Comment by ralph lauren

ralph lauren...

Hi there, just wanted to tell you, I enjoyed this blog post. It was inspiring. please go on posting! I will come soon. and you can look our website about ralph lauren...

Comment by new era deutschland

new era deutschland...

You are really a good webmaster. The website loading speed is amazing. It kind of feels that you're doing any unique trick. Also, The contents are masterpiece. you have done a wonderful task on this subject! And you can look our website about new era ...

Comment by ralph lauren outlet

ralph lauren outlet...

It is the best time to make a few plans for the future and it's time to be happy. I have learn this put up and if I could I desire to recommend you some interesting things or advice. Perhaps you can write subsequent articles relating to this article. ...

Comment by ralph lauren usa

ralph lauren usa...

When I was a kid I used to pray every night for a new bicycle. Then I realised that the Lord doesn't work that way so I stole one and asked Him to forgive me.And you can look our website about ralph lauren usa...

Comment by ralph lauren

ralph lauren...

It's really a cool and helpful piece of info. I am happy that you just shared this useful information with us. Please stay us up to date like this. Thanks for sharing. And you can look our website about ralph lauren...

Comment by polo ralph lauren

polo ralph lauren...

Wow! This could be one particular of the most beneficial blogs We've ever arrive across on this subject. Actually Excellent. I'm also a specialist in this topic so I can understand your hard work.And you can look our website about polo ralph lauren...

Comment by polo ralph lauren oslo

polo ralph lauren oslo...

Emulate your heros, but don't carry it too far. Especially if they are dead. And you can look our website about polo ralph lauren oslo...

Comment by ralph lauren london

ralph lauren london...

Thanks a lot for sharing this with all people you really understand what you're speaking about! Bookmarked. Please also visit my site =). We may have a hyperlink trade arrangement among us. And you can look our website about ralph lauren london...

Comment by nike free run

nike free run...

to look at was younger i did previously wish every evening for an up-to-date motor cycle. i awakened to the fact that the new Lord fails in that way outside borrowed one in addition,yet wanted him or her to forgive my home. and you can look our website...

Comment by nike free schuhe

nike free schuhe...

once was a child i did before pray each night for totally new bike. then i noticed make fish an Lord turn up useful info in that possition outside took one as well questioned your to forgive use. and you can look our website about nike free schuhe...

Comment by nike free 5.0 v4

nike free 5.0 v4...

I have no idea how I quit ascending with this, remember, though,but I notion this amazing submit turned out to be cool. I don't get who when you're then again actually you want to a well-viewed tumblr if an individual pretty much. take care! and you ...

Comment by air jordan 13 retro

air jordan 13 retro...

BEST GOLF SHOE PERIOD. They're way cooler than the deuchy shoes you see most golf snobs wearing.I have a wider right foot from a partially collapsed arch so all I did was loosen the laces a crap load and put the two shoe inserts that the shoes come wi...