Caliburn Micro supports one to many relationship between a view-model and multiple views i.e. we can render the same view-model differently by using one of the many views. In this article we will see this aspect by rendering view-model (1) as a dialog window (2) as a sub-view.
I assume you know how to setup caliburn bootstrapper and use contentcontrol attribute, if not, please read my previous article or head to caliburnmicro.codeplex.com.
Recap: Caliburn Micro uses naming convention to do the essential binding between view and view-model. Example, we can render a view-model named “ContentViewModel”, as long as we have a view named “ContentView”. The default convention is <Entity>View for View, and <Entity>ViewModel for the view model (it is all in the suffix).
But what if we want to render the view-model using different view on a case by case basis? Let us see how Caliburn Micro can help us here with the two most common scenarios:
(1) Render view model differently when showing a popup-window/dialog
We can render a view model as a popup, dialog or window by using Caliburn Micro’s Window Manager class (invoke ShowDialog, ShowPopup or ShowWindow methods on CM’s WindowManager to achieve the same).
Example: below is how we render a view model (ContentViewModel) as dialog; per convention, Caliburn Micro would use the default naming convention to look for corresponding view (in this case ContentView)
To render this view-model with a different view, all it takes is to pass the name of the context as second parameter to ShowDialog (in this example we pass “SecondView” as Context), now Caliburn Micro would instead use the convention “Content.<ContextName-ThatYouPassed>” to look for the respective view (in our example CM would use the view named “Content.SecondView”). See Caliburn Micro Naming Convention page for more details.
Note: It is not mandatory to include the literal “View” in the context name.
(2) Render sub-view differently
In the second example we will use CM to dynamically switch and re-render a section of a window with a completely different view (keeping the underlying view-model same).
Example: In the below example we want to dynamically change how list of numbers are rendered.
- ContentControl holds the numbers that needs to be rendered. In the above screenshot the contentcontrol is rendered using a view which uses listbox to render the underlying numbers, our goal is to switch to a different view that uses different control to render the numbers (again, if you are not familiar with how CM uses ContentControl, then please read my previous article mentioned above)
- ComboBox (named “RenderTypes”) lists the available views via which we could render the ContentControl differently
To keep the example simple: we’d render the numbers in one of the two ways i.e. as a list box and as a Carousel Control (using infragistics Carousel Control – see my previous article on how to setup infragistics control with caliburn micro), thus we’d show these two rendering types as combobox items (CarouselView/ListView)
As with the first example we’d use Context property as a hint to CM to find the required view, to do so we’d use the attached property to establish binding between ContextProperty and combo box
Now when we select the value of the combobox to “CarouselView”, CM would render ContentControl with a view ending with name “CarouselView”, and similarly with ListView
