Conflict When Two Storyboards Sets the Opacity Property?

Question

Hi,

Background:

I have a WPF UserControl (MainControl - not shown in code below) that contains another one (called MyControl in the code below).

MainControl has it's DataContext set to an object, that has a Project-property. When MainControl loads, the Project-property is always null.

The problem:

When MainControl loads, I want to fade in the MyControl using a special storyboard (only used this one time (this "specialFadeInStoryboard" changes Opacity-property of MyControl from 0 to 1).

When the Project-property is set to a value other than null, I want the MyControl to fade out using the "fadeOutStoryboard" (changes Opacity-property of MyControl to 0) and if it's set to null afterwards I want to fade it in again this time using the "fadeInStoryboard" (changes Opacity-property of MyControl to 1).

However, after adding the code for the "specialFadeInStoryboard", the MyControl is never faded out...

What am I doing wrong?

<local:MyControl Visibility="{Binding RelativeSource={RelativeSource Self}, Path=Opacity, Converter={StaticResource opacityToVisibilityConverter}, Mode=OneWay}">
    <local:MyControl.Style>
        <Style>
            <Style.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard Storyboard="{StaticResource specialFadeInStoryboard}"/>
                </EventTrigger>
                <DataTrigger Binding="{Binding Project, Converter={StaticResource nullToBooleanConverter}, Mode=OneWay}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource fadeOutStoryboard}"/>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard Storyboard="{StaticResource fadeInStoryboard}"/>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </local:MyControl.Style>
</local:MyControl>

Answer 1

You might need to stop the specialFadeInStoryboard before the other fading storyboards begin running. You can do that with something like this:

<DataTrigger.EnterActions>
    <StopStoryboard BeginStoryboardName="specialFadeInStoryboard"/>
    <BeginStoryboard Storyboard="{StaticResource fadeOutStoryboard}"/>
</DataTrigger.EnterActions>