WPF: How can I animate the visibility of a dock panel and bind it so its state gets saved?

Question

I'm relatively new to WPF and data binding, animation, etc., so bear that in mind there.

I have the following XAML:

<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <DockPanel x:Name="MagnificationBar" Margin="20,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DockPanel.Dock="Top">
        <DockPanel.Style>
            <Style TargetType="DockPanel">
                <Setter Property="Visibility" Value="Visible" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, ElementName=MagCheckBox}" Value="True">
                        <Setter Property="Visibility" Value="Collapsed" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </DockPanel.Style>
        <StackPanel Margin="10,0,0,0" Orientation="Horizontal" DockPanel.Dock="Bottom">
            <CheckBox x:Name="MagCheckBox" VerticalAlignment="Center" IsChecked="{Binding UserData.HideMagnificationBar, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                <CheckBox.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation AccelerationRatio=".8" Storyboard.TargetName="MagnificationBar" Storyboard.TargetProperty="Height" From="{Binding ElementName=MagnificationBar, Path=ActualHeight}" To="0" Duration="0:0:0.3"/>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MagnificationBar" >
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static Visibility.Collapsed}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </CheckBox.Triggers>
            </CheckBox>
       ....

So here is my question... I want the "MagnificationBar" dock panel at the top to be visible depending on whether a checkbox is checked, and I want that checkbox's value is bound to a model called UserData. All of that works just fine.

But I also want the dock panel to animate when it dissapears (when the checkbox is checked).

The problem is that if I bind the panel's visibility directly to the checkbox (so that the panel is not visible when the app loads the UserData from disk and populates the checkbox), then that overrides the animation, and makes the panel disappear instantly when the checkbox is checked, rather than "animating away".

I tried moving the checkbox binding down into the animation, but WPF doesn't seem to like that.

Any suggestions for how to both animate an element's visibility AND bind its visibility so it is persistent?

Thanks! -Jesse

Answer 1

Don't bind the Visibility property to the Checkbox.IsChecked property. Instead, bind it to a bool property using a BooleanToVisibilityConverter and bind the Checkbox.IsChecked property to another bool property.

As the Checkbox is checked, the first property will change and at that point, you can start your closing animation. By adding a Timeline.Completed event handler to your closing Storyboard , you can then set your second bool variable to false to set the Visibility to Collapsed as soon as the animation ends.

Answer 2

Remove the dockpanel's Style for I believe they are conflicting. It doesn't need to have a style setting its visibility to Collapsed if that is already done by the check box. Start the control out as Collapsed and unhide if necessary after the data load.

So when the check box is selected it will disappear and at the end the storyboard will make it hidden.