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); }
}
/// <summary>Constructor</summary>
public UXButton()
{
DefaultStyleKey = typeof(UXButton);
}
/// <summary>OnApplyTemplate</summary>
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
}
}
}
Generic.xaml
<Style TargetType="local:UXButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:UXButton">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Opacity)" To="0.5"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver"/>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused"/>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Image x:Name="PressedImage" Stretch="Uniform" Source="{TemplateBinding Pressed}"/>
<Image x:Name="NormalImage" Stretch="Uniform" Source="{TemplateBinding Normal}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Solution
<Style TargetType="local:UXButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:UXButton">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="MultiTouchStates">
<vsm:VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<VisualState x:Name="SpecialTouch">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NormalImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Image x:Name="PressedImage" Stretch="Uniform" Source="{TemplateBinding Pressed}"/>
<Image x:Name="NormalImage" Stretch="Uniform" Source="{TemplateBinding Normal}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Code:
/// <summary>Button</summary>
[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); }
}
/// <summary>Constructor</summary>
public UXButton()
{
DefaultStyleKey = typeof(UXButton);
}
/// <summary>OnApplyTemplate</summary>
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);
}
}
};
}
}
If i understand your question correctly, i think you need to create one more visual state rather than two parts (“pressed” & “normal”).
Then in your custom button’s constructor, subscribe to the FrameReported event,
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.