How to properly load content inside ModernWindow using mvvm

Question

In our company, we are used to developing our applications using WinForms. Now we decided to switch to WPF-MVVM using Caliburn.Micro and Modern UI. What we are trying to achieve is to have a small application that has: - 1 Modern window - 2 pages inside this window, the goal is to have a button on this page that moves the Modern window to the second page with parameters .

I work, trying to figure out how to do this, I managed using Window (without MUI), but when it comes to MUI, it does not give me the desired result.

So far all that I have done

• Create a new MUI project
• Add Caliburn.Micro to the project

• Change App.xaml to

  <Application x:Class="MuiWithCaliburn01.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:MuiWithCaliburn01"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary> <local:AppBootstrapper x:Key="bootstrapper" /> <local:ModernContentLoader x:Key="ModernContentLoader" /> </ResourceDictionary> <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" /> <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> 

• Create a Bootstrapper Class

   public class AppBootstrapper : BootstrapperBase { static AppBootstrapper() { } public AppBootstrapper() { Initialize(); } protected override void OnStartup(object sender, StartupEventArgs e) { DisplayRootViewFor(); } } 

• Create the ModernContentLoader Class

   public class ModernContentLoader : DefaultContentLoader { protected override object LoadContent(Uri uri) { var content = base.LoadContent(uri); if (content == null) return null; var vm = Caliburn.Micro.ViewModelLocator.LocateForView(content); if (vm == null) return content; if (content is DependencyObject) { Caliburn.Micro.ViewModelBinder.Bind(vm, content as DependencyObject, null); } return content; } } 

• ModernWindowView.xaml and ModernWindowViewModel.cs

   < mui:ModernWindow x:Class="MuiWithCaliburn01.ModernWindowView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mui="http://firstfloorsoftware.com/ModernUI" ContentLoader="{StaticResource ModernContentLoader}"> < mui:ModernWindow.MenuLinkGroups> < mui:LinkGroupCollection> < mui:LinkGroup DisplayName="Hello"> < mui:LinkGroup.Links> < mui:Link Source="Child1View.xaml" DisplayName="Click me">< /mui:Link> < /mui:LinkGroup.Links> < /mui:LinkGroup> < /mui:LinkGroupCollection> < /mui:ModernWindow.MenuLinkGroups> < /mui:ModernWindow> 

   class ModernWindowViewModel : Conductor.Collection.OneActive { public ModernWindowViewModel() { //this function is doing nothing in the ModernWindow, but it works great in the Window. ActivateItem(new Child1ViewModel()); } } 

• And finally, Child1View.xaml

   <UserControl x:Class="MuiWithCaliburn01.Child1View" 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:mui="http://firstfloorsoftware.com/ModernUI" mc:Ignorable="d" xmlns:cal="http://www.caliburnproject.org" xmlns:model="clr-namespace:MuiWithCaliburn01" d:DataContext="{x:Type model:Child1ViewModel}" d:DesignHeight="300" d:DesignWidth="300"> <Grid> <Button cal:Message.Attach="ClickMe" Width="140" Height="50">Hello World</Button> </Grid> </UserControl> 

  and Child1ViewModel.cs

   public class Child1ViewModel : Conductor<IScreen> { public void ClickMe() { MessageBox.Show("Hello"); } } 

My question is: step 6, why does the function do nothing? and if my path is wrong, can someone direct me to a better path?

And if this is the best approach, how can I move from the ClickMe function to another view.

Answer 1

As for your first question about why a function does nothing, I think this may be relevant to your project hierarchy. Using MUI is the main (and only) window for one of my applications

 <mui:ModernWindow x:Class="namespace.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mui="http://firstfloorsoftware.com/ModernUI" Title="Window Title" IsTitleVisible="True" ContentSource="/Pages/Home.xaml" Style="{StaticResource MyModernWindow}"> <mui:ModernWindow.TitleLinks> <mui:Link DisplayName="settings" Source="/Pages/SettingsPage.xaml" /> </mui:ModernWindow.TitleLinks> 

in my project hierarchy, I have my project root (CSPROJ file), MainWindow.xaml, and then the Pages folder. In my pages folder I have SettingsPage.xaml. The source attribute in the mui: Link tag points to the real path of my main window to my settingsPage.xaml file. The MUI will then download and show this path in the content provider, which is placed in your main window for you according to the default style template for MUI ModernWindow. No additional code is required on your part for navigation (until you need complicated navigation by subspecies).

my settingsPage.xaml file is a regular user control with a grid having a style assigned to the style of the static resource ContentRoot, since it will also contain additional views / pages.

Mui source can be found on GitHub at Mui GithubLink . Here you can download a sample program, the code of which is in the same repository in the application Link here for convenience .

I am not familiar with Caliburn.Micro, therefore I am not sure how these two are combined together, for example, the requirements of Caliburn.Micro for work. I know how MUI integrates with MVVM backlighting, and in my research there are many examples of this found on the Internet.