xaml - 使用 VisualStateManager 对按钮的 ScaleTransform 进行动画处理

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>

我还尝试将动画置于视觉状态“正常”和“按下”而没有任何过渡。但结果是一样的。当按钮不再被按下时，它会迅速回到 scale = 1。

我正在为 Windows Phone 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 比例。只有当您也声明“正常”时，动画才会重置。