C # UWP XAML Animations

Question

I have a page with a grid containing two columns, the first contains a button that switches the visibility of the second (via the ViewModel binding). How to add animation to show / hide the second column (using Pivot as content) for 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> 

This works fine, but only on the first switching of Pivot visibility. Subsequent switches do not show animation.

Any easy way to achieve this without manually engaging storyboards?

Thanks.

== EDIT ==

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

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

Answer 1

In a similar scenario, I did not switch the visibility of the pivot point, but the width of the grid column (or pivot point). In the end, the axis of rotation with a zero width is invisible. Plus, from what I see in your code, the size of the second column is set to 300, so the width of the target for the animation will not be a problem.

My suggestion is to create two storyboards in xaml, oriented to the width of the fulcrum. The first will expand it, and the second will destroy it. Then use a DataTriggerBehavior to bind to TogglePivot to start the storyboard. So xaml is still clean and no code is required.

If you try it and cannot understand, I can provide sample code.

Edit: you have an idea a little 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>