Example of creating custom user controls

Nov 15, 2011 at 8:34 AM

Hello,

I've followed the sample hand have understood how caliburn micro works for managing MVVM ... by the way I've got some difficulties understanding how to compose a UserControl and attaching the models...

If my usercontrol is composed of different usercontrols how can I merge them? Consider the case where I've a custom control and a grid below It's ok to have this piece of code?

<UserControl x:Class="xxx.Views.TempView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:xxx.Views.Search"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d" 
             
             d:DesignHeight="300" d:DesignWidth="300">

<local:CustomerSearchView  cal:Bind.Model="xxx.ViewModels.Search.CustomerSearchViewModel" x:Name="CustomerSearchView"></local:CustomerSearchView>
    <!--SomeGrid-->
</UserControl>

In the TempViewModel should I put a ViewModel for each custom control I've in the view? It's ok to do the cal:Bind.Model="..." ? If I got two user controls should I refer to each own model?
Thanks

Coordinator
Nov 16, 2011 at 6:39 PM

To do View/ViewModel composition in Caliburn Micro, you use a ContentControl to bind it to properties of a conductor. The conductor properties simply return another ViewModel. CM will automatically find the corresponding View, attach it to the ViewModel and set it as the content of the ContentControl. The Conductor manages the lifecycle of the individual parts, such as Activation, Deactivation and Closing Strategy.

Screens and the different Conductors are explained here: http://caliburnmicro.codeplex.com/wikipage?title=Screens%2c%20Conductors%20and%20Composition&referringTitle=Documentation

I've put a simple example on my Skydrive: https://skydrive.live.com/redir.aspx?cid=b37183c914f0fbe8&resid=B37183C914F0FBE8!187

In this example, I'm using a Conductor with multiple active items, that composes a Top and Bottom view.