Ways to address WPF Touch Screen Sensitivity

Question

I am trying to address issues with the sensitivity of a capacitive touch screen where WPF buttons are being triggered if the users fingers pass too close to the surface of the screen.

This issue is that many users end up with fingers or parts of their hands, other than their primary touch finger, close to the surface of the screen and this causes incorrect buttons to be triggered.

Adjusting the sensitivity of the screen seems to make little difference to I thought I could try modifying the button pressed events to only trigger a Click if the button is pressed for more than a certain amount of time.

Can anyone explain how I might create a custom button that would have an adjustable 'pressed' time before triggering a Clicked event.

If possible perhaps you would be kind enough to include a very simple C#/WPF application with such a custom button.

EDIT

OK, so I have created a subclassed Button using the code below, as per @kidshaw's answer but I think I must be missing a few things because nothing is getting called except the default Click event.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace AppName
{
    public class TouchButton : Button
    {
        DoubleAnimationUsingKeyFrames _animation;

        public static readonly DependencyProperty DelayElapsedProperty =
         DependencyProperty.Register("DelayElapsed", typeof(double), typeof(TouchButton), new PropertyMetadata(0d));

        public static readonly DependencyProperty DelayMillisecondsProperty =
                DependencyProperty.Register("DelayMilliseconds", typeof(int), typeof(TouchButton), new PropertyMetadata(100));

        public double DelayElapsed
        {
            get { return (double)this.GetValue(DelayElapsedProperty); }
            set { this.SetValue(DelayElapsedProperty, value); }
        }

        public int DelayMilliseconds
        {
            get { return (int)this.GetValue(DelayMillisecondsProperty); }
            set { this.SetValue(DelayMillisecondsProperty, value); }
        }
        private void BeginDelay()
        {
            this._animation = new DoubleAnimationUsingKeyFrames() { FillBehavior = FillBehavior.Stop };
            this._animation.KeyFrames.Add(new EasingDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0)), new CubicEase() { EasingMode = EasingMode.EaseIn }));
            this._animation.KeyFrames.Add(new EasingDoubleKeyFrame(1, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(this.DelayMilliseconds)), new CubicEase() { EasingMode = EasingMode.EaseIn }));
            this._animation.Completed += (o, e) =>
            {
                this.DelayElapsed = 0d;
                //this.Command.Execute(this.CommandParameter);    // Replace with whatever action you want to perform
                Console.Beep();
                this.RaiseEvent(new RoutedEventArgs(Button.ClickEvent));
            };

            this.BeginAnimation(DelayElapsedProperty, this._animation);
        }

        private void CancelDelay()
        {
            // Cancel animation
            this.BeginAnimation(DelayElapsedProperty, null);
        }
        private void TouchButton_TouchDown(object sender, System.Windows.Input.TouchEventArgs e)
        {
            this.BeginDelay();
        }

        private void TouchButton_TouchUp(object sender, System.Windows.Input.TouchEventArgs e)
        {
            this.CancelDelay();
        }

    }
}

How does the TouchButton_TouchDown method ever get called ? Don't I have to assign this to the TouchDown even handler somehow?

OK, I added a constructor and set the TouchDown/Up event handlers so that works but the CancelDelay() does not stop the event from being fired. It seems work OK and gets called when the user lift their finger but does not prevent the event from being triggered.

couldnt you create a usercontrol with a button, which starts a timer on press, and after a 100ms you fire the click event manually? — Sebastian L
Well the issue is that the Windows touch driver does not seem to differentiate between a very light touch or a long touch. So I need the button to only trigger the event if the button is long pressed (and some experimentation would be required to determine the optimal duration for usability). My guess is a press is around 200 - 300 milliseconds whereas a passing trigger would be less that 200. I guess I could start the timer on Press and stop it on Release and if > X trigger the event. — Duncan Groenewald
Rather than use the ClickEvent - create a new one and raise that, lets say DeferredClickEvent. The ClickEvent will be triggered by the button when it is first clicked, by separating it to its own event, you only handle the deferred trigger AFTER the delay. — kidshaw
Thanks I have done this but I had to add a flag IsCancelled which gets set when the TouchUp event is received. So when the animation completes it checks if IsCancelled = true and if not raises the IsTouched event. And then I have to reset IsTouched property to false after raising the event because it must be a momentary property and I use it to animate a colour fade. Now to test it with users on the real touch screen! — Duncan Groenewald

kidshaw kidshaw · Accepted Answer · 2014-09-04T06:19:54

A time delay button would be the best option.

I have provided an example in this other stack overflow answer.

It uses an animation to delay triggering a command.

Hope it helps.

Do wpf have touch and gold gesture

Ways to address WPF Touch Screen Sensitivity

3 Answers