不能做动画

Question

当鼠标结束时，我想将按钮的大小从70改为90：

<Style TargetType="Button"
       x:Key="RadialButton">
  <Setter Property="Width"
          Value="70"></Setter>
  <Setter Property="Height"
          Value="85"></Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <ControlTemplate.Resources>
          <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                           Storyboard.TargetName="ExtEllipse">
              <EasingDoubleKeyFrame KeyTime="0:0:1"
                                    Value="90" />
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </ControlTemplate.Resources>
        <Grid Name="MainGrid">
          <Grid.RowDefinitions>
            <RowDefinition Height="70"></RowDefinition>
            <RowDefinition Height="15"></RowDefinition>
          </Grid.RowDefinitions>
          <Ellipse Width="70"
                   Height="70"
                   Stroke="Gray"
                   Grid.Row="0"
                   Name="ExtEllipse"
                   Fill="{x:Null}" />
          <Ellipse Width="50"
                   Height="50"
                   Stroke="Gray"
                   Grid.Row="0"></Ellipse>
          <TextBlock Grid.Row="1"
                     FontSize="13"
                     FontWeight="Bold"
                     TextAlignment="Center"
                     Foreground="Green">
                        <ContentPresenter RecognizesAccessKey="True"
                                          Content="{TemplateBinding Button.Content}" />
          </TextBlock>
        </Grid>
        <ControlTemplate.Triggers>
          <EventTrigger RoutedEvent="FrameworkElement.Loaded" />
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>  

使用：

<Button Content="Button"
        HorizontalAlignment="Left"
        Margin="36,140,0,147"
        Width="151"
        Style="{DynamicResource RadialButton}" />

但它不起作用。没啥事儿。为什么以及如何解决这个问题？

Answer 1

你必须开始Storyboard。你的EventTrigger什么也没做。

<EventTrigger RoutedEvent="MouseEnter">
    <BeginStoryboard Storyboard="{StaticResource Storyboard1}" />
</EventTrigger>

Answer 2

那是因为你有故事板，但你不玩它。

尝试添加触发器来播放该故事板。像这样：

<Trigger Property="IsMouseOver" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard Storyboard="{StaticResource Storyboard1}" />
    </Trigger.EnterActions>
</Trigger>

这是动画的结果：