Question

我想要一个响应Touch.FrameReported Up＆amp;向下事件而不是通常使用的MouseDown和MouseUp事件，因此此按钮可以在Windows Phone上作为另一个按钮同时使用。
我已经有一个具有MouseDown和MouseUp状态的自定义Button控件，但我不确定如何使Up和Down事件触发正确的外观 - 可能需要设置VisualStateManager但无法弄清楚如何使用它 - 解决方案需要使用标准的按钮控件，因为我只是将其扩展为两种状态 - 作为具有正常和“按下”状态的按钮控制。
这是针对较大的Silverlight项目中的游戏屏幕，项目的其余部分是带有标准按钮的标准Silverlight及其正常行为，但是在一个地方这需要是多点触控所以这不能是XNA项目，因为这需要将99％的应用程序移植到XNA，其中不支持使用其他功能 - 我已经能够扩展自定义控件以支持多点触控，但希望按钮也能以这种方式做出反应 - 而且我确信这对其他人有用，尤其是因为这很可能也适用于Windows 7/8开发。

编辑：这是我的按钮的Code和Generic.xaml，具有正常行为（OnMouseUp / OnMouseDown）

代码：

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>

解决方案

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

代码：

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

Answer 1

如果我理解你的问题，我认为你需要创建一个更多的视觉状态而不是两个部分（“按下”和“正常”）。

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

然后在您的自定义按钮的构造函数中，订阅FrameReported事件，

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

然后在样式中，您可以隐藏并以刚刚创建的视觉状态显示图像。如果您希望能够动态更改普通图像和按下的图像，当然您只需将TemplatePart添加回来。

更新：你还需要为你的根元素提供一个名称和背景颜色，像这样，

<Grid x:Name="Wrapper" Background="Transparent">

                        <VisualStateGroup x:Name="MultiTouchStates">
                            <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>

希望这有帮助。

如何在Windows Phone上修改Button for Multitouch支持？

1 个答案: