使用ScaleTransform动画按钮的VisualStateManager

Question

我为一个包含网格和内容控件的按钮创建了一个控件模板。我想做的是:当按下按钮时，按钮的比例应该是0.5，当按钮离开按下状态时，按钮的缩放应该恢复到1.0。

在我目前的解决方案中，如果按下按钮，缩放= 0.5的动画效果很好。但我一发布按钮，动画就不会慢慢地恢复到1级，而是直接在1级。

我的实现如下所示：

<Style TargetType="Button" x:Name="MyButtonStyle">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="{TemplateBinding Background}" x:Name="buttonLayoutRoot">
                        <Grid.RenderTransform>
                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                        </Grid.RenderTransform>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="Pressed" GeneratedDuration="0:0:2.5">
                                        <Storyboard>
                                            <DoubleAnimation 
                                            Storyboard.TargetName="buttonLayoutRoot"
                                            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)"
                                            To="0.5" Duration="0:0:2.5"/>
                                            <DoubleAnimation 
                                            Storyboard.TargetName="buttonLayoutRoot"
                                            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)"
                                            To="0.5" Duration="0:0:2.5"/>
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition To="Normal" GeneratedDuration="0:0:2.5">
                                        <Storyboard>
                                            <DoubleAnimation 
                                            Storyboard.TargetName="buttonLayoutRoot"
                                            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)"
                                            To="1.0" Duration="0:0:2.5"/>
                                            <DoubleAnimation 
                                            Storyboard.TargetName="buttonLayoutRoot"
                                            Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)"
                                            To="1.0" Duration="0:0:2.5"/>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                        <ContentControl
                            x:Name="ButtonContent"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Margin="{TemplateBinding Padding}">
                        </ContentControl>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我还试着把动画放到视觉状态“正常”和“按下”，没有任何转换。但结果是一样的。当按钮不再按下时，它就会恢复到比例=1。

我正在为windows 8.0 silverlight编程。

希望你们能帮我。

谢谢，凯文

Answer 1

诀窍是，只定义视觉状态，您感兴趣。在这种情况下，您只对“按下”和“正常”感兴趣，因此只能定义它们。下面是一个示例：

<Button.Template>
            <ControlTemplate TargetType="Button">
                <ContentPresenter x:Name="LayoutRoot" RenderTransformOrigin="0.5 0.5">
                    <ContentPresenter.RenderTransform>
                        <ScaleTransform/>
                    </ContentPresenter.RenderTransform>
                    <ContentPresenter.Foreground>
                        <SolidColorBrush Color="White"/>
                    </ContentPresenter.Foreground>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard Duration="0:0:0.5">
                                    <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(ContentPresenter.RenderTransform).(ScaleTransform.ScaleX)"
                                         To="1" Duration="0:0:0.5"/>
                                    <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(ContentPresenter.RenderTransform).(ScaleTransform.ScaleY)"
                                         To="1" Duration="0:0:0.5"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard Duration="0:0:0.5">
                                    <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(ContentPresenter.RenderTransform).(ScaleTransform.ScaleX)"
                                         To="0.8" Duration="0:0:0.5"/>
                                    <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(ContentPresenter.RenderTransform).(ScaleTransform.ScaleY)"
                                         To="0.8" Duration="0:0:0.5"/>
                                    <ColorAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(ContentPresenter.Foreground).(SolidColorBrush.Color)"
                                                    To="Red" Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </ContentPresenter>
            </ControlTemplate>
        </Button.Template>

一旦可视化状态管理器更改状态，动画就会被重置，除非在模板中没有声明新状态。F.e.如果只定义“按下”状态，则按钮将保持在0.8的比例。只有当你也声明“正常”时，动画才会被重置。

Answer 2

好的，看看您的stuff...you，在如何设置您的RenderTransform显式中有另一个问题。保持打开状态，因为我们正在动态地与它交互(查看我的示例中的Grid.RenderTransform )。您还需要在您的RenderTransformOrigin上设置一个buttonLayoutRoot，这样它就知道您要回的是什么了。

所以，虽然我现在没有时间向你介绍整个解释，因为我有自己的工作任务要做，但这是一个通用的按钮样式，你可以参考我刚才做的，做你想做的事情。注意不同之处。我在这里提取了我的大部分其他定制垃圾，所以不应该有任何资源冲突或任何东西，但是您可能很快就会注意到这些差异。

<Style x:Key="StandardButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Red" />
    <Setter Property="Foreground" Value="Blue" />
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="Container"
                      RenderTransformOrigin="0.5,0.5" Cursor="{TemplateBinding Cursor}">
                    <Grid.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform />
                            <SkewTransform />
                            <RotateTransform />
                            <TranslateTransform />
                        </TransformGroup>
                    </Grid.RenderTransform>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="MouseOver"
                                                  GeneratedDuration="0:0:0.1"
                                                  To="Pressed">
                                    <VisualTransition.GeneratedEasingFunction>
                                        <ExponentialEase EasingMode="EaseIn" Exponent="-2" />
                                    </VisualTransition.GeneratedEasingFunction>
                                </VisualTransition>
                                <VisualTransition From="Pressed"
                                                  GeneratedDuration="0:0:0.1"
                                                  To="MouseOver">
                                    <VisualTransition.GeneratedEasingFunction>
                                        <ExponentialEase EasingMode="EaseOut" Exponent="0" />
                                    </VisualTransition.GeneratedEasingFunction>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="00:00:00"
                                                                   Storyboard.TargetName="MouseOverState" Storyboard.TargetProperty="(UIElement.Visibility)">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="00:00:00"
                                                                   Storyboard.TargetName="PressedState" Storyboard.TargetProperty="(UIElement.Visibility)">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Container" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.01" Value="1.05" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Container" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.01" Value="1.05" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="00:00:00"
                                                                   Storyboard.TargetName="DisabledState" Storyboard.TargetProperty="(UIElement.Visibility)">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="00:00:00"
                                                                   Storyboard.TargetName="FocusedState" Storyboard.TargetProperty="(UIElement.Visibility)">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="BaseBackground"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"/>
                    <Border x:Name="MouseOverState"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Visibility="Collapsed"/>
                    <Border x:Name="PressedState"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Visibility="Collapsed"/>
                    <Border x:Name="FocusedState"
                            Background="{TemplateBinding Background}"
                            Visibility="Collapsed"/>
                    <ContentControl x:Name="contentPresenter"
                                    Margin="{TemplateBinding Padding}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    FontSize="{TemplateBinding FontSize}"
                                    FontWeight="{TemplateBinding FontWeight}"
                                    Foreground="{TemplateBinding Foreground}"
                                    IsTabStop="False"/>
                    <Border x:Name="DisabledState"
                            Background="White"
                            Visibility="Collapsed"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

希望这会有所帮助，干杯！)