在 Silverlight 5 Beta 中使用多次点击 (ClickCount)

引言

有时，你需要知道用户是单击控件一次还是双击了它。有时，你需要了解用户在 UI 控件上点击了多少次。在本文中，你将学到相关知识。

Silverlight 5 Beta 已发布，并新增了一个名为 ClickCount 的功能。它是 MouseButtonEventArgs 的一个属性。通过它，你可以了解用户进行了多少次连续点击。

阅读完整文章，了解实现方法和遇到的问题。别忘了在文末提供你的反馈。您的投票总是受欢迎的。

快速说明：本文基于 Silverlight 5 (5.0.60401.0) 的 Beta 版本。它可能与最终发布版本的工作方式相同，也可能不同。

必备组件

要开始学习，您需要先设置好开发环境。这是先决条件。请按照这些步骤准备您的开发环境并创建一个示例项目。

1. 首先，您需要安装 Silverlight 5 Beta。请遵循该帖子中提到的步骤。
2. 通过遵循该帖子中提到的步骤 创建 Silverlight 项目。如果您是 Silverlight 新手，这篇文章将帮助您创建一个空白的 Silverlight 项目。

一旦您的开发机器准备就绪，我们就可以开始描述这个新功能了。

设置 XAML

让我们设计一下 UI。为此，我们将打开 MainPage.xaml 文件，在进行任何操作之前，我们将 LayoutRoot Grid 分割成两个不同的列，如下所示：

现在，我们需要为我们的 ClickCount 演示添加一个 Border 控件。我们将为它添加 MouseLeftButtonDown 事件，并在那里检查点击次数。我们还将在第二列中添加一个 ListBox 。ListBox 将显示我们演示的点击次数结果。

附上截图供参考

这是我们的完整 XAML 代码

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

XAML 就绪后，跳转到代码隐藏文件，编写代码将点击次数插入到 ListBox 中。

玩转代码

现在跳转到代码隐藏文件，找到我们在 XAML 中注册的 MouseLeftButtonDown 事件。现在我们将添加实现。在事件实现中，将 MouseButtonEventArgs 中的点击次数作为项添加到名为 "clickReport" 的 ListBox 中。

请参阅下图

在 Silverlight 5 中，我们有一个名为 "ClickCount" 的新属性，它返回点击次数。使用此属性，您可以确定用户在特定控件上同时点击了多少次，并根据单击、双击或三击次数采取相应操作。这在游戏开发中非常有用，但在普通的 Web 应用程序场景中则不那么常用。

此处附上完整的 C# 代码供参考

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);
        }
    }
}

完成后，是时候构建项目了。如果遇到任何编译错误，请先解决它们。

实际运行演示

让我们看看它在我们的示例应用程序中是如何工作的。运行您的项目，XAP 将在浏览器窗口中加载，并在屏幕上显示以下 UI：左侧有一个 Border 控件（一个小的橙色矩形），右侧有一个 Listbox 。

左侧的矩形将监听点击事件，并将点击次数作为我们代码中实现的项插入到 ListBox 中。

只需在矩形区域单击一次，您就会看到计数已添加到 ListBox 中，如上面的 UI 截图所示。

现在双击矩形区域会在那里添加计数二。看看它是如何添加到屏幕上的。首先，它监听了一次单击，然后监听了双击事件。因此，1 和 2 被插入到那里。

对于三次单击事件，您也会注意到同样的情况。这次，它将在 ListBox 中添加 1、2 和 3。

多次单击将具有相同的行为。我想您现在已经熟悉了这一点，并可以轻松地在您的应用程序中使用它。但是，其中存在一些问题。我们现在将讨论它们。

问题讨论

在处理此功能时，我注意到了一些我想与您分享的问题。有两个问题。第一个是事件的多次触发，第二个是调试事件实现。让我们逐一讨论。

问题 #1

如果您运行我们创建的现有示例应用程序，在讨论该功能时，您会注意到，对于每次单击，它实际上都会以不同的计数（递增 1）触发事件。如果您单击一次，它将在列表中添加一个条目“1”；这意味着它触发了一次单击事件。

如果您单击两次（即双击），您会注意到它首先添加“1”，然后添加“2”；这意味着它触发了两次事件。从而使计数从一变为二。

同样，对于三次单击，它会通过递增 ClickCount 值三次触发相同的事件，并在列表中添加 3 个项目。下面的截图将让您更清楚地看到这个问题。

同样，如果有人单击的次数更多；例如，如果用户非常快速地单击 8 次，它将在 ListBox 中添加 8 个项目。因为，它将调用事件 8 次，并且每次它都会递增 ClickCount 的值。如果您稍作停顿，然后再单击一次，您会注意到计数器会重置并从 1 开始。看看。

那么，问题出在哪里呢？如果您设想整个编码结构，您将更好地可视化它。例如，假设您的游戏应用程序中有一个 UIElement 。那里将有一个单击事件和一个双击事件。现在假设，对于单击事件，您想显示一个 MessageBox ，消息为“您单击了一次”，对于双击事件，您想显示另一个消息框，消息为“您双击了它”。您使用正确的 if{} else{} 条件正确实现了它。代码中的一切都正常，if 块也正确。但是当您运行时，您会看到一些不同的情况。

在第一种情况下，您将获得单击事件的正确消息。在第二种情况下，您会认为您的代码会起作用，并显示双击事件的消息。但是当您运行时，您会注意到略有不同。对于双击，它会触发两次事件。首先，它会进入单击块并显示消息。之后，它会进入双击块并显示第二条消息。因此，在这种情况下，它将显示 2 个不同的消息框，从而破坏您的逻辑。 

问题 #2

这对开发人员来说是另一个问题。开发人员需要调试他们的代码。他们可能在同一个事件实现中为单击和双击功能添加了两种不同的逻辑。到目前为止一切都很好。假设第一个问题在这里不是问题。在每个 if{} 块中设置一个断点，然后在调试模式下运行您的应用程序。

一旦您在 UI 中单击一次，它就会进入事件并执行单击事件的适当 if 块。这非常酷。现在来到双击事件。尝试进行双击。您会注意到，第一次单击时，它已经触发了断点并停止在该位置。因此，它不支持您进行第二次 UI 单击。

在这种情况下，调试双击事件非常困难。同样适用于多次单击（超过两次）。

摘要

是的，这确实是开发人员的一大难题。这两个问题都会让开发人员在处理此事件时生活变得糟糕。希望 MSFT 在发布 Silverlight 5 的最终产品之前会解决这些问题。在此之前，让我们看看是否有任何重大问题和/或任何解决方法。

历史

• 2011 年 4 月 20 日：初始帖子