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

前提・実現したいこと

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

発生している問題

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

XAML
1<Window ...>
2  <Window.Resources>
3    <RotateTransform x:Key="MyAnimatedTransform" Angle="0" />
4  </Window.Resources>
5  <StackPanel Margin="50">
6    <Button
7      RenderTransformOrigin="0.5,0.5"
8      HorizontalAlignment="Left" RenderTransform="{StaticResource MyAnimatedTransform}">
9        Hello,World
10      <Button.Triggers>
11        <EventTrigger RoutedEvent="Button.Click">
12          <BeginStoryboard>
13            <Storyboard>
14              <DoubleAnimation
15                Storyboard.Target="{StaticResource MyAnimatedTransform}"
16                Storyboard.TargetProperty="(RotateTransform.Angle)"
17                From="0.0" To="360" Duration="0:0:1" />
18            </Storyboard>
19          </BeginStoryboard>
20        </EventTrigger>
21      </Button.Triggers>
22    </Button> 
23  </StackPanel> 
24</Window>

質問

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

環境

WPF
.NET Core 3.1
Visual Studio 2019
Windows 10

追記

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

XAML
1<Window ...>
2  <Window.Resources>
3    <RotateTransform x:Key="MyAnimatedTransform" Angle="0" />
4    <UIElement x:Key="MyAnimatedTransformHolder"
5        RenderTransform="{StaticResource MyAnimatedTransform}" />
6  </Window.Resources>
7  <StackPanel Margin="50">
8    <Button HorizontalAlignment=" Left">
9      Hello,World
10      <Button.Triggers>
11        <EventTrigger RoutedEvent="Button.Click">
12          <BeginStoryboard>
13            <Storyboard>
14              <DoubleAnimation
15                  Storyboard.Target="{StaticResource MyAnimatedTransformHolder}"
16                  Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
17                  From="0.0" To="360" Duration="0:0:1" />
18            </Storyboard>
19          </BeginStoryboard>
20        </EventTrigger>
21      </Button.Triggers>
22    </Button>
23    <Rectangle Fill="Red" RenderTransformOrigin="0.5,0.5" Width="100"
24        Height="200" RenderTransform="{StaticResource MyAnimatedTransform}" />
25  </StackPanel>
26</Window>

行動規範の内容に同意します

回答1件

ベストアンサー

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

xml
1<Window
2  x:Class="Questions374901.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="800"
6  Height="450">
7  <Window.Resources>
8    <RotateTransform x:Key="ResourceAnimatedTransform" />
9  </Window.Resources>
10  <StackPanel Margin="50">
11    <Button
12      HorizontalAlignment="Left"
13      Content="MyAnimatedTransform"
14      RenderTransformOrigin="0.5,0.5">
15      <Button.RenderTransform>
16        <RotateTransform x:Name="MyAnimatedTransform" />
17      </Button.RenderTransform>
18      <Button.Triggers>
19        <EventTrigger RoutedEvent="Button.Click">
20          <BeginStoryboard>
21            <Storyboard>
22              <DoubleAnimation
23                Storyboard.TargetName="MyAnimatedTransform"
24                Storyboard.TargetProperty="(RotateTransform.Angle)"
25                From="0.0"
26                To="360"
27                Duration="0:0:1" />
28            </Storyboard>
29          </BeginStoryboard>
30        </EventTrigger>
31      </Button.Triggers>
32    </Button>
33
34    <Button
35      HorizontalAlignment="Left"
36      Content="ResourceAnimatedTransform"
37      RenderTransform="{StaticResource ResourceAnimatedTransform}"
38      RenderTransformOrigin="0.5,0.5">
39      <Button.Triggers>
40        <EventTrigger RoutedEvent="Button.Click">
41          <BeginStoryboard>
42            <Storyboard>
43              <DoubleAnimation
44                Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
45                From="0.0"
46                To="360"
47                Duration="0:0:1" />
48            </Storyboard>
49          </BeginStoryboard>
50        </EventTrigger>
51      </Button.Triggers>
52    </Button>
53
54    <Rectangle
55      Width="50"
56      Height="50"
57      Fill="Red"
58      RenderTransform="{StaticResource ResourceAnimatedTransform}"
59      RenderTransformOrigin="0.5,0.5" />
60    <Rectangle
61      Width="50"
62      Height="100"
63      Fill="Green"
64      RenderTransform="{StaticResource ResourceAnimatedTransform}"
65      RenderTransformOrigin="0.5,0.5" />
66    <Ellipse
67      Width="80"
68      Height="50"
69      Fill="Blue"
70      RenderTransform="{StaticResource ResourceAnimatedTransform}"
71      RenderTransformOrigin="0.5,0.5" />
72  </StackPanel>
73</Window>

投稿2021/12/21 09:39

編集2023/07/29 13:05

TN8001

総合スコア9862

tails

2021/12/22 04:32

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

TN8001

2021/12/22 05:31

> - 質問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

2021/12/22 21:39

> > - 質問1の方の、そもそもなぜ私のプログラムの方では回転アニメーションしないのかを知りたいです。 > > （TargetNameでやっているものばかりで）Targetの例が全然ないので私もわかりません^^; そうですか…。分かりました。色々検索してみたんですけど、同じような質問があって、やはりリソースの RotateTransform を直接アニメーションさせようとしても機能しないっぽい感じですね。何かの UIElement の適当なプロパティに指定しておいて、そのプロパティ経由じゃないと、アニメーションできないみたいです。質問文に、そのパターンの解決策を追記しておきました。 > Rectangle（あるいは何か隠しエレメント等）に名前を付けてTargetNameに指定します。やはりそうなりますよね… UIElement のプロパティ経由ですね。ありがとうございました。何故駄目なのかは分かりませんでしたが、とりあえず解決策は分かりました！

行動規範の内容に同意します