wpf - コントロールのテンプレートの一部を WPF でアニメーション化するにはどうすればよいですか?

Question

そのため、例のためにこれを単純化しました。ボタンがあり、その ControlTemplate に赤い楕円があります。ボタンがクリックされると (MouseDown イベント)、Ellipse をアニメーション化して 1 秒後に透明にする必要があります。これが私のxamlです

<Button>
  <Button.Template>
    <ControlTemplate>
      <Grid Width="{TemplateBinding Width}"
            Height="{TemplateBinding Height}"
            ClipToBounds="True">
        <Ellipse x:Name="ripple" 
                 Height="20" Width="20" 
                 Fill="Red"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
                 Opacity="1"/>
        <ContentPresenter HorizontalAlignment="Center"
                          VerticalAlignment="Center" />
      </Grid>
    </ControlTemplate>
  </Button.Template>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.MouseDown">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetName="ripple"
                           Storyboard.TargetProperty="Opacity"
                           From="1" To="0" Duration="0:0:1"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

問題は、ボタンをクリックすると楕円が透明にならないことです。私の推測では、何らかの理由で「波紋」という名前のオブジェクトが見つからないのですが、その理由はわかりません。私は何を間違っていますか？