There is no doubt that once you finish reading the Prism 2.0 (Composite Application Library) and try out all of the quick starts that accompany the guidance; it is a must to check out the Telerik Sales Dashboard. (
http://demos.telerik.com/silverlight/salesdashboard)
Telerik not only pioneering in control development that targets the Microsoft .Net framework but also in educating developers all around the world with their extra efforts of:
- Code library
- Free software
- Extensive documentation
- Flash-Quick customer support
- Telerik labs
- Free Open-source projects
One of those major educating applications that Telerik delivers is the Telerik Sales Dashboard. It has been built on top of WPF and Silverlight keeping in mind the MVVM design pattern (Model-View-ViewModel) and Prism (Modularity, UI composition, global events, commanding, etc …)
You can download the source code to check it out and learn from it here (link)
In the whitepaper that accompanies in the Dashboard, I read the following:
PeriodSelector Module
This module handles the task of displaying a RadCalendar in a popup that can be used to select a range of dates for filtering data displayed in other modules. To close the popup containing the RadCalendar control when the user clicks outside of it, we subscribe to the MouseLeftButtonUp event of the RootVisual element of the application. We do not use the MouseLeftButtonDown event because it is used and handled internally by most controls and thus it is inappropriate for our purpose.
Also, we need to bind several properties of UI elements in this module to properties defined in the code-behind of the view, which are then in turn bound to properties in the viewmodel. This code-behind binding is necessary because the project requirements are not achievable with the XAML bindings available in Silverlight. This is a deviation from the Prism guidance, but, as already established, patterns should not be followed blindly if they block application requirements.
I found some code in the PeriodSelectorView.xaml.cs file that shouldn’t be present in a typical Prism application however, as it has been established in the Dashboard’s whitepaper, we shouldn’t follow a design pattern blindly if it blocks our work.
However, the code behind that was present could be replaced by implementing a new CommandBehavior that targets the RadCalendar. That was the first part of moving the code from code-behind into the PeriodSelectorViewModel.cs file. The other part is hooking up to the System.Windows.Application.Current.RootVisual.MouseLeftButtonUp event inside the ViewModel file itself. The second part is easy and straight forward, so I will focus on the first one.
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Data;
using System.Collections;
namespace Telerik.SalesDashboard.PeriodSelector
{
public partial class PeriodSelectorView : UserControl
{
public PeriodSelectorView(PeriodSelectorViewModel viewModel)
{
InitializeComponent();
this.DataContext = viewModel;
Binding b = new Binding();
b.Mode = BindingMode.TwoWay;
b.Path = new PropertyPath("CalendarSelectedDates");
this.SetBinding(PeriodSelectorView.SelectedDatesProperty, b);
calendar.SelectionChanged += (s, e) => this.SelectedDates = calendar.SelectedDates.ToList();
}
public IList SelectedDates
{
get
{
return (IList)this.GetValue(SelectedDatesProperty);
}
set
{
this.SetValue(SelectedDatesProperty, value);
}
}
// Using a DependencyProperty as the backing store for SelectedDates. This enables animation, styling, binding, etc...
public static readonly DependencyProperty SelectedDatesProperty =
DependencyProperty.Register("SelectedDates", typeof(IList), typeof(PeriodSelectorView), null);
}
}
What has been done above is:
- Define SelectedDates as a Dependency property on the View itself
- Define CalendarSelectedDates as a property on the ViewModel class
- Define a Binding between the above two properties
- Hooking up to the SelectionChanged event of the RadCalendar to fill the SelectedDates property hence filling the CalendarSelectedDates property.
The above was a way to hook into RadCalendar control on the View to retrieve selected dates and pass back the value to the ViewModel.
Now, what I did was:
1. Removing all code-behind from the View
2. Define a new DelegateCommand as follows:
public ICommand CalendarSelectedCommand { get; private set; }
3. Instantiate the DelegateCommand as follows:
this.CalendarSelectedCommand = new DelegateCommand<IList>(OnCalendarSelectionChanged);
private void OnCalendarSelectionChanged(IList args)
{
this.CalendarSelectedDates = args;
}
4. Implemented a new RadCalendarCommandBehavior class. As you know in Prism the CommandBevaior class does many things among which are:
a. Adds Commanding behavior into a Control
b. Defines the Command, CommandParameter and CommandBehavior attached properties that can be hooked to a Control.
c. Plays the role of proxy between Command definition and Control that the command is defined on where it attaches to a specific event of a Control and defines the event handler for that event, so that when the event is fired, the command is being called and executed.
Now, firing the event of a Control causes the attached event handler defined inside the CommandBehavior to fire. Usually this event handler calls the Execute method of the CommandBehavior that internally delegates the call to the Execute method on the Command it defines as a Dependency property.
Thus you can see how important the CommandBehavior class in attaching a Command behavior into a Control.
The Prism ships with the ClickCommandBehavior class only. When I saw the code written inside PeriodSelectorView.xaml.cs I realized that all what I need is create a RadCalendarCommandBehavior.cs class that attaches a new Command into the RadCalendar class by hooking into the RadCalendar.SelectionChanged event.
The purpose is to fire a command on the RadCalendar that can be handled inside the PeriodSelectorViewModel.cs class where I can easily retrieve the selected dates and hence no need for the mediator SelectedDates dependency property inside the View and no need for accessing the RadCalendar.SelectionChanged event. The goal is the same however, the “how” is the different and I believe using commands is more elegant!
I will not go into the details of creating the RadCalendarCommandBehavior class, the code is straight forward based on Prism knowledge
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Practices.Composite.Presentation.Commands;
using Telerik.Windows.Input;
using Telerik.Windows.Controls;
using System.Linq;
using System.Collections;
namespace Telerik.SalesDashboard.PeriodSelector
{
public class RadCalendarCommandBehavior : CommandBehaviorBase<RadCalendar>
{
public RadCalendarCommandBehavior(RadCalendar source)
: base(source)
{
source.SelectionChanged += new Telerik.Windows.Controls.SelectionChangedEventHandler(source_SelectionChanged);
}
void source_SelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
{
var calendar = sender as RadCalendar;
if (calendar != null)
{
this.Command.Execute(calendar.SelectedDates.ToList());
}
}
}
public static class SelectionChanged
{
private static readonly DependencyProperty SelectionChangedCommandBehaviorProperty = DependencyProperty.RegisterAttached(
"SelectionChangedCommandBehavior",
typeof(RadCalendarCommandBehavior),
typeof(SelectionChanged),
null);
public static readonly DependencyProperty CommandProperty = DependencyProperty.RegisterAttached(
"Command",
typeof(ICommand),
typeof(SelectionChanged),
new PropertyMetadata(OnSetCommandCallback));
public static readonly DependencyProperty CommandParameterProperty = DependencyProperty.RegisterAttached(
"CommandParameter",
typeof(object),
typeof(SelectionChanged),
new PropertyMetadata(OnSetCommandParameterCallback));
public static void SetCommand(RadCalendar calendar, ICommand command)
{
calendar.SetValue(CommandProperty, command);
}
public static ICommand GetCommand(RadCalendar calendar)
{
return calendar.GetValue(CommandProperty) as ICommand;
}
public static void SetCommandParameter(RadCalendar calendar, object parameter)
{
calendar.SetValue(CommandParameterProperty, parameter);
}
public static object GetCommandParameter(RadCalendar calendar)
{
return calendar.GetValue(CommandParameterProperty);
}
private static void OnSetCommandCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
RadCalendar calendar = dependencyObject as RadCalendar;
if (calendar != null)
{
RadCalendarCommandBehavior behavior = GetOrCreateBehavior(calendar);
behavior.Command = e.NewValue as ICommand;
}
}
private static void OnSetCommandParameterCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
RadCalendar calendar = dependencyObject as RadCalendar;
if (calendar != null)
{
RadCalendarCommandBehavior behavior = GetOrCreateBehavior(calendar);
behavior.CommandParameter = e.NewValue;
}
}
private static RadCalendarCommandBehavior GetOrCreateBehavior(RadCalendar calendar)
{
RadCalendarCommandBehavior behavior = calendar.GetValue(SelectionChangedCommandBehaviorProperty) as RadCalendarCommandBehavior;
if (behavior == null)
{
behavior = new RadCalendarCommandBehavior(calendar);
calendar.SetValue(SelectionChangedCommandBehaviorProperty, behavior);
}
return behavior;
}
}
}
5. What is left is to add the following into the PeriodSelectorView.xaml:
a. Add a new XML namespace reference into the header of the UserControl:
xmlns:MyCommands="clr-namespace:Telerik.SalesDashboard.PeriodSelector"
<telerikInput:RadCalendar … MyCommands:SelectionChanged.Command="{Binding CalendarSelectedCommand}" … />
That’s all what you need to do to remove the code-behind from the PeriodSelectorView into the PeriodSelectorViewModel !
If you find that the above can be improved, or anything you find you couldn’t understand, or you think is not suitable, etc … Please don’t hesitate to contact me at: bhaidar @ gmail.com
Regards
Tags: Prism 2.0, silverlight 2.0, Telerik Controls