Wiki

Clone wiki

AtomicMVVM / WPF

We will start off with an empty WPF project; just to show you how easy it is to get started!

  • Step 1. Grab AtomicMVVM from Nuget - this will create the two folders needed, namely: Views & ViewModels.
  • Step 2. In the code behind for MainWindow.xaml, have the class inherit from IShell and implement the interface. It has one method which is used to set the content of our ContentControl when the view changes.
public partial class MainWindow : Window, IShell
{
    public MainWindow()
    {
        InitializeComponent();
    }

    public void ChangeContent(UserControl viewContent)
    {
        this.Content = viewContent;
    }
} 
  • Step 3. Now we will create the view model. Right click on the ViewModels folder and add a new public class that inherits from CoreData called Simple (i.e. Simple.cs). This view model has a Name property, a method that says hello and a method that states if Name is not null or white space.
public class Simple : CoreData
{
    private string _name;

    public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            RaisePropertyChanged("Name");
        }
    }

    public void SayHi()
    {
        MessageBox.Show("Hello "+this.Name);
    }

    [ReevaluateProperty("Name")]
    public bool CanSayHi()
    {
        return !string.IsNullOrWhiteSpace("Name");
    }

} 

Notes:

  • The Name property calls RaisePropertyChanged, which is a helper method to INotifyPropertyChanged.
  • The name of the SayHi method and its signature (returns void, takes no parameters). This is important for the convention based binding for commands.
  • The name of CanSayHi method, it’s convention of the Can prefix, and its signature (returns Boolean, takes no parameters). This is important for the convention based binding for commands.
  • The ReevaluateProperty attribute which tells the bootstrapper that when the Name property changes the result of this method changes too.
  • Step 4. Now for the view, right click on the Views folder and add a UserControl named Simple (i.e. Simple.xaml) and in there we add the XAML to enter a name and click a button.
<UserControl x:Class="DocumentationDemo.Views.Simple"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <StackPanel>
        <TextBlock Text="Name"/>
        <TextBox Text="{Binding Name}"/>
        <Button x:Name="SayHi" Content="Say Hello"/>
    </StackPanel>
</UserControl>

Notes:

  1. We use normal binding for the Text property of the TextBox to the Name property of the view model.
  2. The Button (which is an ICommandSource) name is the same as our method name in the view model.
  • Step 5. Open the App.xaml file and remove the StartUri attribute. If you don’t, you’ll end up with two windows, one that works and one that is blank.
  • Step 6. Open the App.xaml.cs file and add a property or field of class Bootstrapper.
public partial class App : Application
{
    public static Bootstrapper Bootstrapper {get;set;}
    
    public App()
    {
        Bootstrapper = new Bootstrapper();  
        Bootstrapper.Start<MainWindow,ViewModels.Simple>(); 
    }
}

Hint: I prefer a static property for the bootstrapper as this allows you to access the boot strapper pretty much everywhere in your project by calling App.Bootstrapper.

  • Step 7. In the constructor, or whenever you want to identify the system is ready, call the Start<TShell,TContent> method on the bootstrapper. The first generic type is the class to use as the shell (i.e. our MainWindow) and the second is the default view model to load into the shell.
  • Step 8. Press F5 and enjoy!

Updated