List animation

Main.xaml

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions">
  <Grid.Resources>
    <ControlTemplate x:Key="btnTemplate" TargetType="Button">
      <Border x:Name="Root" Background="{TemplateBinding Background}" Height="100">
        <StackPanel VerticalAlignment="Center">
          <TextBlock x:Name="Header" Text="{TemplateBinding Content}" FontSize="20"
            FontWeight="Bold" Foreground="White" noesis:Text.Stroke="#80000000" noesis:Text.StrokeThickness="2.5"
            HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
            <TextBlock.RenderTransform>
              <ScaleTransform/>
            </TextBlock.RenderTransform>
          </TextBlock>
          <TextBlock x:Name="SubHeader" Text="{TemplateBinding Tag}" FontSize="20"
            Foreground="White" noesis:Text.Stroke="#80000000" noesis:Text.StrokeThickness="2.5"
            HorizontalAlignment="Center" Opacity="0" Margin="0,10,0,-40"/>
        </StackPanel>
      </Border>
      <ControlTemplate.Triggers>
        <Trigger Property="IsKeyboardFocused" Value="True">
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Duration="0:0:0.3" To="300" Storyboard.TargetName="Root" Storyboard.TargetProperty="Height"/>
                <DoubleAnimation Duration="0:0:0.3" To="2" Storyboard.TargetName="Header" Storyboard.TargetProperty="RenderTransform.ScaleX"/>
                <DoubleAnimation Duration="0:0:0.3" To="2" Storyboard.TargetName="Header" Storyboard.TargetProperty="RenderTransform.ScaleY"/>
                <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetName="SubHeader" Storyboard.TargetProperty="Opacity"/>
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
          <Trigger.ExitActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Duration="0:0:0.3" To="100" Storyboard.TargetName="Root" Storyboard.TargetProperty="Height"/>
                <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetName="Header" Storyboard.TargetProperty="RenderTransform.ScaleX"/>
                <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetName="Header" Storyboard.TargetProperty="RenderTransform.ScaleY"/>
                <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetName="SubHeader" Storyboard.TargetProperty="Opacity"/>
              </Storyboard>
            </BeginStoryboard>
          </Trigger.ExitActions>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
    <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
      <Setter Property="Template" Value="{StaticResource btnTemplate}"/>
    </Style>
    <ImageBrush x:Key="img1" ImageSource="nature1.jpg" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center"/>
    <ImageBrush x:Key="img2" ImageSource="nature2.jpg" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center"/>
    <ImageBrush x:Key="img3" ImageSource="nature3.jpg" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center"/>
    <ImageBrush x:Key="img4" ImageSource="nature4.jpg" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center"/>
  </Grid.Resources>
  <StackPanel Width="400" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Background="{StaticResource img1}" Content="Possibility" Tag="The Hill"/>
    <Button Background="{StaticResource img2}" Content="Finishing" Tag="The Grid"/>
    <Button Background="{StaticResource img3}" Content="Craftsmanship" Tag="Metropolitan Center"/>
    <Button Background="{StaticResource img4}" Content="Opportunity" Tag="The Hill"/>
  </StackPanel>
</Grid>

nature1.jpg

nature2.jpg

nature3.jpg

nature4.jpg