Silverlight double click event

We had to perform some business logic when a user double click’s on a Image, unfortunately till the current version of silverilght( version 4.x) there is no double click event. In future versions of silverlight we might get the double click functionality but for right now we will have to get this done by our self. So how do we implement double click event? The trick is to start a timer and check if the MouseLeftButtonDown event is fired again in certain duration(milliseconds).

Code is very simple and short, In the xaml we have a Image with a MouseLeftButtonDown event in the code behind we add a dispatch timer which is a part of  System.Windows.Threading. On the first click start the timer, when next click event is fired check if the timer is active, if the timer is active then it is a double click so go ahead and perform the intended action.

1.    private DispatcherTimer timer;
2.    public MainPage()
3.    {
4.        InitializeComponent();
5.        timer = new DispatcherTimer();
6.        timer.Interval = new TimeSpan(0, 0, 0, 200);
7.        timer.Tick += new EventHandler(( sender,  e) => { timer.Stop(); });
8.    }
9.  
10.    private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
11.    {
12.        if (!timer.IsEnabled)
13.        {
14.            timer.Start();return;
15.        }
16.        timer.Stop();
17.        HandleDoubleClick();
18.    }

 

DoubleClick Class
The above functionality can be encapsulated in a class for a cleaner looking code. The class ‘DoubleClick’ has a dispatch timer and a public event. In the constructor you pass the UIElement as parameter and hook the MouseLeftButtonDown event. The timer tick event has an inline event handler defined that will stop the timer on the first tick.

1. namespace DoubleClickInSL4
2. {
3.     using System.Windows.Threading;
4.     public class DoubleClick
5.     {
6.         private const int dblclickDelay = 200;
7.         private DispatcherTimer timer;
8.         public event MouseButtonEventHandler MouseDoubleClick;
9.  
10.         public DoubleClick(UIElement uiElement)
11.         {
12.             timer = new DispatcherTimer();
13.             timer.Interval = new TimeSpan(0, 0, 0, dblclickDelay);
14.             timer.Tick += new EventHandler((sender, e) => { timer.Stop(); });
15.  
16.             uiElement.MouseLeftButtonDown += new MouseButtonEventHandler(UIElement_MouseLeftButtonDown);
17.         }
18.  
19.         private void UIElement_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
20.         {
21.             if (!timer.IsEnabled)
22.             {
23.                 timer.Start();
24.                 return;
25.             }
26.             timer.Stop();
27.  
28.             //HandleDoubleClick();
29.             if (MouseDoubleClick != null)
30.             {
31.                 MouseDoubleClick(sender, e);
32.             }
33.         }
34.     }
35. }

 

Rx Framework
A very interesting use of the Rx framework can simplify the above code to just couple of lines. In the MouseLeftButtonDown event we add a Observable.FromEvent  and set TimeInterval, so when the event is fired for the first time the timer starts. On the second event the code in the body of lambda will be executed which checks if  duration is greater then 300.

1. private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
2. {           
3.    Observable.FromEvent<MouseButtonEventArgs>(this.LayoutRoot, "MouseLeftButtonDown").TimeInterval().Subscribe(evt =>
4.     {
5.         if (evt.Interval.Milliseconds >= 300)
6.         {
7.             // Do something on double click
8.         }
9.     });
10. }

 

Doubleclick Behaviour
The above code is helpful for application that handles the logic directly in the codebehind, so how about MVVM application where the application logic is handled in the model view. A decent solution for such a scenario would be to write a behavior that implements the double click functionality. There are many posts which explain how to create a behaviors so I will not go in details, basically this double click behavior have a dependency property named as DoubleClickCommand that will bind to a property in the view model of type ICommand. I created a class called as DelegateCommand which implements the interface ICommand, this class will be instantiated in the view model and assigned to view models property. 

1. namespace DoubleClickInSL4
2. {
3.     using System.Windows.Threading;
4.     public class DoubleClickBehavior : Behavior<UIElement>
5.     {
6.         private const int dblclickDelay = 200;
7.         private DispatcherTimer timer;
8.  
9.         public object CommandParameter
10.         {
11.             get { return (object)GetValue(CommandParameterProperty); }
12.             set { SetValue(CommandParameterProperty, value); }
13.         }
14.         public ICommand DoubleClickCommand
15.         {
16.             get { return (ICommand)GetValue(DoubleClickCommandProperty); }
17.             set { SetValue(DoubleClickCommandProperty, value); }
18.         }
19.  
20.         public static readonly DependencyProperty CommandParameterProperty = DependencyProperty.Register
21.             ("CommandParameter", typeof(object), typeof(DoubleClickBehavior), new PropertyMetadata(CommandParameterChanged));
22.         private static void CommandParameterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { }
23.  
24.         public static readonly DependencyProperty DoubleClickCommandProperty = DependencyProperty.Register
25.             ("DoubleClickCommand", typeof(ICommand), typeof(DoubleClickBehavior), new PropertyMetadata(DoubleClickCommandChanged));
26.         private static void DoubleClickCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { }
27.  
28.         public DoubleClickBehavior()
29.         {
30.             timer = new DispatcherTimer();
31.             timer.Interval = new TimeSpan(0,0, 0, 0, dblclickDelay);
32.             timer.Tick += new EventHandler((sender, e) =>
33.             { timer.Stop(); });
34.         }
35.         protected override void OnAttached()
36.         {
37.             base.OnAttached();
38.             AssociatedObject.MouseLeftButtonDown += UIElement_MouseLeftButtonDown;
39.         }
40.         protected override void OnDetaching()
41.         {
42.             base.OnDetaching();
43.             AssociatedObject.MouseLeftButtonDown -= UIElement_MouseLeftButtonDown;
44.         }
45.  
46.         private void UIElement_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
47.         {
48.             if (!timer.IsEnabled)
49.             {
50.                 timer.Start();
51.                 return;
52.             }
53.             timer.Stop();
54.  
55.             //HandleDoubleClick();
56.             if (CommandParameter != null)
57.                 DoubleClickCommand.Execute(CommandParameter);
58.         }
59.     }
60. }
61.  
62. namespace DoubleClickInSL4
63. {
64.      public class DelegateCommand : ICommand   
65.      {   
66.          Func<object, bool> canExecute;   
67.          Action<object> executeAction;   
68.          bool canExecuteCache;   
69.          public DelegateCommand(Action<object> executeAction, Func<object, bool> canExecute)  
70.          {  
71.              this.executeAction = executeAction;
72.              this.canExecute = canExecute;
73.          }  
74.          #region ICommand Members  
75.          public bool CanExecute(object parameter)  
76.          {  
77.              bool temp = canExecute(parameter);
78.              if (canExecuteCache != temp)
79.              {  
80.                  canExecuteCache = temp;
81.                  if (CanExecuteChanged != null)
82.                  {  
83.                      CanExecuteChanged(this, new EventArgs());
84.                  }  
85.              }  
86.              return canExecuteCache;
87.          }  
88.          public event EventHandler CanExecuteChanged;  
89.          public void Execute(object parameter)  
90.          {  
91.              executeAction(parameter);
92.          }  
93.            #endregion
94.      }
95. }

Here is the code for the MainPage.xaml.cs

1. using System;
2. using System.Collections.Generic;
3. using System.Windows;
4. using System.Windows.Controls;
5. using System.Windows.Documents;
6. using System.Windows.Input;
7. using System.Windows.Threading;
8. using System.Windows.Interactivity;
9.  
10. namespace DoubleClickInSL4
11. {    
12.     public class myViewModel
13.     {
14.         public ICommand DoubleCommand { get; set; }
15.         public myViewModel()
16.         {
17.             DoubleCommand = new DelegateCommand(myAction, canExe);
18.         }     
19.         private void myAction(object param)
20.         { //Write your action here }
21.         private bool canExe(object param)
22.         { return true; }
23.     }
24.  
25.     public partial class MainPage : UserControl
26.     {      
27.         public MainPage()
28.         {
29.             InitializeComponent();
30.             Image.DataContext = new myViewModel();
31.         }
32.     }
33. }

 

Here is the xaml for the MainPage.xaml.

1. <UserControl x:Class="DoubleClickInSL4.MainPage"
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
7.     xmlns:Local="clr-namespace:DoubleClickInSL4"
8.     mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">
9.     <UserControl.Resources>
10.         <Local:myViewModel x:Name="vm"/>
11.     </UserControl.Resources>
12.     <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="400">
13.         <Image x:Name="Image" Source="Images/80_20.jpg" >
14.             <i:Interaction.Behaviors>
15.                                 <Local:DoubleClickBehavior DoubleClickCommand="{Binding DoubleCommand}" CommandParameter="{Binding ElementName=Image,Path=Source}"/>
16.             </i:Interaction.Behaviors>
17.                                </Image>
18.     </Grid>
19. </UserControl>

Extending Silverlight mouse events

SharpGIS has a very interesting blog post about extending the silverlight mouse events. Including double-clicks they have provided many more extensions with source code and a online demo.
http://www.sharpgis.net/post/2009/05/02/Extending-Silverlighte28099s-mouse-events.aspx