WPF Animation Based on Grid Visibility

Question

I have a grid that starts collapsed. When the user clicks the button, the code behind sets visibility to to visible. Then the buttons XAML trigger makes the grid grow from 0 to 1925 over 3 seconds.

I was trying to figure out how in XAML to program the trigger to look for the visibility of the grid. Then depending on its state make the animation grow or shrink. So based on the code below I would like to make the grid go from 1925 to 0 if the trigger determines the visibility is visible and 0 to 1925 if the grid is showing collapsed upon button click. Want to stay away from the code knowing whats going on in the UI. Which is why later I will bind grid visibility to a property.

Main Components of the XAML

    <Grid Name="gridDisplay" Background="AliceBlue" Visibility="Collapsed">

    </Grid>



    <Button 
        Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
        Width="32" Height="32" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Right" Background="White" Click="Button_Click">
        &gt;

        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation 
                            Storyboard.TargetName="gridDisplay"
                            Storyboard.TargetProperty="Width"
                            From="0" To="1925" Duration="0:0:3" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>

Button Event

        //TODO: Bind grid to visibility property
        if (gridDisplay.Visibility == System.Windows.Visibility.Collapsed)
        {
            gridDisplay.Visibility = System.Windows.Visibility.Visible;
            (sender as Button).Content = "<";
        }
        else
        {
            gridDisplay.Visibility = System.Windows.Visibility.Collapsed;
            (sender as Button).Content = ">";
        }

Answer 1

Instead of using the triggers you can make a animation like this.

xaml :

  <Window.Resources>
        <Storyboard x:Key="open">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="gridDisplay">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="900"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="gridDisplay">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="close">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="gridDisplay">
                <EasingDoubleKeyFrame KeyTime="0" Value="900"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="gridDisplay">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="{x:Static Visibility.Collapsed}"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

buton event :

//TODO: Bind grid to visibility property
            if (gridDisplay.Visibility == System.Windows.Visibility.Collapsed)
            {
                var storyboard = this.Resources["open"] as Storyboard;
                storyboard.Begin();
                (sender as Button).Content = "<";
            }
            else
            {
                var storyboard = this.Resources["close"] as Storyboard;
                storyboard.Begin();
                (sender as Button).Content = ">";
            }

I hope this will help you. If you want to have a visible property you can have this:

private bool _visibleProp;
public bool VisibleProp{get{return _visibleProp;} 
    set{_visibleProp = value; 
        if(value){var storyboard = this.Resources["open"] as Storyboard;
                storyboard.Begin(); }
        else{var storyboard = this.Resources["close"] as Storyboard;
                storyboard.Begin();}
          }}