Storyboard Completed Event from Style?

Question

I'm new to Storyboard animations but I think this might be a problem I can't workaround the easy way. Nevertheless I try my luck here, maybe some of you guys know how to help me.

My Scenario : I want to show a popup in my Application that has a fadein effect. I also want to do this via MVVM so my control that wraps the fadein effect and the popup should no use codebehind and my application should just need to reset the datacontext of this control to a new viewmodel to show a new message.

My Problem is that I cannot determine when the animation is finished because I need to set the fadein Animation in the style.

My XAML looks like this :

<UserControl.Resources>

    <Style x:Key="popupStyle" TargetType="{x:Type Border}" >
        <Style.Triggers>
            <Trigger Property="Visibility" Value="Visible">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard x:Name="FadingStoryBoard">
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.05" To="1" BeginTime="0:0:1"  Duration="0:0:2.5" >
                                <DoubleAnimation.EasingFunction>
                                    <ExponentialEase Exponent="5" EasingMode="EaseIn" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" BeginTime="0:0:6"  Duration="0:0:8.5" >
                                <DoubleAnimation.EasingFunction>
                                    <ExponentialEase Exponent="15" EasingMode="EaseOut" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

<Popup Name="Popup" IsOpen="{Binding IsVisible}" Height="{Binding PopupHeight}" Width="{Binding PopupWidth}" VerticalOffset="{Binding PopupVerticalOffset}" HorizontalOffset="{Binding PopupHorizontalOffset}" PopupAnimation="Fade" AllowsTransparency="True">
    <Border Style="{StaticResource popupStyle}" Name="PopupContent" Padding="1" BorderBrush="#000000" Background="AliceBlue" CornerRadius="5" BorderThickness="3,3,3,3">
        <!-- Events -->
        <interact:Interaction.Triggers>
            <interact:EventTrigger EventName="PreviewMouseDown">
                <cmd:EventToCommand Command="{Binding Path=PopupMouseDownCommand}" PassEventArgsToCommand="True" />
            </interact:EventTrigger>
        </interact:Interaction.Triggers>

        <DockPanel Name="ContentContainer" Background="Black" LastChildFill="True">
            <Image Source="{Binding MessageIcon}" DockPanel.Dock="Left" Margin="5,0,5,0" Width="32" Height="32" />
            <StackPanel Background="Transparent" DockPanel.Dock="Right" Margin="3">
                <TextBlock  Name="PopupHeaderTextBlock" Margin="0,3,0,5" TextWrapping="Wrap" FontSize="10" Text="{Binding PopupHeaderText}"  Foreground="White"  Background="Transparent" />
                <TextBlock Name="PopupTextBlock" Text="{Binding PopupText}" TextWrapping="Wrap" FontSize="10" Foreground="White" Background="Transparent" />
            </StackPanel>
        </DockPanel>
    </Border>
</Popup>

Anyone any ideas how I can get a notification in my ViewModel when the Storyboard has finished ?

Answer 1

You can handle the Completed event on the storyboard. Documentation Here: http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.completed.aspx

Here's the code to attach the event from the codebehind: call from the constructor:

private void AttachToCompletedEvent()
{
    Style popupStyle = Resources["popupStyle"];
    TriggerBase trigger = popupStyle.Triggers[0];
    BeginStoryboard action = trigger.EnterActions[0] as BeginStoryboard;
    Storyboard storyboard = action.Storyboard;
    storyboard.Completed += CompletedEventHandler;
}

I think that should work for the code you provided.