Wiki

Step 1. We will start off with a blank Windows Phone project. Step 2. Grab AtomicPhoneMVVM from Nuget - this will create the one folder we need, namely: Views. Step 3. In Views add a class named MainPage (i.e. mainpage.cs) and have your new class inherit from CoreData. Step 4. Add some properties that use INotifyPropertyChanged via the RaisePropertyChanged method and some methods.

public class MainPage : CoreData
    {
        private string _name;
        private string message;

        public string Message
        {
            get { return message; }
            set
            {
                if (value != message)
                {
                    message = value;
                    RaisePropertyChanged("Message");
                }
            }
        }

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

        public void SayHi()
        {
            Message = "Hi " + Name;
        }

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

    }

Step 5. Next let’s add some UI controls to our page – we will have a TextBox, TextBlock and Button controls to the MainPage.xaml. Note we use standard binding for the TextBox and TextBlock and how we set the button name to be the same as our method name.

<phone:PhoneApplicationPage 
    x:Class="AtomicPhoneMVVMDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <StackPanel>
        <TextBox Text="{Binding Name , Mode=TwoWay}"/>
        <Button x:Name="SayHi" Content="Say Hello"/>
        <TextBlock Text="{Binding Message}"/>
    </StackPanel>	

</phone:PhoneApplicationPage>

Step 6. In the code behind for the page add the AtomicPhoneMVVM namespace, and then in the constructor call the BindData extension method passing in the View class that we created earlier.

using AtomicPhoneMVVM;

public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        this.BindData<Views.MainPage>();
    }
}

Step 7. Press F5 and enjoy.