animation - 将 PointerDown/UpAnimation 添加到 Button 控件 - Windows 8 XAML

Question

我正在尝试使用 XAML 添加动画按钮控件。下面是应用于按钮的样式。

<Style x:Key="ContentButtonStyle" TargetType="Button">
    <Setter Property="Width" Value="Auto"/>
    <Setter Property="Height" Value="Auto"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="UseLayoutRounding" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="TapStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerDown">
                                <Storyboard>
                                    <PointerDownThemeAnimation TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerUp">
                                <Storyboard>
                                    <PointerUpThemeAnimation TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <ContentPresenter x:Name="ContentPresenter"
                                        Margin="{TemplateBinding Padding}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

但是动画没有按预期工作。请就此处应使用哪种方法提出建议。提前致谢。

Answer 1

我喜欢你使用视觉状态。它们在 XAML 中使这种谨慎的动画更容易。我认为您只需要自己的动画即可。应该很容易。将下面的代码放入任何 Windows 8 应用程序页面。然后在 Blend 中打开它，这样您就可以更轻松地预览视觉状态。我认为这是您需要的 90%。剩下的就是你的自定义场景。

<UserControl>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="ArrowButtonStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.5"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Left"/>
            <VisualState x:Name="Right" >
                <Storyboard>
                    <DoubleAnimation Duration="0" To="180" 
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" 
                                    Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Up">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="90" 
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" 
                                    Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Down">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="-90" 
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" 
                                    Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid Width="50" Height="50">
        <Ellipse Stroke="White" StrokeThickness="2" />
        <TextBlock x:Name="textBlock" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Segoe UI Symbol" FontSize="20" Text="" RenderTransformOrigin="0.5,0.5" >
            <TextBlock.RenderTransform>
                <CompositeTransform/>
            </TextBlock.RenderTransform>
        </TextBlock>
    </Grid>
</UserControl>

祝你好运！