Windows Phone - 圆形按钮触摸动画

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

这是我现有的控件模板：

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

什么是正确的故事板以及它需要插入？

来源

2013-02-23 c.z

我建议的第一件事就是使用Ellipse而不是带圆边的边框创建圆。这样，如果您决定按钮的尺寸不同，则无需继续调整CornerRadius。你可以像这样重叠的椭圆和ContentPresenter在网格：

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

要更改按钮视觉上的反应如何摸，你应该在混合使用可视状态。打开按钮模板后，单击States选项卡（或者如果不可见，请转至窗口|状态）。

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

在此状态下，按下按钮时更改要查看的内容。在你的情况下，将椭圆不透明度设置为100％，并将Grid上的Scale Scale设置为更小的符合您需要的东西。

确保您单击状态标签中的基地退出录制模式。

现在，当您在运行时按下按钮时，您记录的更改应该显示出来。他们也是瞬间的。要在状态之间进行良好的转换，请返回到状态选项卡。然后单击按下状态旁边的添加转换按钮。

enter image description here

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

enter image description here

个人而言，我通常会做0.2S左右的东西，与二次易于输入/输出。现在当你按下按钮时，不同视觉状态之间应该有一个轻微的动画。

祝你好运！

来源

2013-02-23 15:43:26

真的很好的解释！十分感谢！ :) – 2013-02-23 17:20:32

Windows Phone - 圆形按钮触摸动画

回答

相关问题