如何编辑故事板以将其放入按钮样式？

Question

我已经为混合中的按钮创建了一个故事板，我希望每次按下按钮时都应用它，所以我尝试创建一种样式，但我已经被困了很长时间了。

这是我的故事板的代码：

<Storyboard>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                                   Storyboard.TargetName="button">
        <EasingDoubleKeyFrame KeyTime="0"
                              Value="1">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseOut" />
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="0:0:0.25"
                              Value="0.85">
            <EasingDoubleKeyFrame.EasingFunction>
                <QuinticEase EasingMode="EaseInOut" />
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                              Value="1">
            <EasingDoubleKeyFrame.EasingFunction>
                <QuarticEase EasingMode="EaseIn" />
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                                   Storyboard.TargetName="button">
        <EasingDoubleKeyFrame KeyTime="0"
                              Value="1">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseOut" />
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="0:0:0.25"
                              Value="0.85">
            <EasingDoubleKeyFrame.EasingFunction>
                <QuinticEase EasingMode="EaseInOut" />
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                              Value="1">
            <EasingDoubleKeyFrame.EasingFunction>
                <QuarticEase EasingMode="EaseIn" />
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

这是我的按钮样式的代码：

<Style x:Key="ParametersButton"
       TargetType="ButtonBase">
    <Setter Property="Background"
            Value="{StaticResource TransparentBrush}" />
    <Setter Property="BorderBrush"
            Value="{StaticResource PhoneForegroundBrush}" />
    <Setter Property="Foreground"
            Value="{StaticResource PhoneForegroundBrush}" />
    <Setter Property="MinHeight"
            Value="72" />
    <Setter Property="BorderThickness"
            Value="{StaticResource PhoneDefaultBorderThickness}" />
    <Setter Property="FontFamily"
            Value="{StaticResource PhoneFontFamilyNormal}" />
    <Setter Property="FontSize"
            Value="{StaticResource PhoneFontSizeMediumLarge}" />
    <Setter Property="Padding"
            Value="0,15,15,0" />
    <Setter Property="Height"
            Value="72" />
    <Setter Property="Width"
            Value="72" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ButtonBase">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver" />
                            <VisualState x:Name="UnPressed" />
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <!--Here is where I want to insert my StoryBoard-->
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused" />
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="ButtonBackground"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="0"
                            CornerRadius="0"
                            Background="#FF1BA1E2"
                            Margin="{StaticResource PhoneTouchTargetOverhang}"
                            RenderTransformOrigin="0.5,0.5">
                        <ContentControl x:Name="foregroundContainer"
                                        FontFamily="{TemplateBinding FontFamily}"
                                        Foreground="{TemplateBinding Foreground}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        FontSize="{TemplateBinding FontSize}"
                                        Padding="{TemplateBinding Padding}"
                                        Content="{TemplateBinding Content}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我该如何继续？

谢谢，

雷诺

Answer 1

在 Expression Blend 中最简单，编辑样式时，选择所需的视觉状态器，打开故事板面板并创建动画。当您进入该状态时，这将触发。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="MouseOver">
            <Storyboard>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00"
                                              Storyboard.TargetName="Background"
                                              Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="00:00:00"
                                         Value="White" />
                    <EasingColorKeyFrame KeyTime="00:00:01"
                                         Value="Red" />
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
    <VisualState x:Name="Pressed" />
    <VisualState x:Name="Disabled" />
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>