Windows Store App - XAML - Animate ListView Details (Split Page)

Question

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 ListView

My XAML

    <!-- Vertical scrolling item list -->
    <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">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="6">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding ImagePathSmall}" Stretch="None" AutomationProperties.Name="{Binding Priority}" />
                    <StackPanel Grid.Column="1" Margin="10,0,0,0">
                        <TextBlock Text="{Binding Category}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
                        <TextBlock Text="{Binding Patient}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>


    <!-- Details for selected item -->
    <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">

        <Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <ContentThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Priority}"  Width="128" Height="128"/>
            <StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
                <TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Category}" Style="{StaticResource SubheaderTextBlockStyle}"/>
                <TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Patient}" Style="{StaticResource SubtitleTextBlockStyle}"/>
            </StackPanel>
            <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding TaskDetails}" Style="{StaticResource BodyTextBlockStyle}"/>
        </Grid>
    </ScrollViewer>

From reading Quickstart: Animating your UI using library animations (Windows Runtime apps using C#/VB/C++ and XAML) I should be able to get my desired effect by adding

            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <ContentThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>

Though it does not have the desired effect. Can qnyone tell me why and how to achieve the desired effect?

Answer 1

Changing it to this has the desired effect

    <!-- Vertical scrolling item list -->
    <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">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="6">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding ImagePathSmall}" Stretch="None" AutomationProperties.Name="{Binding Priority}" />
                    <StackPanel Grid.Column="1" Margin="10,0,0,0">
                        <TextBlock Text="{Binding Category}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
                        <TextBlock Text="{Binding Patient}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>


    <!-- Details for selected item -->

    <ContentControl x:Name="itemDetail" Content="{Binding SelectedItem, ElementName=itemListView}" Grid.Row="1" Grid.Column="1"   >
        <ContentControl.ContentTemplate>
            <DataTemplate>
                <Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Priority}"  Width="128" Height="128"/>
                    <StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
                        <TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Category}" Style="{StaticResource SubheaderTextBlockStyle}"/>
                        <TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Patient}" Style="{StaticResource SubtitleTextBlockStyle}"/>
                    </StackPanel>
                    <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding TaskDetails}" Style="{StaticResource BodyTextBlockStyle}"/>
                </Grid>
            </DataTemplate>
        </ContentControl.ContentTemplate>
        <ContentControl.ContentTransitions>
            <TransitionCollection>
                <ContentThemeTransition HorizontalOffset="100"/>
            </TransitionCollection>
        </ContentControl.ContentTransitions>
    </ContentControl>