2012-11-05 34 views
6

我有一個ListView,我通過綁定添加了Elements。 ListView看起來像:將元素添加到ListViews時如何設置動畫/轉換?

<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> 

有了這個基本設置,當一個元素綁定到基礎列表時,已經有一個動畫。奇怪的是使用不同的動畫。第一個元素從右側滑入,所有其他元素彈出。我正在尋找一種以相同方式爲所有添加元素添加動畫的方法(例如,從右側滑入)。我一直在鎖定到自動生成(通過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> 

EntranceThemeTransitionPopupThemeTransition似乎是正確的屬性,因爲他們改變了動畫的行爲。但我不知道如何使用它們或如何禁用它們。我怎樣才能得到一個動畫(從右側滑入)到ListView?

回答

9

這應該工作:

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

*更新:

您還可以使用ListView.ItemContainerTransitions來定義這些轉換。

+0

我想再次運行這個動畫,我可以從後面的代碼中調用它嗎? –

+0

不需要。您需要連接一個常規的「Storyboard」或每幀動畫才能做到這一點。 –

+2

當試圖回憶4年後的「ChildrenTransitions」被稱爲什麼時,偶然發現了自己的答案... :) –