Working with Multiple Click (ClickCount) in Silverlight 5 Beta

Introduction

Sometimes, you need to know whether your user clicked a control once or double clicked it. Sometimes, you need to know how many clicks a user did in the UI control. In this article, you will learn about it.

Silverlight 5 Beta has been announced with a newly added feature called ClickCount. It's a property added to the MouseButtonEventArgs. Using this, you will be able to find out how many multiple clicks happened by the user.

Read the complete article to know about the implementation and the issues. Don't forget to provide our feedback at the end. Votes are always welcome.

Quick Note: This post is based on the beta version of Silverlight 5 (5.0.60401.0). It might or might not work with the final release in the same way demonstrated here.

Prerequisites

To start with this, you need to set up your development environments first. Here is the prerequisite. Follow them to prepare your development environment and create a sample project:

1. First, you need to install the Silverlight 5 Beta. Follow the steps mentioned in the post.
2. Create a Silverlight Project by following the steps mentioned in the post. If you are new to Silverlight, this post will help you to create a blank Silverlight project.

Once your development machine is ready, we can start describing the new feature.

Setting up the XAML

Let us design our UI. To do this, we will open the MainPage.xaml file and before doing anything, we will split the LayoutRoot Grid to two different Columns as shown below:

Now, we need to add a Border control for our ClickCount demo. We will add MouseLeftButtonDown event to it and will check the click count there. We will also add a ListBox in the 2^nd column. ListBox will display the result of click count for our demo.

Find herewith the screenshot for the reference:

Here is our complete XAML code:

<UserControl x:Class="ClickCountDemo.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
 
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
 
        <Border Width="200" Height="200"
                Grid.Column="0" Margin="10"
                BorderThickness="1" BorderBrush="Red"
                Background="Orange"
                MouseLeftButtonDown="Border_MouseLeftButtonDown"/>
        
        <ListBox x:Name="clickReport"
                 Grid.Column="1" Margin="10"
                 Width="300" Height="200"/>
    </Grid>
</UserControl>

Once your XAML is ready, jump to the code behind to write the code to insert the click count to the ListBox.

Playing with the Code

Jump to the code behind now and find the MouseLeftButtonDown event that we registered in the XAML. We will add the implementation now. In the event implementation, add the click count from the MouseButtonEventArgs as the item to the ListBox named "clickReport".

See the screenshot below:

In Silverlight 5, we have the new property named "ClickCount" which returns the number of clicka. Using this, you can decide how many simultaneous clicks a user did on a specific control and based on the single, double or triple click, you can take action. This is very helpful in game development, but not in normal web application scenario.

Find the complete C# code here for reference:

using System.Windows.Controls;
using System.Windows.Input;
 
namespace ClickCountDemo
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void Border_MouseLeftButtonDown
		(object sender, MouseButtonEventArgs e)
        {
            clickReport.Items.Insert(0, e.ClickCount);
        }
    }
}

Once done, it's time to build the project. If you find any build error, resolve those first.

Seeing it in Action

Let's see how it works in our sample application. Run your project and the XAP will load in the browser window with the following UI on the screen, where it will have a Border control (a small orange color rectangle) at the left part and one Listbox at the right side.

Left side rectangle will listen to the click event and insert the click count to the ListBox as we implemented in our code.

Just click once in the rectangle area and you will see the count added to the ListBox as demonstrated in the above UI screenshot.

Now double clicking on the rectangle area will add count two there. See how it was added to the screen. First, it listened for a single click and then listened for the double click event. Hence 1 and 2 were inserted there.

Same thing you will notice for the triple click event too. This time, it will add 1, 2 and 3 in the ListBox.

Clicking more times will have the same behaviour. I guess you are now familiar with this and you can easily use it in your application. But there are some issues with this. We will discuss them now.

Discussion on the Issues

While working with the feature, I noticed some issues which I wanted to share with you. There are two issues. The first one is the raising the event for multiple times and the second one is debugging the event implementation. Let's discuss them one by one.

Issue #1

If you run our existing sample application that we created while discussing the feature, you will notice that, for each click, it is actually raising the event with a different count (incremented by 1). If you click once, it will add a single entry "1" in the list; means, it raised the click event once.

If you click twice (i.e. double click), you will notice that it first adds "1" and then adds "2"; means, it raises the event two times. Thus making the count changed from one to two.

Similarly, for triple click, it raises the same event thrice by incrementing the ClickCount value and adds 3 items in the list. The below screenshot will give you better visibility of the issue:

Likewise, if one clicks more than that; for example if a user clicks very fast for 8 times, it will add 8 items in the ListBox. Because, it will call the event 8 times and each time it will increment the value of the ClickCount. If you stop clicking multiple times for a moment and click once again, you will notice that it resets the counter again and starts from 1. Have a look:

So, what is the problem here? If you imagine the whole coding structure, you will better visualize it. For example, imagine that you have a UIElement in one of your game applications. There you will have a single click event as well as double click event. Now suppose, for a Single click event, you want to show a MessageBox with a message "You clicked once" and for a Double click event, you want to show a MessageBox with another message, "You double clicked it". You implemented it properly with a proper if{} else{} condition. Everything is fine in code with proper if block. But you will see something different when you run.

For the first case, you will get a proper message for the Single click event. For the second case, you will assume that your code will work and will show a message for double click event. But once you run, you will notice it slightly different. For a double click, it will raise the event two times. First, it will go to the single click block and show the message. After that, it will go to the double click block and show the 2^nd message. So, in that case, it will show 2 different message boxes and thus break your logic. 

Issue #2

This is another problem for the developer. A developer needs to debug his code. He might add two different logic for single click and double click functionality in the same event implementation. Everything is fine up to this. Assume that the first issue is not a problem here. Put a break point in each if{} block and run your application debug mode.

Once you single click in your UI, it will come to the event and execute the proper if block for the single click event. That's really cool. Now come to the double click event. Try to do a double click. You will notice that, on first click, it already got hit to the breakpoint and stopped at that location. Thus gives you no support to click the UI for the second time.

In that case, it is very difficult to debug a double click event. The same is applicable for multiple clicks (more than two).

Summary

Yes, that's really a big headache for a developer. Both the two issues will make a developer's life horrible while working with this event. Hope MSFT will work on these issues before releasing the final product of Silverlight 5. Till then, let's see if there are any major issues and/or any workaround.

History

• 20^th April, 2011: Initial post