Windows Phone - 圆形按钮触摸动画

Question

我使用Blend创建了一个圆形按钮。它运作良好但不响应触摸事件。该按钮应该变得更小，并将不透明度设置为1.0，类似于诺基亚地图应用程序的位置按钮。

这是我现有的控制模板：

        <ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="50" Margin="{StaticResource PhoneTouchTargetOverhang}">
            <ContentControl x:Name="ContentContainer" Content="{TemplateBinding Content}" RenderTransformOrigin="0.5,0.5">
                <ContentControl.RenderTransform>
                    <ScaleTransform x:Name="buttonScale" />
                </ContentControl.RenderTransform>
            </ContentControl>
        </Border>
    </ControlTemplate>

什么是正确的StoryBoard以及需要插入的位置？

Answer 1

我建议的第一件事是使用椭圆创建圆，而不是使用圆边创建圆。这样，如果您确定按钮需要不同大小，则无需继续调整CornerRadius。您可以在网格中重叠Ellipse和ContentPresenter，如下所示：

<ControlTemplate TargetType="Button">
    <Grid Background="Transparent">
       <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</ControlTemplate>

要更改按钮在视觉上对触摸做出反应的方式，您应该在Blend中使用Visual States。打开按钮模板后，单击状态选项卡（如果不可见，则转到窗口|状态）。

如果您打开了按钮模板，则应该看到几个内置的可视状态供您编辑。选择按下状态，您将进入录制模式。按下按钮时，将显示您所做模板的任何更改。由于主要内容窗口周围的红色轮廓和通知，您可以告诉您处于录制模式。

在此状态下，更改按下按钮时要查看的内容。在您的情况下，将椭圆不透明度设置为100％并将网格上的缩放变换设置为适合您需要的较小值。

确保单击“状态”选项卡中的基础状态以退出录制模式。

现在，在运行期间按下按钮时，应显示您录制的更改。他们也会瞬间完成。要在状态之间进行良好的转换，请返回状态标签。然后点击按下状态旁边的添加转化按钮。

为 - ＆gt; Pressed和Pressed-＆gt; 添加转换。这些是进入和离开按下状态时将播放的过渡。在这里，您可以编辑过渡持续时间和缓动功能。

就我个人而言，我通常在0.2秒左右做一些事情，使用Quadratic Ease In / Out。现在当你按下按钮时，不同的视觉状态之间应该有一个轻微的动画。

祝你好运！