Wiki

Clone wiki

AtomicMVVM / Metro_(Windows_8)

We will start off with an empty Metro 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. Open your MainWindow.xaml (this will be our shell) and remove the Grid.
<Window x:Class="DocumentationDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
</Window>
  • Step 3. 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 4. 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 async void SayHi()
    {
        await new MessageDialog().ShowAsync("Hello "+this.Name);
    }

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

Notes:

  1. The Name property calls RaisePropertyChanged, which is a helper method to INotifyPropertyChanged.
  2. The name of the SayHi method and its signature (returns void, takes no parameters). This is important for the convention based binding for commands.
  3. 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.
  4. The ReevaluateProperty attribute which tells the bootstrapper that when the Name property changes the result of this method changes too.
  • Step 5. 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 name is the same as our method name in the view model.
  • Step 6. Open the App.xaml.cs file and add a property of class Bootstrapper.
public partial class App : Application
{
    public static Bootstrapper Bootstrapper {get;set;}
}
  • Step 7. Next replace the OnLaunched method content so that it creates the Bootstrapper and calls the Start<TShell,TContent> method of the boot strapper. 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.
private void OnLaunched(LaunchActivatedEventArgs args)
{            
    Bootstrapper = new Bootstrapper();
    //todo: set any global commands here
    Bootstrapper.Start<MainWindow, ViewModels.Simple>();
}
  • Step 8. Press F5 and enjoy

Updated