3

我开始学习 WPF 几天。现在我正在制作动画Button，当它使用VisualStateManager.

创建我的Button并应用ControlTemplate到它

<Button Content="This is a Button" Height="100" HorizontalAlignment="Center" 
    VerticalAlignment="Center" Width="200" 
    Template="{DynamicResource ButtonControlTemplate}" 
    FontFamily="Trebuchet MS" FontSize="24" Foreground="White"/>

这里是ControlTemplate

<ControlTemplate x:Key="ButtonControlTemplate" TargetType="{x:Type Button}">
    <Grid x:Name="ElementRoot">
        <Border x:Name="border" BorderThickness="1" Width="Auto" CornerRadius="3">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFF8FFF6" Offset="0"/>
                    <GradientStop Color="#FF67ED38" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF52A370" Offset="0"/>
                    <GradientStop Color="#FF054E21" Offset="1"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <ContentPresenter 
                HorizontalAlignment="{TemplateBinding   HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
        </Border>
    </Grid>
</ControlTemplate>

这是VisualStateManager改变外观的Button

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualStateGroup.Transitions>
            <VisualTransition From="MouseOver" GeneratedDuration="0:0:1" To="Pressed">
                <Storyboard x:Name="MouseOverToPressedStoryboard">
                    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="border">
                        <EasingThicknessKeyFrame KeyTime="0:0:1" Value="20,10"/>
                    </ThicknessAnimationUsingKeyFrames>
                </Storyboard>
            </VisualTransition>
        </VisualStateGroup.Transitions>
        <VisualState x:Name="Normal"/>
        <VisualState x:Name="MouseOver"/>
        <VisualState x:Name="Pressed">
            <Storyboard x:Name="pressedStoryboard">
                <ColorAnimation Duration="0" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border" To="#FF3DA917" />
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Disabled"/>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

我已经阅读了GeneratedDurationMSDN 中的属性详细信息（这里是链接），如果我理解正确，GeneratedDuration是控件（我的Button）从一种状态转换到另一种状态所需的时间。在我的情况是从MouseOver到Pressed。这样，它必须等待一秒钟才能进入Pressed状态。Pressed 状态改变了 Button 的背景颜色。当您将鼠标指向按钮（尚未单击）然后单击它时，一秒钟后，它的外观Button应该开始改变。但是当你点击它时它会立即改变。

我在哪里误解了什么？希望有人可以提供帮助。先感谢您。

4

0 回答 0