Xaml 使用VisualStateManager为按钮的缩放变换设置动画_Xaml_Animation_Windows Phone 8_Visualstatemanager

Xaml 使用VisualStateManager为按钮的缩放变换设置动画

xaml animation windows-phone-8

Xaml 使用VisualStateManager为按钮的缩放变换设置动画,xaml,animation,windows-phone-8,visualstatemanager,Xaml,Animation,Windows Phone 8,Visualstatemanager,我为包含网格和内容控件的按钮创建了一个控件模板。我想做的是：当按下按钮时，按钮的比例应设置为0.5，当按钮离开按下状态时，按钮的比例应设置为1.0 在我当前的解决方案中，如果按下按钮，缩放为0.5的动画效果很好。但只要我松开按钮，动画就不会缓慢地缩放回比例1。相反，它是直接在1级我的实现如下所示： <Style TargetType="Button" x:Name="MyButtonStyle"> <Setter Property="Margin" Value

我为包含网格和内容控件的按钮创建了一个控件模板。我想做的是：当按下按钮时，按钮的比例应设置为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 phone 8.0 silverlight编程

希望你们能帮助我

谢谢，凯文，好的，看看你的东西……你在如何设置RenderTransform explicit方面还有另一个问题。因为我们正在动态地与它交互，所以将它保持打开状态（查看我的示例中的

Grid.RenderTransform

）。您还需要在buttonLayoutRoot上设置一个

RenderTransferMorigin

，以便它也知道您要恢复什么

所以，虽然我现在没有时间让你们看完整的解释，因为我有自己的工作任务要做，但这里有一个通用的按钮样式，你们可以参考一下我刚才做的，它符合你们的要求。注意区别。我在这里提取了我的大多数其他自定义垃圾，因此不应该有任何资源冲突或任何事情，但您可能会很快注意到这些差异

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

希望这有帮助，干杯

诀窍是，只定义您感兴趣的视觉状态。在本例中，您只对“按下”和“正常”感兴趣，因此只定义它们。以下是一个例子：

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