How to make a XAML animation make the element disappear AFTER it has faded out

Question

Thanks to the answer on this stackoverflow question I was able to get the following animation to work, so that when the value of my ViewModel property PageToolBarVisible causes the toolbar to fade in and out.

The problem is:

the toolbar opacity fades out, but it the space it took up is still present after it fades out
the initial toolbar status is not in sync with the value of the ViewModel property

But how do I handle the following conditions, in XAML itself, if possible:

after the toolbar (Border) fades out, how do I then say "then and only then Visibility=Collapsed", (perhaps two animation happening at once or chained animations so visibile=collapsed happens after the first animation), edit: I since added the Trigger Opacity=0 below which works great
before the toolbar fades in, how do I say "Visibilty=Normal"
how do I also attach these events not only to the View Load process so that they show the correct status (faded in or faded out) when the page first appears?

Here is my animation so far:

    <Style x:Key="PageToolBarStyle" TargetType="Border">
        <Style.Triggers>
            <DataTrigger Binding="{Binding PageToolBarVisible}" Value="true">

                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetProperty="Opacity"
                                From="0.0" 
                                To="1.0" 
                                Duration="0:0:2"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>

                <DataTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetProperty="Opacity"
                                From="1.0" 
                                To="0.0" 
                                Duration="0:0:2"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.ExitActions>

            </DataTrigger>

            <Trigger Property="Opacity" Value="0">
                <Setter Property="Visibility" Value="Collapsed"/>
            </Trigger>

        </Style.Triggers>
    </Style>

<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <EventTrigger.Actions>
            ...how can I tell it here to "do the trigger logic contained in "PageToolBarStyle"...
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>

Chris Nicol Chris Nicol · Accepted Answer · 2009-07-07T12:57:08

You could create a trigger for the opacity on the element in question. Once that is "0" you can then set the Visibility of the element. This should handle both the first and second point from above.

As for the third point ... if I understand you correctly, then there's a FrameworkElement.Loaded event that you can use to solve the problem of the running the animation when the View is first loaded.

How to make a XAML animation make the element disappear AFTER it has faded out

1 Answers