RenderTransform を StaticResource で指定すると回転しなくなる

Question

前提・実現したいこと

RotateTransform を複数のコントロールで共有することでメモリを節約しつつ同じ角度で回転アニメーションさせたいです。(下のGIF画像参照)
このようなコントロールが200個ほどあるので、コントロールごとに RotateTransform のインスタンスを生成するのは避けたいです。
そのため、RotateTransform を Resources にしておいて、共有しようと思いました。

発生している問題

方法: 要素のスピンを設定する のコードの RotateTransform を Resources に移動して、StaticResourceExtension で参照するようにした所、回転しなくなりました。

<Window ...>
  <Window.Resources>
    <RotateTransform x:Key="MyAnimatedTransform" Angle="0" />
  </Window.Resources>
  <StackPanel Margin="50">
    <Button
      RenderTransformOrigin="0.5,0.5"
      HorizontalAlignment="Left" RenderTransform="{StaticResource MyAnimatedTransform}">
        Hello,World
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.Target="{StaticResource MyAnimatedTransform}"
                Storyboard.TargetProperty="(RotateTransform.Angle)"
                From="0.0" To="360" Duration="0:0:1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button> 
  </StackPanel> 
</Window>

質問

1. なぜ上記のプログラムで Button が回転しないのか分かりません。
2. 複数のコントロールの RenderTransform プロパティの値を、単一の RotateTransform のインスタンスに設定し、かつ同じ回転アニメーションをさせるにはどうすれば良いですか。

環境

• WPF
• .NET Core 3.1
• Visual Studio 2019
• Windows 10

追記

リソースに、ダミーのオブジェクトを置いて、そのプロパティ経由でアニメーションさせると、動作しました。
DependencyObject のプロパティ経由じゃないとアニメーション出来ない仕様なんでしょうか……。

<Window ...>
  <Window.Resources>
    <RotateTransform x:Key="MyAnimatedTransform" Angle="0" />
    <UIElement x:Key="MyAnimatedTransformHolder"
        RenderTransform="{StaticResource MyAnimatedTransform}" />
  </Window.Resources>
  <StackPanel Margin="50">
    <Button HorizontalAlignment=" Left">
      Hello,World
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                  Storyboard.Target="{StaticResource MyAnimatedTransformHolder}"
                  Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                  From="0.0" To="360" Duration="0:0:1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
    <Rectangle Fill="Red" RenderTransformOrigin="0.5,0.5" Width="100"
        Height="200" RenderTransform="{StaticResource MyAnimatedTransform}" />
  </StackPanel>
</Window>

Answer 1

こうですかね？（いまだにこの長ったらしいプロパティパス？よくわからんですね^^;

<Window
  x:Class="Questions374901.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="800"
  Height="450">
  <Window.Resources>
    <RotateTransform x:Key="ResourceAnimatedTransform" />
  </Window.Resources>
  <StackPanel Margin="50">
    <Button
      HorizontalAlignment="Left"
      Content="MyAnimatedTransform"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform x:Name="MyAnimatedTransform" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedTransform"
                Storyboard.TargetProperty="(RotateTransform.Angle)"
                From="0.0"
                To="360"
                Duration="0:0:1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

    <Button
      HorizontalAlignment="Left"
      Content="ResourceAnimatedTransform"
      RenderTransform="{StaticResource ResourceAnimatedTransform}"
      RenderTransformOrigin="0.5,0.5">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                From="0.0"
                To="360"
                Duration="0:0:1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

    <Rectangle
      Width="50"
      Height="50"
      Fill="Red"
      RenderTransform="{StaticResource ResourceAnimatedTransform}"
      RenderTransformOrigin="0.5,0.5" />
    <Rectangle
      Width="50"
      Height="100"
      Fill="Green"
      RenderTransform="{StaticResource ResourceAnimatedTransform}"
      RenderTransformOrigin="0.5,0.5" />
    <Ellipse
      Width="80"
      Height="50"
      Fill="Blue"
      RenderTransform="{StaticResource ResourceAnimatedTransform}"
      RenderTransformOrigin="0.5,0.5" />
  </StackPanel>
</Window>

Comments

[tails]

いつも回答いただき、ありがとうございます。
- 質問1の方の、そもそもなぜ私のプログラムの方では回転アニメーションしないのかを知りたいです。
（リソースを直接アニメーションすることが不可なのでしょうか。つまり、何らかのコントロールを経由する必要がある？？）
- また、あげていただいた例で、ボタンは回転させずに、下の三つの図形のみ回転させたい場合は、どのようにすれば良いのでしょうか。
- （丸括弧のプロパティパスの必要性はよくわかってません、、が間違ってたら例外が出るので、まあそれでなんとかなってます）

[TN8001]

> - 質問1の方の、そもそもなぜ私のプログラムの方では回転アニメーションしないのかを知りたいです。

（TargetNameでやっているものばかりで）Targetの例が全然ないので私もわかりません^^;

> - また、あげていただいた例で、ボタンは回転させずに、下の三つの図形のみ回転させたい場合は、どのようにすれば良いのでしょうか。

ボタンを回したくないのであればButtonのRenderTransformは外し、Rectangle（あるいは何か隠しエレメント等）に名前を付けてTargetNameに指定します。

<Rectangle
x:Name="rect"
Width="50"
Height="50"
Fill="Red"
RenderTransform="{StaticResource ResourceAnimatedTransform}"
RenderTransformOrigin="0.5,0.5" />

<DoubleAnimation
Storyboard.TargetName="rect"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
From="0.0"
To="360"
Duration="0:0:1" />

[tails]

> > - 質問1の方の、そもそもなぜ私のプログラムの方では回転アニメーションしないのかを知りたいです。
>
> （TargetNameでやっているものばかりで）Targetの例が全然ないので私もわかりません^^;

そうですか…。分かりました。
色々検索してみたんですけど、同じような質問があって、やはりリソースの RotateTransform を直接アニメーションさせようとしても機能しないっぽい感じですね。
何かの UIElement の適当なプロパティに指定しておいて、そのプロパティ経由じゃないと、アニメーションできないみたいです。

質問文に、そのパターンの解決策を追記しておきました。

> Rectangle（あるいは何か隠しエレメント等）に名前を付けてTargetNameに指定します。
やはりそうなりますよね…
UIElement のプロパティ経由ですね。

ありがとうございました。何故駄目なのかは分かりませんでしたが、とりあえず解決策は分かりました！