WPF: The event 'Completed' cannot be specified on a Target tag in a Style. Use an EventSetter instead

Question

I'm trying to run some code when a story board is finished but can't seem to find how to set that up... If I simply do

Completed="LoadingStoryBoard_Completed"

On the Storyboard element I get the error "The event 'Completed' cannot be specified on a Target tag in a Style. Use an EventSetter instead." But struggle to find good references on how to use an event setter.

Xaml code looks like this(it's structured like this to allow it to start when the Image is visible)

<Window.Resources>
    <Style x:Key="AnimationImageStyle" TargetType="{x:Type Image}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=IsVisible}" 
             Value="True">

                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard Name="LoadingStoryBoard"  >

                            <!-- -->
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source"
                                               Duration="0:0:4">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <BitmapImage UriSource="C:\...\2a-loading.jpg"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                                <DiscreteObjectKeyFrame KeyTime="0:0:1">
                                    <DiscreteObjectKeyFrame.Value>
                                        <BitmapImage UriSource="C:\...\2b-loading.jpg"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                                <DiscreteObjectKeyFrame KeyTime="0:0:2">
                                    <DiscreteObjectKeyFrame.Value>
                                        <BitmapImage UriSource="C:\...\2c-loading.jpg"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                                <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                    <DiscreteObjectKeyFrame.Value>
                                        <BitmapImage UriSource="C:\...\2d-loading.jpg"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>


<Grid Name="GridLoading" Visibility="Hidden" >

        <Image Style="{StaticResource AnimationImageStyle}" >
        </Image>

</Grid>

All tips greatly appreciated

Answer 1

Get out your Storyboard from Style and define it standalone.

<Storyboard x:Key="SbImgKey">

            <!-- -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source"
                                               Duration="0:0:4" Completed="ObjectAnimationUsingKeyFrames_Completed_1">
                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                    <DiscreteObjectKeyFrame.Value>
                        <BitmapImage UriSource="C:\Users\Anjum\Pictures\copy\koala.jpg"/>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1">
                    <DiscreteObjectKeyFrame.Value>
                        <BitmapImage UriSource="C:\Users\Anjum\Pictures\copy\desert.jpg"/>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:2">
                    <DiscreteObjectKeyFrame.Value>
                        <BitmapImage UriSource="C:\Users\Anjum\Pictures\copy\tulips.jpg"/>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>

Use it now

<Style x:Key="AnimationImageStyle" TargetType="{x:Type Image}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=IsVisible}" 
             Value="True">

                    <DataTrigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource SbImgKey}"/>                          
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>

Answer 2

I'm not sure, but you can try this:

<Grid Name="GridLoading" Visibility="Hidden" >
        <Image Name="MyImage">
        <Image.Resources> 
         <Storyboard Name="LoadingStoryBoard" 
                    Completed="LoadingStoryBoard_Completed">
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source"
                                               Duration="0:0:4">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <BitmapImage UriSource="C:\...\2a-loading.jpg"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                                <DiscreteObjectKeyFrame KeyTime="0:0:1">
                                    <DiscreteObjectKeyFrame.Value>
                                        <BitmapImage UriSource="C:\...\2b-loading.jpg"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                                <DiscreteObjectKeyFrame KeyTime="0:0:2">
                                    <DiscreteObjectKeyFrame.Value>
                                        <BitmapImage UriSource="C:\...\2c-loading.jpg"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                                <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                    <DiscreteObjectKeyFrame.Value>
                                        <BitmapImage UriSource="C:\...\2d-loading.jpg"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
        </Image.Resources>
         <Image.Style>
        <Style>
            <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=IsVisible}" 
                         Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <StaticResource ResourceKey="LoadingStoryBoard"/>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
        </Style>
      </Image.Style>
    </Image>
</Grid>