Exercise 3: Handling Commands and Binding to a ViewModel

In this exercise you'll add commanding support into the SilverlightCustomerViewer project. Commanding allows events triggered in a View such as a Button's Click event to be routed directly to a ViewModel instance without having to add code in a code-beside file. You'll be introduced to the ICommand interface as well as a RelayCommand class that will be used within MainPageViewModel to handle commands. Finally, you'll bind MainPageViewModel to a View using a declarative binding syntax.

1. Open the Commanding/RelayCommand.cs class in the SilverlightCustomerViewer project and note that it implements ICommand. This interface is required in order for a Silverlight application to support commanding.
   Note:

   Commanding is the process of forwarding events that occur in the user interface to a ViewModel object for processing at runtime. The RelayCommand class will be used to wire properties in a ViewModel to methods that are invoked when any control derived from ButtonBase is clicked in a View. It satisfies the ICommand interface allowing commanding to be used in Silverlight MVVM applications.
2. Add the following code into MainPageViewModel to create properties capable of binding to controls that expose a Command property. Resolve the required namespace.

   C#

   publicRelayCommandUpdateCustomerCommand{get;private set;} publicRelayCommandDeleteCustomerCommand{get;private set;}

   Visual Basic

   Private _UpdateCustomerCommand As RelayCommand Public Property UpdateCustomerCommand() As RelayCommand Get Return _UpdateCustomerCommand End Get Private Set(ByVal value As RelayCommand) _UpdateCustomerCommand = value End Set End Property Private _DeleteCustomerCommand As RelayCommand Public Property DeleteCustomerCommand() As RelayCommand Get Return _DeleteCustomerCommand End Get Private Set(ByVal value As RelayCommand) _DeleteCustomerCommand = value End Set End Property
3. Add the following code into MainPageViewModel to handle wiring up the properties defined in the previous step to methods that will be invoked once a command is executed:

   C#

   private voidWireCommands(){UpdateCustomerCommand= newRelayCommand(UpdateCustomer);DeleteCustomerCommand= newRelayCommand(DeleteCustomer);}

   Visual Basic

   Private SubWireCommands() UpdateCustomerCommand = New RelayCommand(AddressOf UpdateCustomer) DeleteCustomerCommand = New RelayCommand(AddressOf DeleteCustomer)End Sub
   Note:

   WireCommands handles associating two RelayCommand properties with methods that will be invoked as a command is executed in a View. For example, any Button with a Command property bound to UpdateCustomerCommand will cause the UpdateCustomer method to be invoked.
4. Add a call to the WireCommands method within MainPageViewModel's second constructor (add the code immediately under the GetCustomers method call within the constructor).
5. Add code within the CurrentCustomer property's set block to assign the IsEnabled property of UpdateCustomerCommand and DeleteCustomerCommand to a value of true (add the code within the existing "if" statement).
6. Open MainPage.xaml and add the following xml namespace definition on the UserControl element to reference the ViewModels namespace:

   XAML

   xmlns:viewModels="clr-namespace:SilverlightCustomerViewer.ViewModels"
7. Create a UserControl.Resources element within the XAML immediately below the beginning UserControl element and add the following code into it:

   XAML

   <viewModels:MainPageViewModel x:Key="ViewModel" />
8. Bind the ViewModel key created in the previous step to the LayoutRoot element's DataContext property using a StaticResource binding. This will bind a MainPageViewModel object instance to the DataContext.

   XAML

   DataContext="{Binding Source={StaticResource ViewModel}}"
9. Build the solution. If you encounter any compilation errors resolve them before continuing.
10. Right-click on the ComboBox control in the designer and select Properties from the menu.

11. Locate the ItemsSource property and click on its Binding value to view the data binding window. Select Customers from the available Path values as shown next:

    Figure 1

    Binding Data to the ItemsSource Property

12. Follow the same procedure shown in the previous step to bind the ComboBox control's SelectedItem property to CurrentCustomer.
    Note:

    You'll need to click on the icon to the right of SelectedItem and then select Apply Data Binding to access the data binding window.
13. Bind the Text property of each TextBox control to the associated property in CurrentCustomer.
    Note:

    To do this, first clear any existing bindings by selecting the data icon to the right of the Text property and select Reset Value. You'll need to bind the Text property of each TextBox to CurrentCustomer and then select the appropriate property from CurrentCustomer (FirstName, LastName, etc.) in the data binding window.
14. Bind the Command property of each Button control to the appropriate command property in the ViewModel (UpdateCustomerCommand or DeleteCustomerCommand) using the same technique shown in the previous steps.
15. Drag a TextBlock control from the Toolbox and drop it directly to the right of the existing Delete button. Change the Width of the TextBlock to 200.
16. Bind the newly added TextBlock control's Text property to the StatusMessage property of the ViewModel using the data binding window.
17. Run the application and test the functionality. As you update or delete a Customer object a success message should appear to the right of the Button controls. Select a different customer and the success message should disappear.