1

我使用 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 以及需要插入的位置？

4

1 回答 1

3

我建议的第一件事是使用椭圆而不是带有圆边的边框来创建圆。这样，如果您决定按钮需要具有不同的大小，则无需继续调整 CornerRadius。您可以像这样在 Grid 中重叠 Ellipse 和 ContentPresenter：

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

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

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

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

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

现在，当您在运行时按下按钮时，您记录的更改应该会显示出来。它们也将是瞬时的。要在状态之间进行良好的转换，请返回“状态”选项卡。并单击Pressed状态旁边的Add Transition按钮。

在此处输入图像描述

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

在此处输入图像描述

就我个人而言，我通常会在 0.2 秒左右做一些事情，使用二次缓入/缓出。现在，当您按下按钮时，不同的视觉状态之间应该会有轻微的动画。

祝你好运！

于 2013-02-23T15:43:26.137 回答