Sony Arouje

If you haven’t used Caliburn Micro please go through Caliburn Micro Introduction 1

Introduction

Most of the us know what is MVVM model but most of us hesitant to use it in their development. Reason they say is, implementing MVVM in a small project is an overkill. Might be true if they use some complicated MVVM frameworks. In my opinion using Caliburn Micro as a MVVM framework wont overkill or complicate your development rather It will ease our development. Caliburn Micro uses Convention over Configurations, so zero configuration.  Last couple of months I did so many tracers and some large projects in Silverlight and WPF  using Caliburn Micro, some tracers are just one page projects still I used Caliburn Micro because it’s very easy to develop compare to the normal code behind approach. Some of us are not using Caliburn Micro, the reason is they are doubtful whether it can used in big production level projects as it’s a micro. My answer is yes, I used Caliburn Micro in very complex applications that have more than thirty pages and very complicated functionalities. Don’t underestimate Caliburn Micro by its name, it’s very powerful and easy to learn. I am sure once you start using Caliburn Micro you will never go back to normal codebehind approach in Silverlight or WPF or WP7 neither a different MVVM framework.

iTraveller Development Days

In the development phase of iTraveller I come across lot of blockers related to MVVM model development using Caliburn Micro. In this post I am going to give a brief description about some of my blockers and how I overcome those.

Capturing PreviewDrop/KeyUp or any kind of event in Viewmodel

If you had a chance to look at iTraveller then you can see most of the functionality is based on drag and drop features. My first concern was how to capture drop event or Mouse Down Even or KeyUp Event using Caliburn Micro. What we should do to capture the event is as follows.

                    <ListBox Name="MyPhotoSets" VerticalAlignment="Stretch" 

                             Visibility="{Binding IsListVisible}"
                             AllowDrop="True"
                             MinHeight="100"
                             MinWidth="100"
                             Style="{DynamicResource PhotoListStyle}"
                             ItemTemplate="{DynamicResource SetTemplate}"  
                             ItemContainerStyle="{DynamicResource PhotoListItem}"  >
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="PreviewDrop">
                                <cal:ActionMessage MethodName="NewPhotosDropped">
                                    <cal:Parameter Value="$eventArgs"></cal:Parameter>
                                </cal:ActionMessage>
                            </i:EventTrigger>
                            <i:EventTrigger EventName="SelectionChanged">
                                <cal:ActionMessage MethodName="CategorySelectionChanged">
                                    <cal:Parameter Value="{Binding ElementName=MyPhotoSets,

                                         Path=SelectedItem}"></cal:Parameter>
                                </cal:ActionMessage>
                            </i:EventTrigger>
                            <i:EventTrigger EventName="KeyUp">
                                <cal:ActionMessage MethodName="KeyUpHappened">
                                    <cal:Parameter Value="$eventArgs"></cal:Parameter>
                                </cal:ActionMessage>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </ListBox>

You should add a xmlns reference to System.Windows.Interactivity and Caliburn Micro in your xaml page as shown below

             xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro"
             xmlns:i="clr-namespace:System.Windows.Interactivity;

                         assembly=System.Windows.Interactivity"

As you can see in the ListBox I added an event trigger for PreviewDrop and KeyUp. Obviously in you Viewmodel you need to get the DragEventArgs or KeyEventArgs to perform the desired action. We can instruct Caliburn Micro to send these eventargs to the viewmodel function by adding a parameter with value ‘$eventArgs’. Just examine the xaml code.

                            <i:EventTrigger EventName="PreviewDrop">
                                <cal:ActionMessage MethodName="NewPhotosDropped">
                                    <cal:Parameter Value="$eventArgs"></cal:Parameter>
                                </cal:ActionMessage>
                            </i:EventTrigger>

In the above code will work like this. If a PreviewDrop event happened in Listbox then call NewPhotosDropped function in my Viewmodel with parameter DragEventArgs. Have a look at my Viewmodel’s NewPhotosDropped function

public void NewPhotosDropped(DragEventArgs e)
{
     //perform your task with parameter e.    

}

That’s it now you will get the DragEventArgs in your Viewmodel and do what ever you wanted to do with it.

How to get a View in ViewModel

Most of the case you don’t need a reference to the View. But if in any case you need the reference of your View in your Viewmodel, no issues. You can override OnViewLoaded function of Caliburn micro in Viewmodel and get your view as follows.

protected override void OnViewLoaded(object view)
{
    base.OnViewLoaded(view);
    MyView myView = view as MyView;
    if (myView != null)
        _webBrowserControl = myView.WebBrowserControl;
}

How to Bind a ViewModels to a ListBox/ItemsControls that has Custom Template

In some scenarios you may need to bind a list of Viewmodels to a Listbox. If there is no custom templates then no issues. But if the Listbox has some custom templates and the view should show in a contentcontrol placed in the template. Then we should add one dependency property to the content control. Let’s take an e.g

                <ListBox x:Name="IndividualComments" BorderThickness="0">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Vertical" Background="Gray"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Black" 
                                    BorderThickness="1" 
                                    CornerRadius="0" 
                                    Background="Transparent" Margin="1">
                                <ContentControl ca:View.Model="{Binding}" Margin="0" Background="Transparent"/>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>                    
                </ListBox>

View model code

private ObservableCollection<IndividualCommentViewModel> _individualComments;
public ObservableCollection<IndividualCommentViewModel> IndividualComments
{
    get { return _individualComments; }
    set
    {
        _individualComments = value;
    }
}

In the viewmodel I will have a list of IndividualCommentViewModel. The Listbox in xaml page has some custom template to add a border around the comments. The viewmodel should be binded to a ContentControl inside the border. I tried lot of ways to show my view in the content control but failed. After some search in Caliburn Micro code and googling I came across View.Model dependency property.

As you can see the contentcontrol

<ContentControl ca:View.Model=”{Binding}” Margin=”0″ Background=”Transparent”/>

If we set ca:View.Model=”{Binding}” then Caliburn Micro is intelligent enough to set the View to the content control. ‘ca’ is my xmlns name reference in the page, it can be any name.

Showing Views in Tabcontrols just like in Visual Studio

In iTraveller views like Preview, Search Result, Upload basket, etc are in tabbed view. In one of Rob’s post he explained in detail how we can achieve tabbed view. I just used the same approach he mentioned. I don’t think I need to explain it again.

How to Give a Title to Popup window

After the release, when I recheck iTraveller, I could see that the popup window is showing without the Title I had given in the xaml page. The title is coming with fully functional name of the popup’s viewmodel. So how to solve it. What we need to do is inherit the viewmodel from screen. See the below code to set the title

FlickrAuthorizeViewModel flickrAuthorizeViewModel = new FlickrAuthorizeViewModel(flickrService);
flickrAuthorizeViewModel.DisplayName = "Flickr Authorization";
WindowManager winManager = new WindowManager();
winManager.ShowDialog(flickrAuthorizeViewModel, null);

Screen class has a property called Display Name, just set the title to Display Name property as shown above. We are done, the WindowManager will now show the popup with the Title I given in DisplayName property

Event Aggregator

Event Aggregator in Caliburn Micro is a powerful implementation of Observer/Subscriber pattern. The usage of Event aggregator is not limited to ViewModel communication. It can be used in any layer, if there is a need of Observer/Subscriber communication. In iTraveller the messaging (Event Aggregation) is a separate Layer. One main reason I separated it from UI layer is, I may need to raise messages from other layers other than UI. In iTraveller’s User Comment service uses Event Aggregator to publish the result once it’s processed all the comments fetched from Flickr or Facebook. I used Event Aggregator here because once the comments are saved the application does two things, 1: it’s start indexing those comments for searching, 2: a tab need to open to display the comments fetched from Flickr/Facebook. Rather than calling those functionalities the Comment service just publish the processed comments. Who ever listening those messages will get notified, here in iTraveller Indexing service and UserCommentUpdateViewModel is listening to UserComment message. They know what they should do when they got UserComment update notification.

As the day passes… more and more in love with Caliburn Micro . Thanks for reading. Any questions or comments pls update it in the comment section.