c# - Caliburn Micro and ModernUI Examples/Tutorials

Question

does anyone have an example or tutorial on how to use Caliburn Micro together with ModernUi (https://mui.codeplex.com)?

Answer 1

Ok so I had a quick mess about with it and a look on the Mui forums and this seems to be the best approach:

Since the window loads content from URLs you need to take a view-first approach, and then locate the appropriate VM and bind the two.

The best way to do this appears to be via the ContentLoader class which is used to load the content into the ModernWindow when it is requested. You can just subclass DefaultContentLoader and provide the necessary CM magic to bind up loaded items:

public class ModernContentLoader : DefaultContentLoader
{
    protected override object LoadContent(Uri uri)
    {
        var content = base.LoadContent(uri);

        if (content == null)
            return null;

        // Locate the right viewmodel for this view
        var vm = Caliburn.Micro.ViewModelLocator.LocateForView(content);

        if (vm == null)
            return content;

        // Bind it up with CM magic
        if (content is DependencyObject)
        {
            Caliburn.Micro.ViewModelBinder.Bind(vm, content as DependencyObject, null);
        }

        return content;
    }
}

Your CM bootstrapper should just bootstrap a ModernWindow viewmodel which is backed by a ModernWindow based view (CM tries to use EnsureWindow which creates a new basic WPF Window class, unless of course your control already inherits from Window which ModernWindow does. If you need all dialogs and popups to be MUI you might need to reimplement WindowManager):

public class Bootstrapper : Bootstrapper<ModernWindowViewModel>
{
}

Which can be a conductor (OneActive) and looks like this:

public class ModernWindowViewModel : Conductor<IScreen>.Collection.OneActive
{
}

And XAML for the view is

ModernWindowView.xaml

<mui:ModernWindow x:Class="WpfApplication4.ViewModels.ModernWindowView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mui="http://firstfloorsoftware.com/ModernUI"
                                     Title="ModernWindowView" Height="300" Width="300" ContentLoader="{StaticResource ModernContentLoader}">   
    <mui:ModernWindow.MenuLinkGroups>
        <mui:LinkGroupCollection>
            <mui:LinkGroup GroupName="Hello" DisplayName="Hello">
                <mui:LinkGroup.Links>
                    <mui:Link Source="/ViewModels/ChildView.xaml" DisplayName="Click me"></mui:Link>
                </mui:LinkGroup.Links>
            </mui:LinkGroup>
        </mui:LinkGroupCollection>
    </mui:ModernWindow.MenuLinkGroups>
</mui:ModernWindow>

Obviously you need to make the loader a resource too:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
            <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Dark.xaml"/>
            <ResourceDictionary>
                <framework:ModernContentLoader x:Key="ModernContentLoader"></framework:ModernContentLoader>
                <wpfApplication4:Bootstrapper x:Key="Bootstrapper"></wpfApplication4:Bootstrapper>
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Here's the ChildViewModel I'm using as a test:

public class ChildViewModel : Conductor<IScreen>
{
    public void ClickMe()
    {
        MessageBox.Show("Hello");
    }
}

And the XAML for that (just a button)

<UserControl x:Class="WpfApplication4.ViewModels.ChildView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                     Height="350" Width="525">
    <Grid>
        <StackPanel>
        <TextBlock >Hello World</TextBlock>
        <Button x:Name="ClickMe" Width="140" Height="50">Hello World</Button>
        </StackPanel>
    </Grid>
</UserControl>

And the proof of concept: