Windows Phone From Scratch #17: MVVM Light Toolkit Soup To Nuts Part 2

This is the second part of the MVVM Light Toollkit Soup To Nuts (part 1 is here) withinhome change for a goldfish to a better place the Windows Phone From Scratch Mini-tutorial series.  Today we look at an introduction to behaviors as a tool for migrating event handling from code-behind to the View-Model.

Behaviors were originally introduced in Blend to empower designers, but they turn out to be enormously helpful to C# programmers as well.  For example, it is a design goal to move as much of the (testable) logic of the program out of code-behind (where testing is more difficult) and into the View-Model. But what to do about events, such as the click event on a button?

What We’ll Build

To illustrate this, we’ll return to the example we began in part 1, and extend it by adding a button to MainPage that will cause the application to navigate to page 2.  We’ll do this in two steps:

  • First we’ll substitute a behavior for the event handler
  • Second we’ll use messages (in part 3) to tell the page to navigate to the new page

To get started, re-open MvvmLightNavigationBehaviorAndMessages  in Expression Blend (if you don’t have the project, you can download the source code here.)

Make the following changes to MainPage.xaml

  • Remove the text box
  • Add a row towards the top of the content grid
  • Place a button, centered, into that row with the content Page 2, named Page2Button.

Click on Assets and then click on Behaviors.  Drag EventToCommand down to the Objects and Timeline window and onto Page2Button.  When you release the mouse, you’ll find [EventCommand] as a child of the button.  Go to the properties window and name it Page2ButtonClicked.

Leave the EventName as click.  We’ll want to bind to a command in the code behind, so save all the files and switch over to the same project in Visual Studio.

Creating the Bindable Behavior Property

In the View-Model for MainPage (MainViewModel.cs, add a property for the command (of type RelayCommand):

 public RelayCommand Page2Command
 {
    get;
    private set;
 }

You’ll need to add a using statement for RelayCommand

using GalaSoft.MvvmLight.Command;

Next we’ll initialize the value of the property in the constructor for MainViewModel,

public MainViewModel()
{
   Page2Command = new RelayCommand( () => GoToPage2() );

This sets the property (Page2Command) to call a method named GoToPage2.  You can stub that out for now as follows:

private object GoToPage2()
{
   System.Windows.MessageBox.Show( "Navigate to Page 2!" );
   return null;
}

 

Save and build the application and then return to Expression Blend.  In the properties window for the Page2ButtonClicked command find the Command property (under Miscellaneous) and click on the property peg and choose Bind. The CreateDataBinding dialog opens.  Select Page2Command and click OK.

Run the project and when you click on the Page2 button a dialog box opens with the text you specified(!)

What Have You Done?

What you’ve done is to bind a behavior to a property in the code behind. The property is initialized not with a value but with a method that is invoked when the behavior is triggered.

You can see the missing bit by opening the Xaml for the Button, in MainPage.xaml,

 <Button
    x:Name="Page2Button"
    Content="Page 2"
    Margin="0"
    Grid.Row="1"
    d:LayoutOverrides="Width, Height"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <Custom:Interaction.Triggers>
       <Custom:EventTrigger
          EventName="Click">
          <GalaSoft_MvvmLight_Command:EventToCommand
             x:Name="Page2ButtonClicked"
             Command="{Binding Page2Command, Mode=OneWay}" />
       </Custom:EventTrigger>
    </Custom:Interaction.Triggers>
 </Button>

 

The very good news is that the logic for handling the button click is now in the view-model rather than in the code behind.

In the next part of this series, we’ll look at how the view-model can send a message back to the view to take advantage of the view’s access to the navigation mechanism.

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen Pluralsight & LinkedIn Learning courses. He was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in Blend, Data, Mini-Tutorial, Patterns & Skills, WindowsPhone and tagged . Bookmark the permalink.

17 Responses to Windows Phone From Scratch #17: MVVM Light Toolkit Soup To Nuts Part 2

  1. Pingback: Win8 (Metro style) app development – getting started « RaSor's Tech Blog

Comments are closed.