title: How can I animate the visibility of a control in UWP using Visual States?
body: <p>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.</p>
  
  <pre><code>&lt;Style TargetType="controls:ExpandControl"&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="controls:ExpandControl"&gt;
                  &lt;Border&gt;
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup x:Name="State"&gt;
                              &lt;VisualState x:Name="Visible"&gt;
                                  &lt;VisualState.Setters&gt;
                                      &lt;Setter Target="Grid.Visibility" Value="Visible" /&gt;
                                  &lt;/VisualState.Setters&gt;
                              &lt;/VisualState&gt;
  
                              &lt;VisualState x:Name="Collapsed"&gt;
                                  &lt;VisualState.Setters&gt;
                                      &lt;Setter Target="Grid.Visibility" Value="Collapsed" /&gt;
                                  &lt;/VisualState.Setters&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
  
                      &lt;Grid&gt;
                          &lt;Grid.RowDefinitions&gt;
                              &lt;RowDefinition Height="Auto" /&gt;
                              &lt;RowDefinition Height="*" /&gt;
                          &lt;/Grid.RowDefinitions&gt;
  
                          &lt;ContentPresenter x:Name="HeaderPresenter" Content="{TemplateBinding Header}" /&gt;
  
                          &lt;Grid x:Name="Grid" Grid.Row="1"&gt;
                              &lt;ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" /&gt;
                          &lt;/Grid&gt;
                      &lt;/Grid&gt;
                  &lt;/Border&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>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!</p>
  
  <p>Thanks in advance!</p>