How to modify Button for Multitouch support on Windows Phone?

Question

I want to have a button that responds to the Touch.FrameReported Up & Down events instead of the usual MouseDown and MouseUp events that would be used so this button can be used at the same time on Windows Phone as another button.
I already have a custom Button control with a MouseDown and MouseUp state, but am unsure how to make the Up and Down events there trigger the correct look - probably something with the VisualStateManager needs set but cannot figure out how to use it - solution needs to use the standard Button control as I'm merely extending it for the two states - as a button control with a normal and "pressed" state.
This is for a game screen within a larger Silverlight project, the rest of the project is standard Silverlight with the standard buttons and their normal behaviour, however in one place this needs to be Multitouch so this cannot be an XNA project instead as this would require porting 99% of the app to XNA where other features used are not supported - I've been able to extend custom controls to support multitouch but want the button to react this way too - plus I'm sure this will be of use to others, especially as this will most likely apply to Windows 7/8 development too.

Edit: Here is the Code and Generic.xaml for my button with the normal behaviour (OnMouseUp/OnMouseDown)

Code:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System.Windows.Input;
using System.Diagnostics;

namespace UXLibrary
{
    [TemplatePart(Name = "Pressed", Type = typeof(BitmapSource))]
    [TemplatePart(Name = "Normal", Type = typeof(BitmapSource))]
    public class UXButton : Button
    {
        public static readonly DependencyProperty  PressedProperty =
        DependencyProperty.Register("Pressed", typeof(BitmapSource),
        typeof(UXButton), null);

        public static readonly DependencyProperty NormalProperty =
        DependencyProperty.Register("Normal", typeof(BitmapSource),
        typeof(UXButton), null);

        public BitmapSource Pressed
        {
            get { return (BitmapSource)GetValue(PressedProperty); }
            set { SetValue(PressedProperty, value); }
        }

        public BitmapSource Normal
        {
            get { return (BitmapSource)GetValue(NormalProperty); }
            set { SetValue(NormalProperty, value); }
        }

        /// Constructor
        public UXButton()
        {
            DefaultStyleKey = typeof(UXButton);
        }

        /// OnApplyTemplate
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();     
        }

    }
}

Generic.xaml

Solution

Code:

/// Button
[TemplatePart(Name = "Wrapper", Type = typeof(Grid))]
[TemplateVisualState(Name = "SpecialTouch", GroupName = "MultiTouchStates")]
public class UXButton : Button
{
    public static readonly DependencyProperty PressedProperty =
    DependencyProperty.Register("Pressed", typeof(BitmapSource),
    typeof(UXButton), null);

    public static readonly DependencyProperty NormalProperty =
    DependencyProperty.Register("Normal", typeof(BitmapSource),
    typeof(UXButton), null);

    public BitmapSource Pressed
    {
        get { return (BitmapSource)GetValue(PressedProperty); }
        set { SetValue(PressedProperty, value); }
    }

    public BitmapSource Normal
    {
        get { return (BitmapSource)GetValue(NormalProperty); }
        set { SetValue(NormalProperty, value); }
    }

    /// Constructor
    public UXButton()
    {
        DefaultStyleKey = typeof(UXButton);

    }

    /// OnApplyTemplate
    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        Touch.FrameReported += (object sender, TouchFrameEventArgs e) =>
        {
            Image pressed = (Image)GetTemplateChild("PressedImage");
            Image normal = (Image)GetTemplateChild("NormalImage");
            TouchPointCollection points = e.GetTouchPoints(null);
            foreach (TouchPoint point in points)
            {
                if (point.Action == TouchAction.Down && (point.TouchDevice.DirectlyOver == normal || point.TouchDevice.DirectlyOver == pressed))
                {
                    VisualStateManager.GoToState(this, "SpecialTouch", false);
                }
                else if (point.Action == TouchAction.Up)
                {
                    VisualStateManager.GoToState(this, "Normal", false);
                }
            } 
        };
    }
}

Justin XL · Accepted Answer

If i understand your question correctly, i think you need to create one more visual state rather than two parts ("pressed" & "normal").

// UPDATE: you need to get the Grid in order to know the touch area
[TemplatePart(Name = "Wrapper", Type = typeof(Grid))]
[TemplateVisualState(Name = "SpecialTouch", GroupName = "MultiTouchStates")]
public class UXButton : Button

Then in your custom button's constructor, subscribe to the FrameReported event,

    public UXButton()
    {
        DefaultStyleKey = typeof(UXButton);

        Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
    }

    void Touch_FrameReported(object sender, TouchFrameEventArgs e)
    {
        // UPDATE: get the Grid
        var wrapper = GetTemplateChild("Wrapper") as Grid;

        TouchPointCollection points = e.GetTouchPoints(null);

        foreach (TouchPoint point in points)
        {
            // UPDATE: also do the touch area check here
            // specify what touch you want
            if (point.Action == TouchAction.Down && point.TouchDevice.DirectlyOver == wrapper)
            {
                VisualStateManager.GoToState(this, "SpecialTouch", false);
            }
        }
    }

Then in the style, you do the hide and show images in this visual state you just created. If you want to be able to dynamically change the normal and pressed images, of course you can just add your TemplateParts back in.

UPDATE: Also you need to give your root element which is the Grid a name and a background color, like this,

Hope this helps.

How to modify Button for Multitouch support on Windows Phone?

Answers (1)

Related Questions