Working with Multiple Click (ClickCount) in Silverlight 5 Beta

Some time you need to know whether your user clicked a control once or double clicked it. Sometime you need to know how many click a user did in the UI control. In this post, you will learn about it.

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 click happened by the user.

Read the complete post to know about the implementation and the issues. Don't forget to provide our feedbacks at the end.

Prerequisite

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 in 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 2nd 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 no. of click. Using this you can decide how many simultaneous click 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 a single click and then listened 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 in a new post. Till then enjoy working with Double Click, Triple Click with the help of ClickCount property.