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.

Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in Blend, Data, Mini-Tutorial, Patterns & Skills, WindowsPhone and tagged . Bookmark the permalink.

15 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

  2. enloes says:

    Based on some of the recent comments I tried this out using the Button Command property.
    First remove the EventToCommand behavior (assuming you’ve gone through all the steps above).
    Select Page2Button. Under Miscellaneous, select the “peg” next to Command, select DataBinding and then select the Page2Command as before.
    Works the same. Is this the recommend way of messaging with 7.1?

  3. Gustavo says:

    After doing everything up to GoToPage2(), when I save & Build and go back to Blend, I can’t touch the command property under miscellaneous

  4. Frank Wu says:

    It’s way too much code when using MVVM Light comparing to using Prism. Command is at most one line of code with Prism. The “Light” means the template is light, and makes the code heavier.

  5. Dave T says:

    Actually that does seem to me like a valid question. The Command property is supported on Button both in Silverlight 4 and Windows Phone 7.1.

    http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.buttonbase.command(v=VS.95).aspx

  6. Chris Andritzky says:

    Now I got it: It’s because in Silverlight there is no Button.Command property. It’s only available in WPF.

    • Rod Falanga says:

      Chris, if I’m understanding you correctly, you’re saying that if one were using WPF, all they’d have to do is something like this:

      am I correct?

    • Rod Falanga says:

      Chris, et. al, I’ve got another question concerning the Command property. I’ve checked and found that with the release of Silverlight 4, it supports the Command property on the ButtonBase class (from Tim Heuer’s blog). So then, I’m kind of confused as to what the need is to go through connecting a command using behaviors. Why not just use the Command property of the button class?

  7. Chris Andritzky says:

    I don’t see why we need the EventToCommand behavior here. Why not just simply bind the Button.Command property to Page2Command? This would also ensure that the button gets disabled when the command’s CanExecuteChanged method returns false.

    I see that this is only an example, but it might be better to use an event for which there is no corresponding Command property (like ComboBox. SelectionChanged).

  8. Kris Athi says:

    If you are having trouble seeing the behaviours, double check you have installed all the toolkit bits correctly – there is a link to it in part 1.

    Great job Jesse, Great series so far :)

  9. Anonymous says:

    ohh.. i need to install lvvmlight to see that i think.. I just tried opening the project

  10. Anonymous says:

    I don’t see a ‘eventtocommand’ behaviour in my blend 4.. everyone else sees this?

  11. Shoaib Shaikh says:

    great series of post. keep it up!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>