Saturday, July 22, 2017

Create WPF Caliburn.Micro Application Tutorial


Create Caliburn.micro Application


Create a new WPF application in Visual Studio

Go to NuGet Manager and add the package Caliburn.Micro.Start package.
This will add the necessary files to create a Caliburn.Micro application.

Follow the instructions to modify the files to make the Caliburn.Micro work.

Modify App.xml.cs
namespace YourNamespace
{
    using System.Windows;

    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
        }
    }
}

Delete MainWindow.xml

Modify App.xml
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <local:AppBootstrapper x:Key="bootstrapper" />
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>



From this point, you should be able to build and display the basic application running.


ADD View and ViewModel


Now lets add a view model and display this new ViewModel.  To do this we want the ShellViewModel to display any ViewModel we select.  So we need to change the ShellViewModel to allow any activated ViewModel to be displayed.


Lets create a basic View and ViewModel.  The View and ViewModel must match the naming scheme of XXXView and XXXViewModel, where XXX is a unique name for the view.  All the display logic will go into the View.  All the business logic will go into the ViewModel.


So create a UserControl .xaml file called Test1View.xaml.  Create a Class .cs file called Test1ViewModel.cs.


Lets modify the Test1ViewModel, to know they are a caliburn.micro MVVM page.
Open Test1ViewModel.cs and modify the class defination line to this:
public class Test1ViewModel : Caliburn.Micro.Screen {

There are other classes the ViewModel can extend, but Screen will let us change between pages with a button click.


Lets add this new ViewModel to the AppBootStrapper.cs file.  Under the configure() method, lets add a new line.  This line will be similar to the others already added in the method.
container.Singleton<Test1ViewModel, Test1ViewModel>();

We will be making this a singleton page.  This means, every time we view this page, it will be the same page after it is first initialized.  So the state will be saved every time we view the page.  There will only be one instance of this view created for the entire application.

If you choose container.PerRequest, this page will recreated every time the page is viewed.  So no state will be saved if you change the view.  And you can have multiple instances of this page in one application.


To give us something new to view, we will add a button to Test1View.  Open it in the designer and add a button to the page.  You can give the button some text like "Connect".  Here is an example:

<Grid> 
  Button Content="Connect" /> 
</Grid>

Modify ShellViewModel to Change Page Views


We will modify the ShellViewModel to allow page changes to be completed.  This is done by activating a page.  The page will be found based off what we added to the AppBootStrapper list in configure().

Lets modify ShellViewModel.cs to this:


public class ShellViewModel : Conductor<object>, IShell, IDeactivate
{
  public ShellViewModel()
  {
     base.DisplayName = "My Test Application";
     // Set the view
     var vm = IoC.Get<Test1ViewModel>();
     ActivateItem(vm);
  }
}


Lets modify ShellView.xaml to this:

<Grid> 
        <ContentControl x:Name="ActiveItem" />
</Grid> 



Build and Test


Now build the application and run it.  You should see the button displayed.  So to take this further, create additional View and ViewModels, have a button or menu that will activate the page to display the different views.

1 comment:

  1. Very helpful for all those looking to build new applications at a beginner level. This can often become complex, however your post explains everything very well. Keep up the good work.

    ReplyDelete