title: Windows Store App - XAML - Animate ListView Details (Split Page)
body: <p>I have page that is using the "Split Page" template and I want it to animate the details whenever a different item is selected in the <code>ListView</code></p>
  
  <p>My XAML</p>
  
  <pre><code>    &lt;!-- Vertical scrolling item list --&gt;
      &lt;ListView
          x:Name="itemListView"
          AutomationProperties.AutomationId="ItemsListView"
          AutomationProperties.Name="Items"
          TabIndex="1"
          Grid.Row="1"
          Margin="0,0,0,0"
          Padding="120,0,0,60"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          IsSwipeEnabled="False"
          SelectionChanged="ItemListView_SelectionChanged"&gt;
          &lt;ListView.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;Grid Margin="6"&gt;
                      &lt;Grid.ColumnDefinitions&gt;
                          &lt;ColumnDefinition Width="Auto"/&gt;
                          &lt;ColumnDefinition Width="*"/&gt;
                      &lt;/Grid.ColumnDefinitions&gt;
                      &lt;Image Source="{Binding ImagePathSmall}" Stretch="None" AutomationProperties.Name="{Binding Priority}" /&gt;
                      &lt;StackPanel Grid.Column="1" Margin="10,0,0,0"&gt;
                          &lt;TextBlock Text="{Binding Category}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/&gt;
                          &lt;TextBlock Text="{Binding Patient}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/&gt;
                      &lt;/StackPanel&gt;
                  &lt;/Grid&gt;
              &lt;/DataTemplate&gt;
          &lt;/ListView.ItemTemplate&gt;
      &lt;/ListView&gt;
  
  
      &lt;!-- Details for selected item --&gt;
      &lt;ScrollViewer
          x:Name="itemDetail"
          AutomationProperties.AutomationId="ItemDetailScrollViewer"
          Grid.Column="1"
          Padding="60,0,66,0"
          DataContext="{Binding SelectedItem, ElementName=itemListView}"
          HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
          ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
          ScrollViewer.ZoomMode="Disabled" Grid.Row="1"&gt;
  
          &lt;Grid x:Name="itemDetailGrid" Margin="0,60,0,50"&gt;
              &lt;Grid.ChildrenTransitions&gt;
                  &lt;TransitionCollection&gt;
                      &lt;ContentThemeTransition/&gt;
                  &lt;/TransitionCollection&gt;
              &lt;/Grid.ChildrenTransitions&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="Auto"/&gt;
                  &lt;RowDefinition Height="Auto"/&gt;
                  &lt;RowDefinition Height="*"/&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="Auto"/&gt;
                  &lt;ColumnDefinition Width="*"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
  
              &lt;Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Priority}"  Width="128" Height="128"/&gt;
              &lt;StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1"&gt;
                  &lt;TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Category}" Style="{StaticResource SubheaderTextBlockStyle}"/&gt;
                  &lt;TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Patient}" Style="{StaticResource SubtitleTextBlockStyle}"/&gt;
              &lt;/StackPanel&gt;
              &lt;TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding TaskDetails}" Style="{StaticResource BodyTextBlockStyle}"/&gt;
          &lt;/Grid&gt;
      &lt;/ScrollViewer&gt;
  </code></pre>
  
  <p>From reading <a href="http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh452703.aspx" rel="nofollow">Quickstart: Animating your UI using library animations (Windows Runtime apps using C#/VB/C++ and XAML)</a> I should be able to get my desired effect by adding </p>
  
  <pre><code>            &lt;Grid.ChildrenTransitions&gt;
                  &lt;TransitionCollection&gt;
                      &lt;ContentThemeTransition/&gt;
                  &lt;/TransitionCollection&gt;
              &lt;/Grid.ChildrenTransitions&gt;
  </code></pre>
  
  <p>Though it does not have the desired effect. Can qnyone tell me why and how to achieve the desired effect?</p>