title: C# UWP XAML Animations
body: <p>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?</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="*"/&gt;
          &lt;ColumnDefinition Width="Auto"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;Grid Grid.Column="0"&gt;
          &lt;Button Command="{Binding TogglePivot}"/&gt;
      &lt;/Grid&gt;
  
      &lt;Pivot x:Name="Content_Pivot" Grid.Column="1"&gt;
          &lt;VisualStateManager.VisualStateGroups&gt;
              &lt;VisualStateGroup&gt;
                  &lt;!-- Hidden state --&gt;
                  &lt;VisualState x:Name="Hidden"&gt;
                      &lt;Storyboard&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content_Pivot" Storyboard.TargetProperty="Width"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="0"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
  
                  &lt;!-- Visible state --&gt;
                  &lt;VisualState x:Name="Visible"&gt;
                      &lt;Storyboard&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content_Pivot" Storyboard.TargetProperty="Width"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="600"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
              &lt;/VisualStateGroup&gt;
          &lt;/VisualStateManager.VisualStateGroups&gt;
  
          &lt;interactivity:Interaction.Behaviors&gt;
              &lt;!-- Show --&gt;
              &lt;core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="True"&gt;
                  &lt;core:GoToStateAction StateName="Visible"/&gt;
              &lt;/core:DataTriggerBehavior&gt;
  
              &lt;!-- Hide --&gt;
              &lt;core:DataTriggerBehavior Binding="{Binding IsVisible}" ComparisonCondition="Equal" Value="False"&gt;
                  &lt;core:GoToStateAction StateName="Hidden" /&gt;
              &lt;/core:DataTriggerBehavior&gt;
          &lt;/interactivity:Interaction.Behaviors&gt;
  
          &lt;!-- Content.. --&gt;
      &lt;/Pivot&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>The above works fine, but <strong>only on the first toggle</strong> of the visibility of the Pivot. Subsequent toggles do not show the animation..</p>
  
  <p>Any easy way of achieving this without manually invoking Storyboards?</p>
  
  <p>Thanks.</p>
  
  <p><strong>==EDIT==</strong></p>
  
  <p>I made some changes to above code (namely, added <code>VisualStates</code> and <code>DataTriggerBehaviour</code>). </p>
  
  <p>Still can't get it to work... Any ideas?</p>