Button 的 Pressed VisualState 的动画不会触发答案

【问题标题】：Animation for Button's Pressed VisualState doesn't fireButton 的 Pressed VisualState 的动画不会触发
【发布时间】：2013-03-11 13:46:38
【问题描述】：

我正在开发一个 Windows Phone 8 项目。我对这个按钮的问题：

        <Button x:Name="decreaseFontButton" Foreground="{StaticResource GlobalBrush}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="decreaseFontButton">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="70"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="decreaseFontButton" Completed="ObjectAnimationUsingKeyFrames_Completed_1">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource GlobalBrush}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Button.Content>
                <Image Source="/Assets/Player/sub_minus.png" Width="28" Height="28"/>
            </Button.Content>
        </Button>

这两个动画都没有被触发。我尝试将 VisualStateGroup 的名称更改为 FocusState 并将 VisualState 的名称更改为 Focused，但我也没有看到任何更改。你能告诉我我做错了什么吗？

感谢您的关注！

【问题讨论】：

您的故事板没有任何问题，只是您尝试调用它的方式。它只需要做一个控制模板并声明一个资源。我建议查看默认按钮模板以及它如何使用 VisualStateManager，如果这不能很快地揭示您的答案，我们可以很容易地向您展示您缺少的东西，但您离我们不远了。
非常感谢您的努力，我已经这样做了，视觉效果达到预期，但我仍然没有发现为什么初始解决方案不好。
这只是因为 VisualStateManager 不能直接应用于 UIElement，只需要在 UIElement TargetType 的控件模板中。没什么大不了的，很高兴你找到了你的补救措施。干杯:)
谢谢，这就是我想知道的！

标签： windows xaml windows-phone-8 windows-phone visualstatemanager

【解决方案1】：

问题在于您尝试修改视觉状态的方式。这些实际上是按钮内部模板的一部分，无法按照您尝试的方式进行配置。

相反，您应该创建一种新样式，其中包括您想要的视觉状态更改，并将该样式应用于按钮。

像这样：

<phone:PhoneApplicationPage.Resources>

    <SolidColorBrush Color="Aqua" x:Key="aquabrush" />

    <Style x:Key="AlternativeButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="Padding" Value="10,5,10,6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource aquabrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="70"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates"/>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Button Content="pressed?" Style="{StaticResource AlternativeButtonStyle}" />
</Grid>

【讨论】：