WPF Animation starts but shows too late

Question

I am building some WPF controls using .Net 4.0. One of these controls, called LoadingPane, is a custom control derived from ContentControl. The only job of this LoadingPane control is to show a semi-transparent layer over it's contained content when it's IsLoading property is set to true. I use some animations to do fade-in, fade-out when the IsLoading value changes. When the overlay is shown an animation rotates a circle of elipses.

So far, so good. This all works very nicely. But here's my problem: when i set the Loading property to true the animation isn't shown directly. It takes about half a second. In this time the fade-in animation has already run, so the opacity effectively goes from 0 to 1 in one step.

Here's my animation code:

<ControlTemplate.Triggers>
    <Trigger Property="IsLoading"
             Value="True">
        <Trigger.EnterActions>
            <RemoveStoryboard BeginStoryboardName="EndAnimateLoadingCanvas" />
            <BeginStoryboard Name="AnimateLoadingCanvas">
                <Storyboard FillBehavior="Stop">
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
                                                   Storyboard.TargetName="MyViewBoxje"
                                                   Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>

                    <DoubleAnimation BeginTime="00:00:00"
                                     Duration="00:00:00.5"
                                     Storyboard.TargetName="MyViewBoxje"
                                     Storyboard.TargetProperty="Opacity"
                                     To="1" />

                    <DoubleAnimation BeginTime="00:00:00"
                                     Duration="00:00:02"
                                     Storyboard.TargetName="AnimatedRotateTransform"
                                     Storyboard.TargetProperty="Angle"
                                     From="360"
                                     To="0"
                                     RepeatBehavior="Forever" />

                </Storyboard>
            </BeginStoryboard>
        </Trigger.EnterActions>
        <Trigger.ExitActions>
            <RemoveStoryboard BeginStoryboardName="AnimateLoadingCanvas" />
            <BeginStoryboard Name="EndAnimateLoadingCanvas">
                <Storyboard FillBehavior="Stop">
                    <DoubleAnimation BeginTime="00:00:00"
                                     Duration="00:00:00.5"
                                     Storyboard.TargetName="MyViewBoxje"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0" />
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00.5"
                                                   Storyboard.TargetName="MyViewBoxje"
                                                   Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
                    </ObjectAnimationUsingKeyFrames>

                </Storyboard>
            </BeginStoryboard>
        </Trigger.ExitActions>
    </Trigger>
</ControlTemplate.Triggers>

The strange thing is, when i use this control in a test window and i click the Loading checkbox repeatedly (and before the animation has finished) then the fade-in/fade-out animation does work as i expect it to work.

Can anyone help? Thanx in advance!

Answer 1

It's hard to see exactly what the problem is without seeing the rest of the code but my guess is that it has to do with the start values of the animated properties.

I implemented a custom control in WPF with a rectangle inside a viewbox and used the triggers + storyboards from the question to see the effect. Indeed, my first attempt did not fade in nor fade out.

What I did to solve it was by specifying From values in the animations so that they work regardless of what the original value of the DP's were:

<DoubleAnimation BeginTime="00:00:00"
      Duration="00:00:00.5"
      Storyboard.TargetName="MyViewBoxje"
      Storyboard.TargetProperty="Opacity"
      From="0"
      To="1" />

Notice From="0" in the above animation. The end storyboard was modified the same way, to go from 1 to 0.

For completeness I set the opacity to 0 on the definition of the viewbox element inside the ControlTemplate as well.

---

Here is the complete source code for the relevant parts. The control is a standard WPF custom control inheriting from Control. It has a single dependency property called IsLoading (bool) which defaults to false:

public bool IsLoading
{
    get { return (bool)GetValue(IsLoadingProperty); }
    set { SetValue(IsLoadingProperty, value); }
}

// Using a DependencyProperty as the backing store for IsLoading.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsLoadingProperty =
        DependencyProperty.Register("IsLoading", typeof(bool), typeof(LoadingControl), new UIPropertyMetadata(false));

ControlTemplate - Defined in generic.xaml in the style for {x:Type local:LoadingControl}

<ControlTemplate TargetType="{x:Type local:LoadingControl}">
    <ControlTemplate.Triggers>
        <Trigger Property="IsLoading" Value="True">
            <Trigger.EnterActions>
                <RemoveStoryboard BeginStoryboardName="EndAnimateLoadingCanvas" />
                <BeginStoryboard Name="AnimateLoadingCanvas">
                    <Storyboard FillBehavior="Stop">
                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
                                   Storyboard.TargetName="MyViewBoxje"
                                   Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>

                        <DoubleAnimation BeginTime="00:00:00"
                                     Duration="00:00:00.5"
                                     Storyboard.TargetName="MyViewBoxje"
                                     Storyboard.TargetProperty="Opacity"
                                     From="0"
                                     To="1" />

                        <DoubleAnimation BeginTime="00:00:00"
                                         Duration="00:00:02"
                                         Storyboard.TargetName="AnimatedRotateTransform"
                                         Storyboard.TargetProperty="Angle"
                                         From="360"
                                         To="0"
                                         RepeatBehavior="Forever" />

                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <RemoveStoryboard BeginStoryboardName="AnimateLoadingCanvas" />
                <BeginStoryboard Name="EndAnimateLoadingCanvas">
                    <Storyboard FillBehavior="Stop">
                        <DoubleAnimation BeginTime="00:00:00"
                                         Duration="00:00:00.5"
                                         Storyboard.TargetName="MyViewBoxje"
                                         Storyboard.TargetProperty="Opacity"
                                         From="1"
                                        To="0" />
                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00.5"
                                   Storyboard.TargetName="MyViewBoxje"
                                   Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </ControlTemplate.Triggers>

    <Border Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
        <Viewbox x:Name="MyViewBoxje" Opacity="0">
            <!-- BG with 0x50 alpha so that it's translucent event at 100% visibility -->
            <Grid Width="100" Height="100" Background="#50000000">
                <Rectangle Width="70" Height="20" Fill="Green" Stroke="Black" StrokeThickness="2" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="360" x:Name="AnimatedRotateTransform" />
                    </Rectangle.RenderTransform>
                </Rectangle>
            </Grid>
        </Viewbox>
    </Border>
</ControlTemplate>

I used in my main window like so:

<Grid x:Name="LayoutRoot">
    <!-- All other stuff here ... -->

    <my:LoadingControl IsLoading="{Binding IsLoading}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>

And to test it I had a ViewModel with a property IsLoading that is set as DataContext for the main window. And in the constructor of the ViewModel I set IsLoading to true and then start a timer that toggles the value of the property every 5 seconds:

public MainWindowViewModel()
{
    IsLoading = true;
    DispatcherTimer t = new DispatcherTimer();
    t.Interval = TimeSpan.FromSeconds(5);
    t.Tick += (s, e) => IsLoading = !IsLoading;
    t.Start();
}