悬浮按钮 （Hover Button）

悬浮按钮通过将鼠标点击换成悬浮然后等待(hover-and-wait)动作，解决了不小心点击的问题。当光标位于按钮之上时，意味着用户通过将光标悬浮在按钮上一段时间来表示想选中按钮。另一个重要特点是悬浮按钮在用户悬浮并等待时，多少提供了视觉反馈。

必须使用一个计时器来记录当前用户光标停留在按钮上的时间。一旦用户的手的光标和按钮的边界交叉就开始计时。如果某一个时间阈值内用户光标还没有移除，那么就触发点击事件。

创建一个名为HoverButton的类，他继承自之前创建的KinectButton类，在类中添加一个名为hoverTimer的DispatcherTime实例，代码如下。另外创建一个布尔型的timerEnable字段，将其设置为true。虽然目前不会用到这个字段，但是在后面部分将会用到，当我们想使用HoverButton的某些功能，但是不需要DispatcherTimer时就会非常有用。最后创建一个HoverInterval的依赖属性，使得运行我们将悬浮时间用代码或者xaml进行定义。默认设置为2秒，这是在大多是Xbox游戏中的时间。

public class HoverButton:KinectButton {     readonlyDispatcherTimerhoverTimer = newDispatcherTimer();     protected booltimerEnabled = true;     public doubleHoverInterval     {         get{ return(double)GetValue(HoverIntervalProperty); }         set        {             SetValue(HoverIntervalProperty, value);         }     }     public static readonlyDependencyPropertyHoverIntervalProperty =         DependencyProperty.Register("HoverInterval", typeof(double), typeof(HoverButton), newUIPropertyMetadata(2000d)); ……}

 

要实现悬浮按钮的核心功能，我们必须覆写基类中的OnKinectCursorLeave和OnKinectCursorEnter方法，所有和KinectCursorManger进行交互的部分在KinectButton中已经实现了，因此我们在这里不用操心。在类的构造方法中，只需要实例化DispathcerTimer对象，HoverInterval依赖属性和注册hoverTimer_Tick方法到计时器的Tick事件上即可。计时器在一定的间隔时间会触发Tick事件，该事件简单的处理一个Click事件，在OnKinectCursorEnter方法中启动计数器，在OnKinectCursorLeave事件中停止计数器。另外，重要的是，在enter和leave方法中启动和停止鼠标光标动画效果。

public HoverButton() {     hoverTimer.Interval = TimeSpan.FromMilliseconds(HoverInterval);     hoverTimer.Tick += newEventHandler(hoverTimer_Tick);     hoverTimer.Stop(); } voidhoverTimer_Tick(objectsender, EventArgse) {     hoverTimer.Stop();     RaiseEvent(newRoutedEventArgs(ClickEvent)); } protected override voidOnKinectCursorLeave(objectsender, KinectCursorEventArgse) {     if(timerEnabled)     {         e.Cursor.StopCursorAnimation();         hoverTimer.Stop();     } } protected override voidOnKinectCursorEnter(objectsender, KinectCursorEventArgse) {     if(timerEnabled)     {         hoverTimer.Interval = TimeSpan.FromMilliseconds(HoverInterval);         e.Cursor.AnimateCursor(HoverInterval);         hoverTimer.Start();     } }

 

悬浮按钮唯一存在的问题是，光标手势悬停在按钮上时会抖动，这可能是Kinect中骨骼识别本身的问题。当在运动状态时，Kinect能够很好的对这些抖动进行平滑，因为即使在快速移动状态下，Kinect中的软件使用了一系列预测和平滑技术来对抖动进行处理。姿势，和上面的悬停一样，因为是静止的，所以可能存在抖动的问题。另外，用户一般不会保持手势静止，即使他们想哪样做。Kinect将这些小的运动返回给用户。当用户什么都没做时，抖动的手可能会破坏手势的动画效果。对悬浮按钮的一个改进就是磁性按钮(Magnet Button)，随着体感游戏的升级，这种按钮逐渐取代了之前的悬浮按钮,后面我们将看到如何实现磁性按钮。

下压按钮

就像悬浮按钮在Xbox中那样普遍一样，一些Kinect开发者也想创建一些类似PC上的那种交互方式的按钮，这种按钮称之为下压按钮(push button)。下压按钮试图将传统的GUI界面上的按钮移植到Kinect上去。为了代替鼠标点击，下压按钮使用一种将手向前推的手势来表示按下这一动作。

    这种手势，手掌张开向前，在形式上有点像动态鼠标。下压按钮的核心算法就是探测手势在Z轴上有一个向负方向的运动。另外，相符方向必须有一个距离阈值，使得超过这一阈值就认为用户想要执行下压指令。代码如下所示：下压按钮有一个称之为Threshold的依赖属性，单位为毫米，这个值可以由开发者来根据动作的灵敏度来进行设置。当用户的手移动到下压按钮的上方时，我们记录一下当前位置手的Z值，以此为基准，然后比较手的深度值和阈值，如果超过阈值，就触发点击事件。

public class PushButton:KinectButton{    protected double handDepth;    public double PushThreshold    {        get { return (double)GetValue(PushThresholdProperty); }        set { SetValue(PushThresholdProperty, value); }    }    public static readonly DependencyProperty PushThresholdProperty =        DependencyProperty.Register("PushThreshold", typeof(double), typeof(PushButton), new UIPropertyMetadata(100d));    protected override void OnKinectCursorMove(object sender, KinectCursorEventArgs e)    {        if (e.Z < handDepth – PushThreshold)        {            RaiseEvent(new RoutedEventArgs(ClickEvent));        }    }    protected override void OnKinectCursorEnter(object sender, KinectCursorEventArgs e)    {        handDepth = e.Z;    }}

磁性按钮 （Magnet Button）

磁性按钮是对悬浮按钮的一种改进。他对用户悬浮在按钮上的这一体验进行了一些改进。他试图追踪用户手的位置，然后自动将光标对齐到磁性按钮的中间。当用户的手离开磁性按钮的区域是，手势追踪又恢复正常。在其他方面磁性按钮和悬浮按钮的行为一样。考虑到磁性按钮和悬浮按钮在功能方面差异很小，而我们将他单独作为一个完全不同的控件来对待可能有点奇怪。但是，在用户体验设计领域(UX)，这一点差异就是一个完全不同的概念。从编码角度看，这一点功能性的差异也使得代码更加复杂。

首先，创建一个继承自HoverButton的名为MagnetButton的类。磁性按钮需要一些额外的事件和属性来管理手进入到磁性按钮区域和手自动对齐到磁性按钮中间区域的时间。我们需要在KinectInput类中添加新的lock和unlock事件

public static readonly RoutedEvent KinectCursorLockEvent = EventManager.RegisterRoutedEvent("KinectCursorLock", RoutingStrategy.Bubble,typeof(KinectCursorEventHandler), typeof(KinectInput));public static void AddKinectCursorLockHandler(DependencyObject o, KinectCursorEventHandler handler){    ((UIElement)o).AddHandler(KinectCursorLockEvent, handler);}public static readonly RoutedEvent KinectCursorUnlockEvent = EventManager.RegisterRoutedEvent("KinectCursorUnlock", RoutingStrategy.Bubble,typeof(KinectCursorEventHandler), typeof(KinectInput));public static void RemoveKinectCursorUnlockHandler(DependencyObject o, KinectCursorEventHandler handler){    ((UIElement)o).RemoveHandler(KinectCursorUnlockEvent, handler);}public class MagnetButton : HoverButton{    protected bool isLockOn = true;    public static readonly RoutedEvent KinectCursorLockEvent = KinectInput.KinectCursorUnlockEvent.AddOwner(typeof(MagnetButton));    public static readonly RoutedEvent KinectCursorUnlockEvent = KinectInput.KinectCursorLockEvent.AddOwner(typeof(MagnetButton));    private Storyboard move;    public event KinectCursorEventHandler KinectCursorLock    {        add { base.AddHandler(KinectCursorLockEvent, value); }        remove { base.RemoveHandler(KinectCursorLockEvent, value); }    }    public event KinectCursorEventHandler KinectCursorUnLock    {        add { base.AddHandler(KinectCursorUnlockEvent, value); }        remove { base.RemoveHandler(KinectCursorUnlockEvent, value); }    }    public double LockInterval    {        get { return (double)GetValue(LockIntervalProperty); }        set { SetValue(LockIntervalProperty, value); }    }    public static readonly DependencyProperty LockIntervalProperty =        DependencyProperty.Register("LockInterval", typeof(double), typeof(MagnetButton), new UIPropertyMetadata(200d));    public double UnlockInterval    {        get { return (double)GetValue(UnlockIntervalProperty); }        set { SetValue(UnlockIntervalProperty, value); }    }    public static readonly DependencyProperty UnlockIntervalProperty =        DependencyProperty.Register("UnlockInterval", typeof(double), typeof(MagnetButton), new UIPropertyMetadata(80d));……}

 

磁性按钮的代码中，核心地方在于光标从当前位置移动到磁性按钮的中心位置。看起来很简单，实际上实现起来有点麻烦。需要重写基类中的OnKinectCursorEnter和OnKinectCursorLeave方法。确定磁性按钮的锁定位置第一步需要找到磁性按钮本身所处的位置。代码如下，我们使用WPF中最常见名为FindAncestor帮助方法来遍历可视化对象树来进行查找，需要找到承载该磁性按钮的Windows对象，匹配磁性按钮的当前实例到Windows上，然后将其赋给名为Point的变量。但是point对象只保存了当前磁性按钮的左上角的位置。所以，我们需要给在这个点上加一个磁性按钮一半长宽的偏移值，才能获取到磁性按钮的中心位置x,y。

private T FindAncestor<T>(DependencyObjectdependencyObject) whereT:class {     DependencyObjecttarget=dependencyObject;     do    {         target=VisualTreeHelper.GetParent(target);     }     while(target!=null&&!(target isT));     returntarget asT; } protected override void OnKinectCursorEnter(objectsender, KinectCursorEventArgse) {         //获取按钮位置      varrootVisual=FindAncestor<Window>(this);         varpoint=this.TransformToAncestor(rootVisual).Transform(newPoint(0,0));         varx=point.X+this.ActualWidth/2;         vary=point.Y+this.ActualHeight/2;         varcursor=e.Cursor;         cursor.UpdateCursor(newPoint(e.X,e.Y),true);         //找到目的位置         PointlockPoint=newPoint(x-cursor.CursorVisual.ActualWidth/2,y-cursor.CursorVisual.ActualHeight/2);         //当前位置         PointcursorPoint=newPoint(e.X-cursor.CursorVisual.ActualWidth/2,e.Y-cursor.CursorVisual.ActualHeight/2);         //将光标从当前位置传送到目的位置         AnimateCursorToLockPosition(e,x,y,cursor,reflockPoint,refcursorPoint);         base.OnKinectCursorEnter(sender,e); } protected override void OnKinectCursorLeave(objectsender, KinectCursorEventArgse) {      base.OnKinectCursorLeave(sender, e);     e.Cursor.UpdateCursor(newPoint(e.X,e.Y),false);     varrootVisual=FindAncestor<Window>(this);     varpoint=this.TransformToAncestor(rootVisual).Transform(newPoint(0,0));     varx=point.X+this.ActualWidth/2;     vary=point.Y+this.ActualHeight/2;     varcursor=e.Cursor;                //找到目的位置     PointlockPoint=newPoint(x-cursor.CursorVisual.ActualWidth/2,y-cursor.CursorVisual.ActualHeight/2);     //当前位置     PointcursorPoint=newPoint(e.X-cursor.CursorVisual.ActualWidth/2,e.Y-cursor.CursorVisual.ActualHeight/2);                AnimateCursorAwayFromLockPosition(e,cursor,reflockPoint,refcursorPoint); }

 

接下来，我们用手所在的X,Y位置替换手势图标的位置。然而，我们也传入了第二个参数，告诉手势图标自动停止追踪手的位置一段时间。当用户看到光标不听手的使唤自动对齐到磁性按钮的中心，这可能有点不太友好。

    虽然我们现在有了磁性按钮的中心位置，但是我们仍不能很好的将手势光标定位到中心。我们必须额外的给手势光标本身给一个一半长宽的偏移值，以使得手在光标的中心位置而不是在左上角。在完成这些操作之后，我们将最终的值赋给lockPoint变量。我们也执行了同样的操作来查找光标目前的左上角位置以及偏移量，并将其赋值给cursorPoint变量。有了这两个值，我们就可以从当前的位置使用动画移动到目标位置了。动画方法代码如下：

private void AnimateCursorAwayFromLockPosition(KinectCursorEventArgse,CursorAdornercursor,refPointlockPoint,refPointcursorPoint) {      DoubleAnimationmoveLeft = newDoubleAnimation(lockPoint.X, cursorPoint.X, newDuration(TimeSpan.FromMilliseconds(UnlockInterval)));     Storyboard.SetTarget(moveLeft, cursor.CursorVisual);     Storyboard.SetTargetProperty(moveLeft, newPropertyPath(Canvas.LeftProperty));     DoubleAnimationmoveTop = newDoubleAnimation(lockPoint.Y, cursorPoint.Y, newDuration(TimeSpan.FromMilliseconds(UnlockInterval)));     Storyboard.SetTarget(moveTop, cursor.CursorVisual);     Storyboard.SetTargetProperty(moveTop, newPropertyPath(Canvas.TopProperty));     move = newStoryboard();     move.Children.Add(moveTop);     move.Children.Add(moveLeft);     move.Completed += delegate{         move.Stop(cursor);         cursor.UpdateCursor(newPoint(e.X, e.Y), false);         this.RaiseEvent(newKinectCursorEventArgs(KinectCursorUnlockEvent, newPoint(e.X, e.Y), e.Z) { Cursor = e.Cursor });     };     move.Begin(cursor, true); } private voidAnimateCursorToLockPosition(KinectCursorEventArgse,doublex,doubley,CursorAdornercursor,refPointlockPoint,refPointcursorPoint) {      DoubleAnimationmoveLeft=newDoubleAnimation(cursorPoint.X,lockPoint.X,newDuration(TimeSpan.FromMilliseconds(LockInterval)));     Storyboard.SetTarget(moveLeft,cursor.CursorVisual);     Storyboard.SetTargetProperty(moveLeft,newPropertyPath(Canvas.LeftProperty));                 DoubleAnimationmoveTop=newDoubleAnimation(cursorPoint.Y,lockPoint.Y,newDuration(TimeSpan.FromMilliseconds(LockInterval)));     Storyboard.SetTarget(moveTop,cursor.CursorVisual);     Storyboard.SetTargetProperty(moveTop,newPropertyPath(Canvas.TopProperty));     move=newStoryboard();     move.Children.Add(moveTop);     move.Children.Add(moveLeft);     move.Completed+=delegate    {         this.RaiseEvent(newKinectCursorEventArgs(KinectCursorLockEvent,newPoint(x,y),e.Z){Cursor=e.Cursor});     };     if(move!=null)         move.Stop(e.Cursor);     move.Begin(cursor,false); }