Caliburn Micro, dynamically loaded views/viewmodels

Question

I have been playing around with Caliburn Micro for some time.

The application that I am working on consists of an MainAppView, MainAppMenuView and MainAppContentView. With corresponding ViewModels. All this works fine.

Now in the MainAppContentView I would like to show several UserControl's, that look like Windows 8 Startscreen Tiles, dynamically. Meaning that the user should be able to select what UserControl's the app will show, from a ListBox.

So I am creating several Views and ViewModels for this. And now have a collection of different tiles the user can select from.

The thought was to have a Tile model:

namespace CaliburnMicro.Test.Model
{
    public class Tile
    {
        public int ID { get; set; }
        public string View { get; set; }
        public List<string> Views { get; set; }
        public string TileSize { get; set; }

    }
}

And then resolve what View/ViewModel to show from the Tile.View or Tile.Views property.

Have anyone any idea about how this can be acomplished with Caliburn Micro?

I have have tried to solve it by makeing a DataTemplate like this:

<DataTemplate>
    <Grid Margin="4">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="50*" />
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding ID}" FontWeight="Bold"  />
        <TextBox Grid.Column="1" Text="{Binding ID }" />
        <ContentControl Grid.Column="2"  cal:View.Model="{Binding View}" />
    </Grid>
</DataTemplate>

Ideas, link's to samples or anything... would be highly appreciated.

Link to my test code

Are all of the Tiles going to share the same behaviour (Just appearing differently), or will you require a separate ViewModel for each? — Chris
Hi All tiles will have one View and one viewModel each. But what view and ViewModel that a spesific tile will show, should be defined in the Tile Object. My thought is that the Tile Object just define the propeties of the tile as, size, color, view or views, isSelected... and futher. While the content of the tile will be a view with it's viewModel, and it's presentation/data are in no way linked to the tile/tile Object. — dlilleaa

Chris Chris · Accepted Answer · 2013-12-04T09:48:04

I'm not currently somewhere I can test this, but I'd approach it by inheriting a base TileViewModel (or Tile) in all my ViewModels (although you'd probably also define an ITile interface). This could contain the Tile position information, display size, and other common Tile behaviour.

On the main control hosting your tiles, you could then maintain a collection of Tile objects, and every time you want to add a new Tile and display it, you could add your new ViewModel instance to the collection of Tiles and call the Caliburn.Micro Activate method on the new instance. Off the top of my head, I think you'd need to change your DataTemplate so the cal:View.Model property bound to the object directly, rather than a property, so something like cal:View.Model="{Binding}"

Caliburn.Micro should take care of ViewModel/View resolution for each of those tiles, using the built in conventions. You would have to make the hosting control Conductor<IScreen>.Collection.AllActive to allow all of the Tiles to be active at once.

Another property that might be of interest in this particular situation, is the cal:View.Context property, which will allow you to have multiple Views over the same ViewModel. So each of your Tiles could support different Views to provide different information (or functionality). It's mentioned briefly in the documentation, and I had a crack at explaining the convention: One ViewModel, multiple views.

I'll try and test my above suggestion, when I get a chance, to see if it's viable.

Caliburn Micro, dynamically loaded views/viewmodels

1 Answers