How to Handle Double-Click in Silverlight 5

In this article we will discuss how to handle a double-click in Silverlight 5. Handling double-click is a new feature in Silverlight 5.

Prologue:

In this article we will discuss how to handle a double-click in Silverlight 5. Handling double-click is a new feature in Silverlight 5.

Silverlight 5 has introduced the concept of a click count. Rather than create dedicated double, triple, or multiple click events, you can simply count the number of clicks using the ClickCount property of the MouseButtonEventArgs class. This works for both the left and right mouse buttons.

Setup the Solution:

Create a Silverlight Application project with the name "HandlingDoubleClickInSL" as shown below.


As we are going to demonstrate in Silverlight 5 just ensure that we have selected Silverlight 5 in the project's options when creating the project.


Setting up the XAML:

Open the MainPage.xaml to design our screen. Here are the steps to create our UI.

1. Divide the LayoutRoot grid into two columns as in the following figure.
   
   
    
2. Add two StackPanels to the Grid; one for Grid column 0 and another one for Grid column 1.
3. In the first StackPanel Add 5 Borders with Height as 100.
4. In the second StackPanel add a TextBlock with the following properties.
   
   
   

Adding Mouse Click Event to Border:

Now just add the "MouseLeftButtonDown" in the Border's property with Event name like as shown in the figure.



Complete Xaml:

The given howfollowing figure shows the complete code for our UI.



ClickCount Event:

We have defined the Event as in the figure shown.



Here the bdr.Tag.ToString () is used to get the border that we clicked. The e.ClickCount is the Property of MouseButtonEventArgs class which is of type integer.

The e.ClickCount == 2 handles the double click condition.

The ClickCount Property maintains the Clicks count for us.

How ClickCount Calculated:

The count is calculated based on the time between first click and the second click.

Consider if you are trying to click 5 times. After 3rd click, if you give 200 milliseconds gab between the 3rd and 4th click then the 4th click will be treated as the 1st click. It will reset the ClickCount property if the time between the first click and second click is greater the 200 milliseconds.

Application in Action:

The logic in this demo is when you are clicking on various colour boxes with various clicks it will display the colour box name with the clicks you have clicked.

Let see the Demo.



In this figure above the single click is captured.



The above figure shows the double-click on the Red color box.

You can see the Multiple clicks displayed in the following figure.



Issues faced with Click Event:

As Kunal has said we have 2 issues in MouseLeftButtonDown Event.

1. Debugging the Event.
2. Handling more clicks in an event.

As I have faced the issues mentioned here, I am sharing here. For more details on this issue, visit Kunal's article.

Summary:

In this article, we have seen how to handle single, double and multiple clicks in Silverlight 5.

We can handle multiple clicks but not multiple times.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which enables me to give a better article the next time.

Please rate this Article.

Thanks.