How do I load controls in different ContentControls of a Shell using CaliburnMicro
If the ViewModel that gets binded to the UI contains a property with the name that matches a content control. The Content control view automatically gets resolved the the view supported by this property, provided this property itself is a ViewModel type and has been registed with Ioc container. For example
<ContentControl x:Name="LoginStatus"></ContentControl>
If there is a property LoginStatus on the main ViewModel (LoginStatus property itself is a ViewModel). The content control would correctly get rendered with the appropriate view.
This is an old question, but in case anyone is having the same issue, here is my solution:
- Your main window that contain both (or even more than two) of your User Controls must be inherited from
Caliburn.Micro.Conductor<Screen>.Collection.AllActive
; - Your User Controls must be inherited from
Caliburn.Micro.Screen
; - You must also keep naming conventions in mind. If you use MenuUC as the name of a ContentControl in your View, also create a property named MenuUC in your ViewModel;
- Initialize your UserControl as I do in Constructor;
- Now you can use
ActivateItem(MenuUC)
andDeactivateItem(MenuUC)
everywhere in your code. Caliburn.Micro automatically detects which one you want to work with.
Example XAML View code:
<Window x:Class="YourProject.Views.YourView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://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" Title="YourViewTitle" Width="900" Height="480"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="4*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!-- Menu Side Bar --> <ContentControl Grid.Row="0" Grid.Column="0" x:Name="MenuUC" /> <!-- Panel --> <Border Grid.Column="1" Grid.RowSpan="2" BorderThickness="1,0,0,0" BorderBrush="#FF707070" > <ContentControl x:Name="PanelUC" /> </Border> </Grid></Window>
Example C# ViewModel code:
class YourViewModel : Conductor<Screen>.Collection.AllActive{ // Menu Side Bar private MenuUCViewModel _menuUC; public MenuUCViewModel MenuUC { get { return _menuUC; } set { _menuUC = value; NotifyOfPropertyChange(() => MenuUC); } } // Panel private Screen _panelUC; public Screen PanelUC { get { return _panelUC; } set { _panelUC = value; NotifyOfPropertyChange(() => PanelUC); } } // Constructor public YourViewModel() { MenuUC = new MenuUCViewModel(); ActivateItem(MenuUC); PanelUC = new FirstPanelUCViewModel(); ActivateItem(PanelUC); } // Some method that changes PanelUC (previously FirstPanelUCViewModel) to SecondPanelUCViewModel public void ChangePanels() { DeactivateItem(PanelUC); PanelUC = new SecondPanelUCViewModel(); ActivateItem(PanelUC); }}
In the above example, ChangePanels()
acts as a method to load new User Control into your ContentControl.
Also read this question, it might be help you further.