Question

I have got a ListView wich I added Elements by binding. The ListView looks like:

 <ListView 
        x:Name="ListView" 
        Height="auto" 
        Width="350" 
        ItemsSource="{Binding}" 
        Padding="0,0,-20,0" 
        Grid.Row="1" 
        Grid.Column="0" 
        Background="#EFEFEF"
        ItemContainerStyle="{StaticResource ListViewStyle}">

        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Height="50" VerticalAlignment="Top" Margin="0,0,0,0" 
                        <TextBlock Text="{Binding name} TextWrapping="NoWrap"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

With this basic setup there is already an animation when a element is bonded to the underlying List. Strangely to different animations are used. The first element slides in from the right and all other elements popup. I’m searching for a way to animate all added elements the same way (e.g. slide in from the right). I have been locking into the auto generated (by Blend) ListViewStyle for hours now but couldn’t find something. Later I found out that it is possible to add this property inside the style:

<Style x:Key="ListViewStyle" TargetType="ListViewItem">
        <Setter Property="Transitions">
            <Setter.Value>
                <TransitionCollection>
                    <EntranceThemeTransition FromHorizontalOffset="400" />
                    <PopupThemeTransition FromHorizontalOffset="400"/>
                </TransitionCollection>
            </Setter.Value>
        </Setter>
 ...
 </Style>

The EntranceThemeTransition and PopupThemeTransition seems to be the right properties because they change the behavior of the animation. But I don’t know how to use them or how to disable one. How can I get just one animation (slide in from the right) to the ListView?

Answer 1

This should work:

<ListView
    x:Name="lv">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel>
                <VirtualizingStackPanel.ChildrenTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition
                            FromHorizontalOffset="400" />
                    </TransitionCollection>
                </VirtualizingStackPanel.ChildrenTransitions>
            </VirtualizingStackPanel>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

*Update:

You can also use ListView.ItemContainerTransitions to define these transitions.