Click here to Skip to main content
Click here to Skip to main content
Go to top

Working with Multiple Click (ClickCount) in Silverlight 5 Beta

, 20 Apr 2011
Rate this:
Please Sign up or sign in to vote.
Silverlight 5 Beta has been announced with 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.

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:

image

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 2nd column. ListBox will display the result of click count for our demo.

Find herewith the screenshot for the reference:

image

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:

image

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.

image

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

image

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

image

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.

image

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:

image[28]

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:

image[31]

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 2nd 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

  • 20th April, 2011: Initial post

License

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

Share

About the Author

_ Kunal Chowdhury _
Technical Lead
India India
Kunal Chowdhury is a Microsoft "Client Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer 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 8 (WinRT). He posts his findings, articles in his technical blog and CodeProject.
 
Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionGridView and leftbuttonmousedown PinmemberMycroft Holmes2-Feb-12 1:29 
GeneralMy Vote of 5 PinmemberSwaminathan Lakshmanan2-May-11 3:47 
GeneralRe: My Vote of 5 PinmvpKunal_Chowdhury2-May-11 6:08 
GeneralMy vote of 5 PinmemberSwaminathan Lakshmanan2-May-11 3:47 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury2-May-11 6:06 
GeneralMy vote of 5 PinmemberVuyiswa Maseko25-Apr-11 18:59 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury29-Apr-11 7:13 
GeneralRe: My vote of 5 PinmemberVuyiswa Maseko29-Apr-11 7:18 
GeneralMy Vote of 5 PinmemberRaviRanjankr23-Apr-11 5:58 
GeneralRe: My Vote of 5 PinmvpKunal_Chowdhury23-Apr-11 7:43 
GeneralMy vote of 5 PinmemberJF201521-Apr-11 1:33 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury21-Apr-11 2:34 
GeneralMy vote of 5 PinmvpBrij20-Apr-11 20:04 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury20-Apr-11 21:25 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 21 Apr 2011
Article Copyright 2011 by _ Kunal Chowdhury _
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid