Simple UI sliding animation

          Adding simple animation to your app can make it feel much more natural. And there's nothing as annatural in UI for us humans, as things suddenly popping out all over the place (which they usually do if we only use visibility when we need to show something to the user).
Quite frequent UI operation is checking a checkbox or switching radiobuttons and uncovering some previusly hidden part of UI. What makes it more appealing to the user is, when the hidden part of UI gently slides out instead of appearing suddenly. I'll show 2 different animation types appropriate in this situation. First one in this post.

  1 <Grid.Resources>
  2    <Storyboard x:Key="firstStoryboard"> 
  3        <DoubleAnimation Storyboard.TargetName="animatedGrid" 
  4        Duration="00:00:00.3" 
  5        Storyboard.TargetProperty="Height" 
  6        To="100" /> 
  7    </Storyboard> 
  8    <Storyboard x:Key="secondStoryboard">  
  9        <DoubleAnimation Storyboard.TargetName="animatedGrid" 
 10        Duration="00:00:00.3" 
 11        Storyboard.TargetProperty="Height" 
 12        To="0" /> 
 13    </Storyboard> 
 14 </TabItem.Resources> 
 15 <Grid HorizontalAlignment="Stretch"> 
 16     <Grid.ColumnDefinitions> 
 17         <ColumnDefinition Width="Auto"/> 
 18         <ColumnDefinition Width="Auto"/>                             
 19     </Grid.ColumnDefinitions> 
 20     <Grid.RowDefinitions> 
 21         <RowDefinition Height="Auto"/> 
 22         <RowDefinition Height="Auto"/>         
 23         <RowDefinition/>
 24     </Grid.RowDefinitions> 
 25     <RadioButton Content="First"/>   
 26     <RadioButton Content="Second" Grid.Column="1"> 
 27         <ToggleButton.Triggers> 
 28         <EventTrigger RoutedEvent="ToggleButton.Checked"> 
 29             <BeginStoryboard Storyboard="{StaticResource firstStoryboard}"/> 
 30         </EventTrigger> 
 31         <EventTrigger RoutedEvent="ToggleButton.Unchecked">
 32             <BeginStoryboard Storyboard="{StaticResource secondStoryboard}"/>
 33         </EventTrigger> 
 34         </ToggleButton.Triggers> 
 35     </RadioButton>
 36     <Grid Grid.Row="1" Grid.ColumnSpan="2" x:Name="animatedGrid" Height="0">

 37         <TextBlock Text="RandomText"/> 
 38     </Grid> 
 39 </Grid>

         This is a pretty simple piece of XAML code. What we need are 2 storyboards, one for the sliding out animation, one for the sliding back one. In this case we want to animate the height property and we need to state the max height explicitly. For each place in UI where you use this animation, you'd have to set the height to the value which would allow the whole hidden control to be visible after the animation took place.
        The animation is triggered by a routed event caused by the RadioButton being Checked or Unchecked. One important thing is to remember, that we need to set the starting Height to 0.