C# WPF ResourceDictionaryに登録されたStoryboardのイベントが発生しない

Question

前提

C# (WPF)に関する質問です。
ResourceDictionaryに定義したStoryboardのComletedイベントを受け取って処理をしたく、以下のようなコードを組みました。
しかしイベントが発生せず、原因がわからないため質問しました。

該当のソースコード

namespace Sample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            var sb = FindResource("SampleStoryboard") as Storyboard;
            sb.Completed += Sb_Completed;
            BeginStoryboard(sb);
        }

        private void Sb_Completed(object sender, EventArgs e)
        {
            Debug.WriteLine("イベント発生");
        }

    }
}

<Window x:Class="Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:gif="http://wpfanimatedgif.codeplex.com"
        xmlns:local="clr-namespace:Sample"
        mc:Ignorable="d"
        Title="MainWindow" Height="768" Width="1024">

    <Window.Background>
        <ImageBrush ImageSource="/resources/bgimage/bgImage1.jpg" />
    </Window.Background>
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="AnimationDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="SampleDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Canvas>
            <MediaElement x:Name = "media"/>
            <Canvas x:Name="ObjectLayer">
                <Image x:Name="Object"
                       Source="object.png"
                           Height="349" Width="301" 
                           Canvas.Left="374" Canvas.Top="284"
                           RenderTransformOrigin="0.5,0.5">
                    <Image.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>
            </Canvas>

            <Canvas x:Name="CharaLayer" 
                    d:Visibility="Visible" 
                    Height="768" Width="1024"  
                    Background="Transparent">
                <Image x:Name="Char1" 
                  Source="char1.png" 
                           Height="350" Canvas.Left="9" Canvas.Top="414" HorizontalAlignment="Center" VerticalAlignment="Top"/>
                <Image x:Name="Char2" 
                   Source="char2.png" 
                           Height="350" Canvas.Left="767" Canvas.Top="414" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            </Canvas>
    </Canvas>
</Window>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Storyboard x:Key="SampleStoryboard">
        <!-- Objectに画像をセット -->
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Object" Storyboard.TargetProperty="Source">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="image.png"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        
        <!-- キャラクターフェードイン -->
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CharaLayer" Storyboard.TargetProperty="Visibility"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CharaLayer"
                                           Storyboard.TargetProperty="(UIElement.Opacity)">
            <EasingDoubleKeyFrame  KeyTime="00:00:00" Value="0"/>
            <EasingDoubleKeyFrame  KeyTime="00:00:01" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <QuarticEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        
        <!-- Objectのアピールイン -->
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Object" Storyboard.TargetProperty="(UIElement.Opacity)">
            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="00:00:02" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Object" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
            <EasingDoubleKeyFrame KeyTime="00:00:02" Value="1.5"/>
            <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BackEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Object" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
            <EasingDoubleKeyFrame KeyTime="00:00:02" Value="1.5"/>
            <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BackEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <!-- 効果音・会話 -->
        <MediaTimeline Source="se.mp3" Storyboard.TargetName="media" BeginTime="00:00:02"/>
    </Storyboard>

</ResourceDictionary>

補足情報（FW/ツールのバージョンなど）

Visual Studio 2022
C#10.0
WPF

###追記
コメントで教えていただいた、クローンを使う方法を試しました。
結果、以下の例外が発生しました。

System.InvalidOperationException:
'名前 'Object' を解決するために適用できる名前スコープがありません。'

Storyboard中で、Imageコントロール"Object"を操作しており、Cloneしたインスタンスからコントロールのプロパティを変更しようとするのがまずいのかと考えておりますが、はっきりとはしておらず調査中です。

namespace Sample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            <!-- 変更箇所 -->
            var sb = (FindResource("SampleStoryboard") as Storyboard).Clone();
            <!-- 変更ここまで -->
            sb.Completed += SampleSb_Completed;
            sb.Begin();
        }

        private void SampleSb_Completed(object? sender, EventArgs e)
        {
            <!-- イベント発生時の処理 -->
        }
    }
}

Comments

[TN8001]

未確認ですがこれですかね？（例外が出るって書いてるけど...
[c# - Object from External ResourceDictionary - Stack Overflow](https://stackoverflow.com/questions/5301553/object-from-external-resourcedictionary)

[TN8001]

ResourceDictionaryのStoryboardでTargetNameがあるということですか？
Cloneする前はStoryboard自体は動いていたということですか？

> Storyboard中で、Imageコントロール"Object"を操作

<Image x:Name="Object" /> に依存するStoryboardをResourceDictionaryに切り出す意味はなんでしょう？（Resourcesの肥大化回避？）

なんとなくXY問題な気もします。
[XY問題 - Google 検索](https://www.google.co.jp/search?q=XY%E5%95%8F%E9%A1%8C)

スタイルとかテンプレートのレベルでResourceDictionary化できないでしょうかね？

[hqf00342]

Storyboardを以下のコードで試したところ `Completed`イベントは発生しましたが(.NET7, .NET Framework4.8とも)
記載されていないストーリーボード内のアニメーションは終了するようなコードなのでしょうか？ `RepeatBehavior="Forever"`のように終了しないアニメーションだと`Completed`イベントは発生しないのではないかと思います。

```xml
<Storyboard x:Key="SampleStoryboard">
<DoubleAnimation Storyboard.TargetName="Object"
Storyboard.TargetProperty="Width"
From="100" To="200"
Duration="0:0:3"/>
</Storyboard>
```

[TN8001]

手元でもざっと確認しました。

>> ResourceDictionaryのStoryboardでTargetNameがあるということですか？
>> Cloneする前はStoryboard自体は動いていたということですか？

MergedDictionariesだと名前が引けないのかと思いましたが、普通に動くしCompletedも来ますね。

> 結果、以下の例外が発生しました。

確かにClone後はInvalidOperationExceptionでした。
Storyboard.SetTarget(sb, Object); を入れれば動きました（が、Clone意味ないですね^^;

> Storyboardを以下のコードで試したところ `Completed`イベントは発生しました

こちらでも確認できました。
結局当該StoryboardでForeverにしていたということですか？（ResourceDictionaryは何の関係もなく、Foreverでなければ元のコードのままでCompletedが来たということ）

> 記載されていないストーリーボード内のアニメーションは終了するようなコードなのでしょうか？

どういう意味ですか？？

> `RepeatBehavior="Forever"`のように終了しないアニメーションだと`Completed`イベントは発生しないのではないかと思います。

そりゃそうでしょうねぇ。厳密に確認したわけではないですが...（接続を切ったりしたときの動作等）

となると本質問は「ForeverのままCompletedが来てほしい」ということになるのですか？（だとしたら私は撤退させていただきます^^;

[Hottopia]

@TN8001さん

>ResourceDictionaryのStoryboardでTargetNameがあるということですか？
>Cloneする前はStoryboard自体は動いていたということですか？

そのとおりです。

><Image x:Name="Object" /> に依存するStoryboardをResourceDictionaryに切り出す意味はなんでしょう？（Resourcesの肥大化回避？）

これに関してもその通りで、Window.Resourceの行数が多くなるのを嫌がってDictionaryに移しました。
Dictionaryの使い方としては間違っていたかもしれません。

[Hottopia]

@hqf00342さん

>記載されていないストーリーボード内のアニメーションは終了するようなコードなのでしょうか？ >`RepeatBehavior="Forever"`のように終了しないアニメーションだと`Completed`イベントは発生し>ないのではないかと思います。

RepeatBehavior = Forever には設定しておりません。
サンプルコードのご提示ありがとうございます。検証してみます。

一応、Storyboardの詳細なコードを追記します。

[Hottopia]

@TN8001さん

><Image x:Name="Object" /> に依存するStoryboardをResourceDictionaryに切り出す意味はなんでしょう？（Resourcesの肥大化回避？）

今回のように特定のものに依存するStoryboardを作成したい場合、Dictionaryにまとめるのは良い方法ではなさそうなのはなんとなくわかりました。

しかしWindow.Resource部分に記述するのも見通しが悪くなるため、あまりやりたくはありません。

なにか適している方法等はありますか？( #region 等で折りたたむとかでしょうか…)

[TN8001]

hqf00342さんのコメントをHottopiaさんだと勘違いしていました。すいません。

> これに関してもその通りで、Window.Resourceの行数が多くなるのを嫌がってDictionaryに移しました。

「もとはWindow.Resourcesにあったもの（当然予定通り動いていた）を、コード整理のためResourceDictionaryに切り出したらエラーはなくStoryboardも動くのに（C#で追加したはずの）Comletedが来なくなった」ってことですよね？

> 一応、Storyboardの詳細なコードを追記します。

「Comletedだけが来ない」というのが再現できません。
Window.Resourcesに直接書いたStoryboardが動いてComleted（xamlで書いてもC#で追加しても）が来るなら、
ResourceDictionaryに書いたStoryboardも動いてComleted（C#で追加した）が来ました。

「Page_Loaded」ということは、本来はPageにあるんでしょうか？
なんとなく「実はエラーが出てる（からComletedまでいかない）けど、誰かがそのエラーを飲み込んじゃってる」みたいな状況なんじゃ？って気がします。
テスト用にできるだけシンプルなStoryboardに削っていくと犯人がわかるかもしれません。

> Dictionaryの使い方としては間違っていたかもしれません。

間違っているかどうかはわかりませんが、あまり見ない使い方ではあるとは思います。
MergedDictionariesは「そこに展開する」動作のようですから、提示のようなStoryboardならありな気はします。

[hqf00342]

> Hottopia さん
Storyboard見ました。
Storyboard内最後にある<MediaTimeline>を使ってCompletedイベントを取得したことがないのですがこの<MediaTimeline>をコメントアウトするとどうでしょうか？

[Hottopia]

@TN8001さん

>Window.Resourcesに直接書いたStoryboardが動いてComleted（xamlで書いてもC#で追加しても）が来るなら、ResourceDictionaryに書いたStoryboardも動いてComleted（C#で追加した）が来ました。

もともと最初からDictionaryに記述しており、Storyboardも正常に動作していました。
hqf00342さんがコメントされた、<MediaTimeline...>をコメントアウトしたところ、
Completedイベントが発生しました。

質問のソースコードに漏れがありました。
MainWindow.xaml中にMediaElementが配置されていて、StoryboardでSourceをセットした後、再生する部分が抜け落ちておりましたため、質問のソースコードを修正しました。

[Hottopia]

@hqf00342さん

>Storyboard内最後にある<MediaTimeline>を使ってCompletedイベントを取得したことがないのですがこの<MediaTimeline>をコメントアウトするとどうでしょうか？

MediaTimelineをコメントアウトしたところ、Completedイベントが発生しました。
MainWindow.xaml中にMediaElementが配置しているのですが、質問のソースコードでは抜けてましたため、修正しました。

[Hottopia]

StoryboardのMediaTimelineをコメントアウトしたところ、Completedイベントが発生しました。
しかしMediaTimelineの部分もできれば組み込みたく、現在検証中です。

[hqf00342]

すみません、私もお名前間違えていました。

ちょっとテストしてみたら以下の2つの方法でうまくいくようにも見えました。

・<MediaTimeline Duration="00:00:01">としてDurationでmp3再生を短めに終わらせる
・mp3再生より長いアニメーションを組み込む。例えば以下をStoryboardに追加
　<DoubleAnimation Storyboard.TargetName="Object" Storyboard.TargetProperty="(Canvas.Left)" By="0" Duration="0:0:10" />

不思議ですね。
MediaElement周りは私も知見がないのでテストして頑張ってみてください。

[TN8001]

@Hottopiaさん
> StoryboardのMediaTimelineをコメントアウトしたところ、Completedイベントが発生しました。

@hqf00342さん
> ちょっとテストしてみたら以下の2つの方法でうまくいくようにも見えました。

「音がほかのアニメより長かった」ということなんですね。難しいｗ

SlipBehavior="Slip"にすると、Completedが来るようになりました。
[ParallelTimeline.SlipBehavior プロパティ (System.Windows.Media.Animation) | Microsoft Learn](https://learn.microsoft.com/ja-jp/dotnet/api/system.windows.media.animation.paralleltimeline.slipbehavior)

音とアニメがあっていたほうがよさそうですが、ラグがあるようにも見えてしまいそうですし調整は必要かもしれません。

[hqf00342]

@TN8001さん
メディア再生とアニメの同期の問題ならおっしゃる通り SlipBehavior を使うのが正解ですね。
WPF久しぶりで懐かしかったのとメディア再生込みのアニメーションは作ってこなかったので私も勉強になりました。

[Hottopia]

@TN8001さん
@hqf00342さん

StoryboardのDurationをメディアの再生時間より長く設定したら、Completedイベントが発生し、やりたい動きになりました。こんな苦戦するとは思いませんでした。ありがとうございました。

[hqf00342]

@Hottopiaさん
うまくいったようでよかったです。MS公式的にはSlipBehaviorつけるのが正解のようです。
質問を閉じるために一応回答を書いておきます。

[Hottopia]

@TN8001さん
@hqf00342さん

お二人とも本当にありがとうございました。
メディア周りを疑うきっかけとなったコメントを下さったこともあり、hqf00342さんの回答をベストアンサーとさせていただきたいと思います。

Answer 1

質問で議論されたように、Completedイベントが飛ばないのは今回はStoryboard内のアニメーションとmp3再生の同期が問題のようです。

ですので 手動でアニメーションの長さとmp3再生時間を調整するか、SlipBehavior="Slip" を使うとWPF内で調整されて Completed イベントが発生すると思います。

<Storyboard x:Key="SampleStoryboard" SlipBehavior="Slip">

MS公式ドキュメントは 質問内の＠TN8001さんのコメントを確認してください。