Caliburn Micro > Composing Views from multiple Views/UserControls/CustomControls

How is it possible to re-use and compose parts in CM managed windows? I have found posts regarding using two UserControls to bind to the same ViewModel, but not so much if I want to have multiple views and viewmodels all composed in the same window. (a viewmodel for each view composed into a "master view")

The first part of my question would be how to break up components for re-use? If I have two areas of a window where one is a datagrid and another is a details view with labels and text boxes should these be in separate usercontrols, customcontrols or windows? Each one would ideally be stand alone so they can be separated and used in other windows.

So I would end up with 2 viewmodels and 2 views if they were separated. Now lets say I would like to create 3 windows, one window with the first view, the second with the second view and a third with both views. How do I use CM to create the window for each and wire up each view to their viewmodel? From the examples I have seen I see for the most part a single view and viewmodel in a window.

Jon Skeet
people
quotationmark

I'm not going to claim to be an expert in CM by any means, but I've had reasonable success with a simple "benchmark explorer" I've been writing. That uses a single "shell view" that composes two other views, each with its own ViewModel. The shell view looks like this:

<Window x:Class="NodaTime.Benchmarks.Explorer.Views.ShellView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="NodaTime Benchmarks" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>...</Grid.ColumnDefinitions>
        <ContentControl x:Name="BenchmarkPicker" Grid.Column="0"/>
        <GridSplitter ... />
        <ContentControl x:Name="ResultsGraph" Grid.Column="2"/>
    </Grid>
</Window>

then ResultsGraphView and BenchmarkPickerView are each like this:

<UserControl x:Class="NodaTime.Benchmarks.Explorer.Views.ResultsGraphView"
    ... namespaces etc ...>
    <Grid>
        <Grid.RowDefinitions>...</Grid.RowDefinitions>
        <Grid.ColumnDefinitions>...</Grid.ColumnDefinitions>
        ... controls ...
    </Grid>
</UserControl>

The ShellViewModel exposes the other two ViewModels as properties. Those are then passed to the views automatically on construction. (The bootstrapper doesn't provide any way of getting them.)

Now this doesn't quite fit your description, because I don't think you could use the two individual views individually as windows - I suspect you would end up with 5 views in total:

SubViewOne - a UserControl with the first view parts
SubViewTwo - a UserControl with the second view parts
JustViewOne - a Window containing just SubViewOne
JustViewTwo - a Window containing just SubViewTwo
BothViews - a Window containing both SubViewOne and SubViewTwo

I don't think there's a way of getting around the fact that you don't want one Window within another, and the top level window has to be... well, a Window.

Hope this helps, and let me know if you want more details of the small project where I'm doing this - it's far from production quality, particularly in terms of DI, but it may be enough to help you get going.

people

See more on this question at Stackoverflow