Shazaml Design, LLC

Last week I set out to build a simple Caliburn sample that included the Infragistics Silverlight XamWebOutlookBar.  I made progress and got to a point where Rob Eisenberg was able to help me get the rest of the way.  The approach I was taking was trying to figure out what conventions I should add to get Caliburn to recognize the XamWebOutlookBar.  Rob’s answer was that not everything needs to be a convention.

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.