在向ListViews添加元素时如何设置动画/过渡?

Jan*_*mes 5 c# windows xaml microsoft-metro windows-runtime

我有一个ListView,我通过绑定添加了Elements.ListView看起来像:

 <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>
Run Code Online (Sandbox Code Playgroud)

通过此基本设置,当元素绑定到基础List时,已经存在动画.奇怪的是使用不同的动画.第一个元素从右侧滑入,所有其他元素弹出.我正在寻找一种方法来以相同的方式为所有添加的元素设置动画(例如从右侧滑入).我已经锁定了自动生成(通过Blend)ListViewStyle几个小时,但找不到东西.后来我发现可以在样式中添加这个属性:

<Style x:Key="ListViewStyle" TargetType="ListViewItem">
        <Setter Property="Transitions">
            <Setter.Value>
                <TransitionCollection>
                    <EntranceThemeTransition FromHorizontalOffset="400" />
                    <PopupThemeTransition FromHorizontalOffset="400"/>
                </TransitionCollection>
            </Setter.Value>
        </Setter>
 ...
 </Style>
Run Code Online (Sandbox Code Playgroud)

EntranceThemeTransitionPopupThemeTransition似乎是正确的属性,因为他们改变了动画的行为.但我不知道如何使用它们或如何禁用它们.如何才能获得一个动画(从右侧滑入)到ListView?

Fil*_*kun 8

这应该工作:

<ListView
    x:Name="lv">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel>
                <VirtualizingStackPanel.ChildrenTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition
                            FromHorizontalOffset="400" />
                    </TransitionCollection>
                </VirtualizingStackPanel.ChildrenTransitions>
            </VirtualizingStackPanel>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>
Run Code Online (Sandbox Code Playgroud)

*更新:

您还可以使用它ListView.ItemContainerTransitions来定义这些过渡.

  • 在试图回忆起4年后被称为"ChildrenTransitions"的时候,偶然发现自己的答案真是太有趣了...... :) (2认同)