Design-time support for Caliburn.Micro

Recently me together with Bartek Pampuch have been wondering if it’s possible to fire Caliburn.Micro’s binding process at design-time. Caliburn.Micro is a really great framework (just take a look at some of our multitouch apps based on this framework and BFSharp). You just name the controls appropriately and all magic happens automatically. Controls are bound to the View Model’s properties and methods for you. The problem is that it is all happing at run time not at design time. When you are preparing the form in the Visual Studio or Expression Blend you aren’t able to see how the form will look like with bound data. In some cases such feature would very useful, especially when we want to use the sample data generated by Expression Blend or Visual Studio designers. In this post we will show you how to run Caliburn.Micro’s conventions based binding mechanism at design time.

Firstly, we discovered that we can change the objects tree representing the screen and that change is not persisted back to xaml file. You can read more about this feature in my previous post. Secondly, we tried to run Caliburn.Micro’s binding process to see what happens. What was really amazing is that after first try all just started working smoothly! The framework itself is implemented so well :)

One of the samples provided with Caliburn.Micro release is a very simple application called GameLibrary. AddGameView.xaml file defines the screen that looks like this:

After setting up sample data generated by Visual Studio and setting attached property 'DesignTime.Enable=”True” the same form looks like this:

In the simplest scenario all we need to run Caliburn.Micro binding process at design time is setting design time data context and enabling binding via Enable attached property. In sample above we are setting sample data generated by Visual Studio because the AddGameViewModel class doesn’t provide default constructor. Of course we could always add a default constructor in code and define view model instance in xaml file.

I chose this particular form intentionally because it contains the control that hasn’t defined custom binding convention by default. The Rating control is responsible for displaying Rating property value using stars. Rating property value is 0.8 so 4 stars should be displayed. In such cases where we are using controls with custom binding convention we need to register those conventions at design time. Any application using Caliburn.Micro has a type inherited from Bootstrapper type. This type is a starting point of our application and the instance of that type very often is defined as a resource inside App.xaml file. In fact Caliburn.Micro framework is already prepared for design time scenarios because Bootstrapper type contains virtual method called StartDesignTime. Let’s override this method and register appropriate convention:

public class Bootstrapper
{
    public Bootstrapper() 
    {
        if (Execute.InDesignMode) StartDesignTime(); else StartRuntime();
    }
}

public class Bootstrapper<TRootModel> : Bootstrapper 
{ 
}

public class AppBootstrapper : Bootstrapper<IShell> 
{
    private static bool isInitializedInDesignTime = false;

    protected override void StartDesignTime()
    {
        base.StartDesignTime();

        if (isInitializedInDesignTime)
            return;
        isInitializedInDesignTime = true;
            
        ConfigureConventions();
    }


    void ConfigureConventions()
    {
        ConventionManager.AddElementConvention<Rating>(Rating.ValueProperty, "Value", "ValueChanged");
    }
}

The instance of AppBootstapper type can be created many times at design time so boolean flag ensures that the conventions will be registered only once. When we compile the project and reopen the form we will see something like this:

This form represents a very simple scenario where the view model type has only properties of simple types like: string, double. boolean. It doesn’t contain any property of collection type or other view model type. In such scenarios Caliburn.Micro can find the appropriate type of view (control type) based on the type of view model. Let’s see another form called ResultsView.xaml to demonstrate this case:

This is a typical problem when we work with Caliburn.Micro and we cannot see anything at design time because the control is entirely collapsed :). Let’s see what happen after connecting sample data.

The list contains some elements but the font color is white so we aren’t able to read it because of the default Visual Studio background color. We can try to open this form inside Expression Blend where the background is dark or we can use custom design time attributes presented in the previous post.

Now we can see that Caliburn.Micro is not able to find view for view model type representing list item. It’s because we are using sample data mechanism from Visual Studio which generates dynamic type _.di0.GameLibrary.ViewModels.IndividualResultViewModel with the shape of the original view model type GameLibrary.ViewModels.IndividualResultViewModel. We need to change the way Caliburn.Micro is searching for view type based on specified view model type.

protected override void StartDesignTime()
{
    base.StartDesignTime();

    if (isInitializedInDesignTime)
        return;
    isInitializedInDesignTime = true;

    ConfigureConventions();
            
    AssemblySource.Instance.AddRange(new[] { typeof(App).Assembly });

    var originalLocateTypeForModelType = ViewLocator.LocateTypeForModelType;
    Func<Type, bool> isDesignTimeType = type => type.Assembly.IsDynamic;
    ViewLocator.LocateTypeForModelType = (modelType, displayLocation, context) =>
    {
        var type = originalLocateTypeForModelType(modelType, displayLocation, context);
        if (type == null && isDesignTimeType(modelType))
        {
            if (modelType.Name == "IndividualResultViewModel")
            {
                type = typeof(IndividualResultView);
            }
        }
        return type;
    };

    IoC.GetInstance = base.GetInstance;
    IoC.GetAllInstances = base.GetAllInstances;
}

Finally the list of items and generated sample data look like this:

Attached property is not the most convenient way of extending the designer functionality because we need to write xaml code. I tried to rewrite attached property to custom behavior so we could use dra&drop instead of writing the code. The problem is that behaviors code is not executed at design time. But I have good news. If you are creating UI with Expression Blend you can use our attached property on the property grid like a normal property.

It was possible thanks to the usage of attribute called AttachedPropertyBrowsableForTypeAttribute decorating attached property. Everything that was presented so far works both in Silverlight and WPF environments. It’s time to reveal how the magic works.

    public static class DesignTime
    {
        public static DependencyProperty EnableProperty =
            DependencyProperty.RegisterAttached(
                "Enable",
                typeof(bool),
                typeof(DesignTime),
                new PropertyMetadata(new PropertyChangedCallback(EnableChanged)));

#if !SILVERLIGHT && !WP7
        [AttachedPropertyBrowsableForTypeAttribute(typeof(DependencyObject))]
#endif
        public static bool GetEnable(DependencyObject dependencyObject)
        {
            return (bool)dependencyObject.GetValue(EnableProperty);
        }


        public static void SetEnable(DependencyObject dependencyObject, bool value)
        {
            dependencyObject.SetValue(EnableProperty, value);
        }

        static void EnableChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (!Execute.InDesignMode)
                return;

            BindingOperations.SetBinding(d, DataContextProperty, (bool)e.NewValue ? new Binding() : null);
        }

        private static readonly DependencyProperty DataContextProperty =
            DependencyProperty.RegisterAttached(
                "DataContext",
                typeof(object),
                typeof(DesignTime),
                new PropertyMetadata(new PropertyChangedCallback(DataContextChanged))
                );

        private static void DataContextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (!Execute.InDesignMode)
                return;

            object enable = d.GetValue(EnableProperty);
            if (enable == null || ((bool)enable) == false || e.NewValue == null)
                return;

            var fe = d as FrameworkElement;
            if (fe == null)
                return;
       
            ViewModelBinder.Bind(e.NewValue, d, string.IsNullOrEmpty(fe.Name) ? fe.GetHashCode().ToString() : fe.Name);
        }
    }

I hope you find this solution useful.

Download