C# UWP XAML Animations

Question

I have a Page with a Grid containing two columns, the first contains a button which toggles the visibility of the second (via a ViewModel binding). How can I add an animation for showing/hiding the second column (with Pivot as content) to this scenario?

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0">
        <Button Command="{Binding TogglePivot}"/>
    </Grid>

    <Pivot x:Name="Content_Pivot" Grid.Column="1">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <!-- Hidden state -->
                <VisualState x:Name="Hidden">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content_Pivot" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- Visible state -->
                <VisualState x:Name="Visible">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content_Pivot" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="600"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <interactivity:Interaction.Behaviors>
            <!-- Show -->
            <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="True">
                <core:GoToStateAction StateName="Visible"/>
            </core:DataTriggerBehavior>

            <!-- Hide -->
            <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="False">
                <core:GoToStateAction StateName="Hidden" />
            </core:DataTriggerBehavior>
        </interactivity:Interaction.Behaviors>

        <!-- Content.. -->
    </Pivot>
</Grid>

The above works fine, but only on the first toggle of the visibility of the Pivot. Subsequent toggles do not show the animation..

Any easy way of achieving this without manually invoking Storyboards?

Thanks.

==EDIT==

I made some changes to above code (namely, added VisualStates and DataTriggerBehaviour).

Still can't get it to work... Any ideas?

Corcus Corcus · Accepted Answer · 2015-09-04T09:46:36

In a similar scenario what I did was not toggle the visibility of the pivot but rather the width of the grid column (or the pivot). After all a pivot with zero width is invisible. Plus from what I can see in your code the size of the second column is set to 300 so the target width for the animation won't be a problem.

My suggestion is to create two storyboards in xaml targeting the width of the pivot. The first would expand it and the second would collapse it. Then use DataTriggerBehavior bound to the TogglePivot to trigger the storyboards. This way the xaml is still clean and no code is required.

If you try it and can't get it right I can provide some sample code.

Edit: You got the idea a little bit wrong. This is what worked for me.

xmlns:media="using:Microsoft.Xaml.Interactions.Media"
<Page.Resources>

    <Storyboard x:Name="PaneStoryboard">
        <DoubleAnimation Duration="0:0:1" To="300" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Content_Pivot" EnableDependentAnimation="True"/>
    </Storyboard>

    <Storyboard x:Name="CloseStoryboard">
        <DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Content_Pivot" EnableDependentAnimation="True"/>
    </Storyboard>

</Page.Resources>

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0">                
            <Button Content="Opend and Close" Command="{Binding TogglePivot}" />
        </Grid>

        <Pivot x:Name="Content_Pivot" Grid.Column="1" Width="300" Background="Blue">

            <interactivity:Interaction.Behaviors>

             <!--Show--> 

                <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="True">
                    <media:ControlStoryboardAction Storyboard="{StaticResource PaneStoryboard}"/>
                </core:DataTriggerBehavior>


             <!--Hide-->

                <core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="False">
                    <media:ControlStoryboardAction Storyboard="{StaticResource CloseStoryboard}"/>
                </core:DataTriggerBehavior>
            </interactivity:Interaction.Behaviors>

            <!-- Content.. -->
        </Pivot>
    </Grid>

C# UWP XAML Animations

1 Answers