Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / XAML

Step by Step Guide to Silverlight 4 Command Binding

Rate me:
Please Sign up or sign in to vote.
4.90/5 (13 votes)
11 May 2010CPOL5 min read 100.6K   867   37   23
In this article, I will describe how to implement the command binding to load some information & display it to the UI.

Introduction

Silverlight 4 now came up with the support of Command Binding. Using Command Binding, you can easily develop your Silverlight MVVM (Model-View-ViewModel) applications where your view will not know about the data, i.e., a full separation of the view from the model. In this article, I will describe how to implement the command binding to load some information & display it to the UI.

Background

In the earlier version of Silverlight, if you wanted to load something on the click of a button, you had to register the event in your view and then you had to call the appropriate method to load data. Let's say, as an example I want to load the customer information of my grocery shop when I click on a specific button. How will you implement this in Silverlight? The answer is simple. I will register a Click event of the button and then I will call the CustomerProvider to load the customer information in my view. It’s simple enough but do you agree that this scatters your view with the functionality to load the information? Yup, these backend related calls are tightly coupled with your view. They know each other and if I want to give the same call from a different button, I have to register the click event for that button and then have to give a call. It looks a bit ugly in normal scenarios.

Now assume the MVVM architecture, where you will have the view to show the UI related stuffs, model as data and viewmodel to do my necessary stuff to call the provider to get the customer information and store within the viewmodel. Your view will not have any information about your data. Once binded to the UI, it will automatically load the information. This will give you clean, maintainable code with separation of the view from the business logic.

Implementation of DelegateCommand

To implement Command binding, you have to create a DelegateCommand which implements the ICommand interface. The ICommand interface is available in System.Windows.Input namespace in the System.Windows.dll assembly. It defines the contract for commanding.

  • It has an EventHandler CanExecuteChanged” which occurs when changes occur that affect whether the command should execute.
  • It has a method named “CanExecute” and returns a boolean value true or false based on whether the command can be executed in its current state.
  • Another method named “Execute” which is called when the command is invoked.

Here is the implementation of the ICommand interface:

C#
namespace System.Windows.Input
{
   public interface ICommand
   {
       event EventHandler CanExecuteChanged;
       bool CanExecute(object parameter);
       void Execute(object parameter);
    }
}

Now we have to implement the methods defined in the ICommand interface to our DelegateCommand class. Here is the simple implementation of the same:

C#
using System;
using System.Windows.Input;

namespace Silverlight4.CommandBinding.Demo.CommandBase
{
    public class DelegateCommand : ICommand
    {
        /// <summary>
        /// Occurs when changes occur that affect whether the command should execute.
        /// </summary>
        public event EventHandler CanExecuteChanged;

        Func<object, bool> canExecute;
        Action<object> executeAction;
        bool canExecuteCache;

        /// <summary>
        /// Initializes a new instance of the <see cref="DelegateCommand"/> class.
        /// </summary>
        /// <param name="executeAction">The execute action.</param>
        /// <param name="canExecute">The can execute.</param>
        public DelegateCommand(Action<object> executeAction, 
                               Func<object, bool> canExecute)
        {
            this.executeAction = executeAction;
            this.canExecute = canExecute;
        }

        #region ICommand Members
        /// <summary>
        /// Defines the method that determines whether the command 
        /// can execute in its current state.
        /// </summary>
        /// <param name="parameter">
        /// Data used by the command. 
        /// If the command does not require data to be passed,
        /// this object can be set to null.
        /// </param>
        /// <returns>
        /// true if this command can be executed; otherwise, false.
        /// </returns>
        public bool CanExecute(object parameter)
        {
            bool tempCanExecute = canExecute(parameter);

            if (canExecuteCache != tempCanExecute)
            {
                canExecuteCache = tempCanExecute;
                if (CanExecuteChanged != null)
                {
                    CanExecuteChanged(this, new EventArgs());
                }
            }

            return canExecuteCache;
        }

        /// <summary>
        /// Defines the method to be called when the command is invoked.
        /// </summary>
        /// <param name="parameter">
        /// Data used by the command. 
        /// If the command does not require data to be passed, 
        /// this object can be set to null.
        /// </param>
        public void Execute(object parameter)
        {
            executeAction(parameter);
        }
        #endregion
    }
}

Implementation of ViewModelBase

Let us now implement the ViewModelBase for our application. Though for this sample application you can directly use the ViewModel, it is recommended to create a base class implementation by inheriting the INotifyPropertyChanged interface so that if you are creating multiple ViewModels, it will be easier to inherit the base class. Here is the code for that:

C#
using System.ComponentModel;

namespace Silverlight4.CommandBinding.Demo.CommandBase
{
    public abstract class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        /// <summary>
        /// Called when [property changed].
        /// </summary>
        /// <param name="propertyName">Name of the property.</param>
        protected void OnPropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Implementation of ViewModel

Now all the base classes are ready to use. Hence, we can go further to create our first ViewModel. In this example, we are going to load Customer information, so we will name it as CustomerViewModel.

First of all, we will create a new instance of DelegateCommand LoadCustomersCommand” which is an ICommand type variable. It takes two parameters. The first one is the Action which fires when the command executes and the second one is a Function pointer which returns whether the command can be executed. If it returns true, the command binded to the element will be enabled to do the operation and if it returns false, the command binded to the element will be disabled by default. Once it becomes true by any other operation, the UI thread automatically makes the element enabled.

Here in the demo application when the command executes, we will fetch the customer information from the provider and store the data in the ObservableCollection called “CustomerCollection”. We used ObservableCollection because it inherits the INotifyPropertyChanged interface and causes the UI thread to update the UI automatically when the collection changed event occurs binded to the specific UI.

C#
/// <summary>
/// Initializes a new instance of the <see cref="CustomerViewModel"/> class.
/// </summary>
public CustomerViewModel()
{
    LoadCustomersCommand = new DelegateCommand(LoadCustomers, CanLoadCustomers);
}

/// <summary>
/// Loads the customers.
/// </summary>
/// <param name="parameter">The parameter.</param>
private void LoadCustomers(object parameter)
{
    CustomerCollection = CustomerProvider.LoadCustomers();
}

/// <summary>
/// Determines whether this instance [can load customers] the specified parameter.
/// </summary>
/// <param name="parameter">The parameter.</param>
/// <returns>
///     <c>true</c> if this instance [can load customers] the specified parameter; 
///     otherwise, <c>false</c>.
/// </returns>
private bool CanLoadCustomers(object parameter)
{
    return true;
}

Implementation of UI (XAML)

As of now, our back end code implementation is ready and now we have to create our UI to show the customer information. First of all, we will create the static instance of the viewmodel as a resource of the UserControl. We named it as “vmCustomer”. Now we will design our UI with a ListBox and a Button. Once we click on the button, it should execute the command and load the data in the ListBox.

The ListBox should point its ItemSource to the CustomerCollection inside the ViewModel. The button will have the LoadCustomersCommand associated with it. If the canExecute method returns false, you will notice the button as disabled and when it returns true, it will become enabled.

Here is the full XAML implementation:

XML
<UserControl x:Class="Silverlight4.CommandBinding.Demo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Silverlight4.CommandBinding.Demo.ViewModel"
    Width="500" Height="300">
    
    <UserControl.Resources>
        <local:CustomerViewModel x:Key="vmCustomer"/>
    </UserControl.Resources>
    
    <Grid x:Name="LayoutRoot" Background="White">
        <Border CornerRadius="10,10,0,0" Background="Black"
                Height="30" VerticalAlignment="Top" Margin="20,20,20,0">
            <TextBlock Text="Silverlight 4 Command Binding Demo" Foreground="White" 
                       FontWeight="Bold" Margin="5"/>
        </Border>
        <ListBox ItemsSource="{Binding CustomerCollection, 
		Source={StaticResource vmCustomer}}"
                 Margin="20,50,20,40">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150"/>
                            <ColumnDefinition Width="150"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Path=Name}" 
				Width="100" Grid.Column="0"/>
                        <TextBlock Text="{Binding Path=Address}" 
				Width="200" Grid.Column="1"/>
                        <TextBlock Text="{Binding Path=ContactNumber}" 
				Width="100" Grid.Column="2"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Command="{Binding LoadCustomersCommand, 
			Source={StaticResource vmCustomer}}" 
                Content="Load Customers" Height="25" Margin="380,267,20,8" />
    </Grid>
</UserControl>

What’s Next?

Our full code implementation is ready. We can now run the application to see the code to execute. Press F5 to run it. Once the view is loaded, you will see the ListBox is empty and there is a button just below the empty ListBox.

Now press the button. It will fire the command to the viewmodel and will fetch the customer information from the provider to load it in the collection. Once the collection is modified, this will automatically trigger the PropertyChanged event to update the UI.

Conclusion

You will notice that in the entire sample, we didn’t write any code in the CS file of the XAML, i.e., the MainPage.xaml.cs is empty. This ensures that the business logic is totally separated from the UI implementation. This gives higher readability and maintainability of the code.

You are welcome to make any queries, comments or suggestions here. Also, don’t forget to vote for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows app development. He posts his findings, articles, tutorials in his technical blog (www.kunal-chowdhury.com) and CodeProject.


Books authored:


Connect with Kunal on:





Comments and Discussions

 
GeneralPerfect Pin
goddardiv16-Aug-14 16:37
goddardiv16-Aug-14 16:37 
GeneralMy vote of 4 Pin
vmans7953-Aug-10 19:14
vmans7953-Aug-10 19:14 
GeneralRe: My vote of 4 Pin
Kunal Chowdhury «IN»21-Sep-10 5:29
professionalKunal Chowdhury «IN»21-Sep-10 5:29 
GeneralCommands not being Invoked in my View Model Class. Pin
dgupta481329-Jul-10 5:00
dgupta481329-Jul-10 5:00 
AnswerRe: Commands not being Invoked in my View Model Class. Pin
Eric Xue (brokensnow)4-Sep-10 15:12
Eric Xue (brokensnow)4-Sep-10 15:12 
GeneralFormatting Break Pin
Abhijit Jana11-May-10 9:16
professionalAbhijit Jana11-May-10 9:16 
GeneralRe: Formatting Break Pin
Kunal Chowdhury «IN»11-May-10 9:38
professionalKunal Chowdhury «IN»11-May-10 9:38 
GeneralRe: Formatting Break Pin
Abhijit Jana11-May-10 9:41
professionalAbhijit Jana11-May-10 9:41 
Great !! Its a nice article. Have 5 Smile | :)
Cheers !
Abhijit Jana | MVP
Web Site : abhijitjana.net | Follow Me @ twitter
Read my Latest Article :Mastering Debugging in VS 2010

GeneralA small comment Pin
Pete O'Hanlon8-May-10 22:15
subeditorPete O'Hanlon8-May-10 22:15 
GeneralRe: A small comment Pin
Kunal Chowdhury «IN»8-May-10 22:25
professionalKunal Chowdhury «IN»8-May-10 22:25 
GeneralRe: A small comment Pin
Pete O'Hanlon10-May-10 11:32
subeditorPete O'Hanlon10-May-10 11:32 
GeneralRe: A small comment Pin
Kunal Chowdhury «IN»10-May-10 17:01
professionalKunal Chowdhury «IN»10-May-10 17:01 
GeneralRe: A small comment Pin
Pete O'Hanlon10-May-10 21:51
subeditorPete O'Hanlon10-May-10 21:51 
GeneralRe: A small comment Pin
Kunal Chowdhury «IN»10-May-10 23:10
professionalKunal Chowdhury «IN»10-May-10 23:10 
GeneralRe: A small comment Pin
Kunal Chowdhury «IN»11-May-10 7:09
professionalKunal Chowdhury «IN»11-May-10 7:09 
GeneralRe: A small comment Pin
Pete O'Hanlon11-May-10 10:42
subeditorPete O'Hanlon11-May-10 10:42 
QuestionRe: A small comment Pin
Dan Mos9-May-10 0:56
Dan Mos9-May-10 0:56 
AnswerRe: A small comment Pin
Pete O'Hanlon23-Aug-10 13:08
subeditorPete O'Hanlon23-Aug-10 13:08 
GeneralRe: A small comment Pin
AndrusM10-May-10 9:16
AndrusM10-May-10 9:16 
GeneralRe: A small comment Pin
Pete O'Hanlon10-May-10 11:38
subeditorPete O'Hanlon10-May-10 11:38 
GeneralRe: A small comment Pin
AndrusM10-May-10 23:10
AndrusM10-May-10 23:10 
GeneralRe: A small comment Pin
Pete O'Hanlon11-May-10 0:42
subeditorPete O'Hanlon11-May-10 0:42 
GeneralRe: A small comment Pin
Johann Gerell11-May-10 20:38
Johann Gerell11-May-10 20:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.