How can I animate the visibility of a control in UWP using Visual States?

Question

I'm currently working on a custom control for my application that expands and collapses content with a header which you can click to change states. The template for it looks like this at the moment.

<Style TargetType="controls:ExpandControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:ExpandControl">
                <Border>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="State">
                            <VisualState x:Name="Visible">
                                <VisualState.Setters>
                                    <Setter Target="Grid.Visibility" Value="Visible" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Collapsed">
                                <VisualState.Setters>
                                    <Setter Target="Grid.Visibility" Value="Collapsed" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <ContentPresenter x:Name="HeaderPresenter" Content="{TemplateBinding Header}" />

                        <Grid x:Name="Grid" Grid.Row="1">
                            <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" />
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

As you can see from the template, I'm currently using visual states to set the visibility of the content in this control but it's not a great user experience as the content just disappears.

I'd like to be able to manipulate the content somehow that would allow the content to look like it's collapsing and expanding from the header when the Visibility of the control changes.

I've taken a look at animations using Storyboards but I'm completely new to that and if anyone could provide some help on Storyboards and how I can make the scenario work for my control, it would be very much appreciated!

Thanks in advance!

James Croft · Accepted Answer · 2016-11-20T14:46:41.530

Storyboarding isn't a brilliant experience in Visual Studio and attempting to write them manually may not be the best idea.

I'd recommend opening your project in Blend which comes as part of your Visual Studio installation. It's a great tool for designing your applications, and in particular, adding Storyboards in a very easy manner and it will automatically generate the Storyboard XAML for you while you get to see the changes in the designer.

As for your animation scenario, I've played around with your XAML template in a page and have come up with something that makes it look like it's collapsing and expanding but it does it without manipulating the Visibility property like this:

<VisualStateGroup x:Name="State">
    <VisualState x:Name="Visible">
        <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Grid">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Grid">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Grid">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>

    <VisualState x:Name="Collapsed">
        <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Grid">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Grid">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Grid">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
</VisualStateGroup>

You'll also want to change your content Grid to look like this:

<Grid x:Name="Grid" Grid.Row="1" RenderTransformOrigin="0.5,0">
    <Grid.RenderTransform>
        <CompositeTransform/>
    </Grid.RenderTransform>

    <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" />
</Grid>

I'll explain why you'll have to make the changes to the Grid and what the Storyboards do next.

In order to achieve something similar to what you're looking for, I've chosen the Opacity and Y scale on your Grid to animate.

Because we will be manipulating the Y scale of the control, we added the RenderTransform to the Grid. The reason for using the CompositeTransform is so that you can manipulate most common transforms (scale, rotation, translation etc.).

In the states, we use key frames to manipulate the values across time. This is how you achieve the animation in Storyboards. If you only set one KeyFrame with time of 0, it will appear as an immediate change similar to using the VisualState.Setters mechanism of changing properties.

In the Collapsed state, we are changing the opacity and Y scaling of the Grid from 1 to 0. This gives the animation that shows the content collapsing up into the header. As you can see from the key frames, we're staggering the animations of the two properties so the content fades out before it's finished manipulating the scale.

In the Visible state, we are essentially reversing the Collapsed state by changing the opacity and Y scaling from 0 to 1 over the same amount of time.

Try loading these into your control and having a play with them in Blend. It's a great starting point as I threw this together very quickly.

You can find some more information on Storyboarding using Blend here: https://blogs.msdn.microsoft.com/avtarsohi/2016/02/16/understand-storyboard-concept-in-xaml-using-blend-2015/

@JCrook1121 there's no reason why you couldn't use it. I'll update my answer to show how you could use it. — James Croft, Nov 20 '16 at 14:15
Thanks! The only reason I asked is because your example doesn't work well if you use the control for some content at the top of a page and have some more content underneath the control. When you collapse it, it animates to look like it's collapsed but the content underneath isn't bumped up... — JCrook1121, Nov 20 '16 at 14:17
@JCrook1121 I've updated the example to also use visibility as a factor in the animation. — James Croft, Nov 20 '16 at 14:48
This works perfectly for my needs. I'll take a proper look into Storyboards so I can further understand how they work. — JCrook1121, Nov 20 '16 at 14:51
@JamesCroft: This is an excellent solution, which I have adapted, using triggers, so that it can be bound to a boolean property on my view model. The animation works correctly when the property value changes, but I am unable to get it to bypass the animation and go directly to the collapsed state during the initial rendering. Any suggestions how I might achieve this? Thanks. — Tim Coulter, Sep 08 '17 at 11:37

How can I animate the visibility of a control in UWP using Visual States?

1 Answers1