C# WPF Storyboardでのメディアの再生について

前提

C# (WPF)に関する質問です。
StoryboardでMediaElementを再生させようとしました。
しかし再生されず、原因もわからないため質問しました。

試したこと

Appealを発火させれば、MediaElementも再生されると考えていましたが、されませんでした。
Storyboard内でmediaの再生をさせるにはどうすればいいでしょうか？

該当のソースコード

AnimationTest.xaml
1<Page x:Name="page" x:Class="Test.AnimationTest"
2      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
5      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
6      xmlns:gif="http://wpfanimatedgif.codeplex.com"
7      xmlns:local="clr-namespace:Test"
8      mc:Ignorable="d" 
9      Height="768" Width="1024"
10      Title="AnimationTest">
11    <Page.Resources>
12        <Storyboard x:Key="Fadein">
13            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CharaLayer"
14                                           Storyboard.TargetProperty="(UIElement.Opacity)">
15                <EasingDoubleKeyFrame  KeyTime="00:00:00" Value="0"/>
16                <EasingDoubleKeyFrame  KeyTime="00:00:01" Value="1">
17                    <EasingDoubleKeyFrame.EasingFunction>
18                        <QuarticEase EasingMode="EaseIn"/>
19                    </EasingDoubleKeyFrame.EasingFunction>
20                </EasingDoubleKeyFrame>
21            </DoubleAnimationUsingKeyFrames>
22        </Storyboard>
23        
24        <!--該当のStoryboard-->
25        <Storyboard x:Key="Appeal">
26            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="JudgeElement" Storyboard.TargetProperty="(UIElement.Opacity)">
27                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
28                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="0"/>
29                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="1"/>
30            </DoubleAnimationUsingKeyFrames>
31            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="JudgeElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
32                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="1.5"/>
33                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="1">
34                    <EasingDoubleKeyFrame.EasingFunction>
35                        <BackEase EasingMode="EaseIn"/>
36                    </EasingDoubleKeyFrame.EasingFunction>
37                </EasingDoubleKeyFrame>
38            </DoubleAnimationUsingKeyFrames>
39            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="JudgeElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
40                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="1.5"/>
41                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="1">
42                    <EasingDoubleKeyFrame.EasingFunction>
43                        <BackEase EasingMode="EaseIn"/>
44                    </EasingDoubleKeyFrame.EasingFunction>
45                </EasingDoubleKeyFrame>
46            </DoubleAnimationUsingKeyFrames>
47            <!-- 該当箇所 -->
48            <MediaTimeline Source="\resources\sound\correct.mp3" Storyboard.TargetName="media" BeginTime="00:00:02"/>
49        </Storyboard>
50    </Page.Resources>
51    <Grid>
52        </Canvas>
53        <!-- オブジェクトレイヤ -->
54        <Canvas x:Name="ObjectLayer" 
55                    Panel.ZIndex="4"
56                    d:Visibility="Visible"
57                    Height="768" Width="1024"  
58                    Background="Transparent">
59
60            <!-- エレメントレイヤ -->
61            <Canvas x:Name="ElementLayer">
62                <Image x:Name="JudgeElement"
63                       d:Visibility="Visible"
64                       Opacity="0"
65                       Height="349" Width="301" 
66                       Canvas.Left="374" Canvas.Top="284"
67                       RenderTransformOrigin="0.5,0.5">
68                    <Image.RenderTransform>
69                        <TransformGroup>
70                            <ScaleTransform/>
71                        </TransformGroup>
72                    </Image.RenderTransform>
73                </Image>
74            </Canvas>
75        </Canvas>
76
77        <!--キャラクターレイヤ-->
78        <Canvas x:Name="CharaLayer" 
79                d:Visibility="Visible"
80                Visibility="Hidden"
81                Height="768" Width="1024"  
82                Background="Transparent">
83            <Image x:Name="boy" 
84                  gif:ImageBehavior.AnimatedSource="\resources\fgimage\gif\speakBoy_close_.gif" 
85                   gif:ImageBehavior.AutoStart="False"
86                   Height="350" Canvas.Left="9" Canvas.Top="414" HorizontalAlignment="Center" VerticalAlignment="Top"/>
87            <Image x:Name="girl" 
88                   gif:ImageBehavior.AnimatedSource="/resources/fgimage/gif/SpeakGirl_close.gif"
89                   gif:ImageBehavior.AutoStart="False"
90                           Height="350" Canvas.Left="767" Canvas.Top="414" HorizontalAlignment="Left" VerticalAlignment="Center"/>
91        </Canvas>
92        <!--固定レイヤ-->
93        <Canvas x:Name="FixLayer" d:Visibility="Visible" Panel.ZIndex="5" Height="768" Width="1024" Background="Transparent">
94            <Button x:Name="TestButton"
95                    Background="LightGray"
96                    Content="Test"
97                    Height="100" Width="100" 
98                    Canvas.Left="638" Canvas.Top="163"
99                    Click="CorrectButton_Click"/>
100            <Button x:Name="SkipButton"
101                    Background="LightGray"
102                    Content="Skip"
103                    Height="100" Width="100" 
104                    Canvas.Left="778" Canvas.Top="163"
105                    Click="IncorrectButton_Click"
106                    HorizontalAlignment="Left" VerticalAlignment="Top" />
107            <Button x:Name="ResetButton"
108                Background="LightGray"
109                Content="Reset"
110                Height="100" Width="100" 
111                Canvas.Left="924" Canvas.Top="163"
112                Click="ResetButton_Click" HorizontalAlignment="Left" VerticalAlignment="Center" />
113            
114            <MediaElement x:Name="media"/>
115        </Canvas>
116    </Grid>
117</Page>
118

AnimationTest.xaml.cs
1using System;
2using System.Collections.Generic;
3using System.Text;
4using System.Windows;
5using System.Windows.Controls;
6using System.Windows.Data;
7using System.Windows.Documents;
8using System.Windows.Input;
9using System.Windows.Media;
10using System.Windows.Media.Animation;
11using System.Windows.Media.Imaging;
12using System.Windows.Navigation;
13using System.Windows.Shapes;
14
15namespace Test
16{
17    /// <summary>
18    /// AnimationTest.xaml の相互作用ロジック
19    /// </summary>
20    public partial class AnimationTest : Page
21    {
22        public AnimationTest()
23        {
24            InitializeComponent();
25        }
26
27		<!--Storyboard発火用ボタン-->
28        private void CorrectButton_Click(object sender, RoutedEventArgs e)
29        {
30            var source = new BitmapImage();
31            source.BeginInit();
32            source.UriSource = new Uri(@"resources\Image\element\circle.png", UriKind.Relative);
33            source.EndInit();
34            JudgeElement.Source= source;
35            AppealAnimation();
36        }
37
38        private void IncorrectButton_Click(object sender, RoutedEventArgs e)
39        {
40            var source = new BitmapImage();
41            source.BeginInit();
42            source.UriSource = new Uri(@"resources\Image\element\cross.png", UriKind.Relative);
43            source.EndInit();
44            JudgeElement.Source = source;
45            AppealAnimation();
46        }
47
48        private void ResetButton_Click(object sender, RoutedEventArgs e)
49        {
50            CharaLayer.Visibility = Visibility.Hidden;
51            JudgeElement.Visibility = Visibility.Hidden;
52        }
53        
54		public void AppealAnimation()
55        {
56            JudgeElement.Visibility = Visibility.Visible;
57            CharaLayer.Visibility = Visibility.Visible;
58            var charaSb = FindResource("Fadein") as Storyboard;
59            BeginStoryboard(charaSb);
60            var judgeSb = FindResource("Appeal") as Storyboard;
61            BeginStoryboard(judgeSb);
62        }
63    }
64}
65

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

Visual Studio 2022
C#10.0
WPF

TN8001

2023/01/23 11:01

Storyboard以前に、そもそもこれは鳴りますか？ <MediaElement x:Name="media" d:Source="" Source="\resources\sound\correct.mp3" /> Source=".\resources\sound\correct.mp3" こうとか Source="resources\sound\correct.mp3" こうではどうですか？ correct.mp3 のプロパティはどうなっていますか？（ビルドアクションや、出力ディレクトリにコピー）

Hottopia

2023/01/24 02:27

すみません、 <MediaElement x:Name="media" d:Source="" Source="\resources\sound\correct.mp3" /> では鳴りませんでした。 Storyboardの方を <Storyboard x:Key="Appeal"> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="JudgeElement" 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="JudgeElement" 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="JudgeElement" 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="resources\sound\correct.mp3" Storyboard.TargetName="media" BeginTime="00:00:02"/> </Storyboard> に修正したところ、解決しました。本当にありがとうございました。

TN8001

2023/01/24 04:25

> に修正したところ、解決しました。 \ がいっこ余計だったってことですね。お手数ですが自己回答していただいて、質問を「解決済」にしてください。 [ヘルプ｜質問をした後に自己解決してしまった](https://teratail.com/help#resolve-myself)

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

回答1件

自己解決

修正前
<MediaTimeline Source="\resources\sound\correct.mp3" Storyboard.TargetName="media" BeginTime="00:00:02"/>
修正後
<MediaTimeline Source="resources\sound\correct.mp3" Storyboard.TargetName="media" BeginTime="00:00:02"/>
Sourceプロパティの頭の \ が余計でした。凡ミスでした。
コメントくださった方ありがとうございました。

投稿2023/01/25 08:59

Hottopia

総合スコア16