Extension to Caliburn.Micro to allow implementation of filters similar to what is found in Caliburn.

A Caliburn.Micro recipe: filters « Marco Amendola

When you run the application, you will see the XamWebOutlookBar hosted in a sidebar.  Both groups shown in the OutlookBar have corresponding ViewModels that in turn have associated Views:

At the end of the article is a link to the project source code.  In order to get the project to compile, you will need to download the Infragistics assemblies and add references to the following:

A trial of Infragistics can be downloaded from here.

Here is the final project structure:

Application

In typical Caliburn style, the App.xaml has been changed to a CaliburnApplication:

<cal:CaliburnApplication xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
             xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
             xmlns:cal="clr-namespace:Caliburn.PresentationFramework.ApplicationModel;assembly=Caliburn.PresentationFramework"
             x:Class="InfragisticsCaliburn.App">
    <Application.Resources>
    </Application.Resources>
</cal:CaliburnApplication>

In App.xaml.cs, we setup MEF as the container and the use MEF to find the ShellViewModel:

protected override IServiceLocator CreateContainer()
{
    return new MEFAdapter(CompositionHost.Initialize(new AssemblyCatalog(Assembly.GetExecutingAssembly())));
}

protected override object CreateRootModel()
{
    var shell = ServiceLocator.Current.GetInstance<IShell>();

    if (IsRunningOutOfBrowser && HasElevatedPermissions)
        MainWindow.Closing += (s, args) => { args.Cancel = !ServiceLocator.Current.GetInstance<IShell>().CanShutdown(); };

    return shell;
}

ViewModels

MEF is able to find ShellViewModel in the container using the IShell type because it implements IShell and Exports itself as IShell:

[Export(typeof(IShell))]
public class ShellViewModel : ScreenConductor<IScreen>, IShell
{
    private readonly MainViewModel _firstScreen;

    [ImportingConstructor]
    public ShellViewModel(MainViewModel firstScreen)
    {
        _firstScreen = firstScreen;
    }

    protected override void OnInitialize()
    {
        this.OpenScreen(_firstScreen);
    }

}

Because of the ImportingConstructor attribute, an instance of MainViewModel is created.  The class is implemented as:

[Export(typeof(MainViewModel))]
public class MainViewModel : ScreenConductor<ISidebarItem>.WithCollection.OneScreenActive
{
    [ImportingConstructor]
    public MainViewModel([ImportMany] IEnumerable<ISidebarItem> sidebars)
    {
        Screens.AddRange(sidebars);
        this.OpenScreen(Screens.First());
    }
}

For the XamWebOutlookBar implementation, the important thing to note is that MainViewModel is setup as a ScreenConductor that manages ISidebarItem instances where only one sidebar screen is active at a time.  The ImportingConstructor attribute then finds all items registered in the MEF container as ISidebarItem.

In this example, both ContentAViewAModel and ContentBViewModel are similar:

[Export(typeof(ISidebarItem))]
public class ContentAViewModel : Screen, ISidebarItem
{
    string message = "ContentA is working";

    public ContentAViewModel()
    {
        DisplayName = "Content A Header";
    }

    public string Message
    {
        get { return message; }
        set
        {
            message = value;
            NotifyOfPropertyChange(() => Message);
        }
    }

    public string Icon
    {
        get { return @"../../Images/briefcase2.png"; }
    }
}

Each of the ViewModels export themselves as ISidebarItem, inherit from Screen, and implement ISidebarItem.

Views

In MainView.xaml, the DisplayName and Icon properties are used to render the group’s header and icon:

<igOB:XamWebOutlookBar x:Name="sidebarOutlookBar" 
        MinimizedWidth="35" AllowMinimized="True" 
        NavigationPaneMinimized="sidebarOutlookBar_NavigationPaneMinimized"
        NavigationPaneExpanding="sidebarOutlookBar_NavigationPaneExpanding"
        VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
        GroupsSource="{Binding Screens}">
    <igOB:XamWebOutlookBar.GroupContentTemplate>
        <DataTemplate>
            <ContentControl cal:View.Model="{Binding}" />
        </DataTemplate>
    </igOB:XamWebOutlookBar.GroupContentTemplate>
    <igOB:XamWebOutlookBar.GroupHeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" />
        </DataTemplate>
    </igOB:XamWebOutlookBar.GroupHeaderTemplate>
    <igOB:XamWebOutlookBar.DefaultLargeIconTemplate>
        <DataTemplate>
            <Image Source="{Binding Icon, Converter={StaticResource stringToImageSourceConverter}}"/>
        </DataTemplate>
    </igOB:XamWebOutlookBar.DefaultLargeIconTemplate>
    <igOB:XamWebOutlookBar.DefaultSmallIconTemplate>
        <DataTemplate>
            <Image Source="{Binding Icon, Converter={StaticResource stringToImageSourceConverter}}"/>
        </DataTemplate>
    </igOB:XamWebOutlookBar.DefaultSmallIconTemplate>
</igOB:XamWebOutlookBar>

Notice the GroupsSource property is bound to the Screens property that the ViewModel inherits from its base class.  The ContentControl for each group is set to the ViewModel representing the group.  The group header is bound to the DisplayName property and the small and large icons are set to the Icon property.

The Message property is bound in the View for the group content:

<UserControl x:Class="InfragisticsCaliburn.Views.ContentAView"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml
    xmlns:d=http://schemas.microsoft.com/expression/blend/2008
    xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock x:Name ="Message"/>
    </Grid>
</UserControl>

Download the source of the project here.

You can download the book from here.

The first chapter is a simple introduction to Caliburn.  Chapter 2 walks you through a simple, Hello Caliburn, application.  Chapter 3 is more ambitious and walks you through various aspects of the framework using the Silverlight GameLibrary sample.  It covers the same topics that Rob Eisenberg covered in his MIX10 talk.  There is also an Appendix included that lists some of the conventions found in Caliburn.

If I decide to write additional chapters, then I would include:

• Adding to Conventions
• Overriding Conventions
• TDD and Caliburn
• Caliburn extensibility points
• IResult implementations
• Coroutines in more depth
• UI patterns besides MVVM

There is likely much more to Caliburn that I don’t even know what I don’t know yet.

Please reply with any feedback, corrections, further explanations, or additional chapter ideas.

If a book is ever published about Caliburn, Rob should be the one to do it.