2012-11-05 9 views
6

Ho un ListView che ho aggiunto Elements tramite binding. Il ListView si presenta come:Come impostare animazioni/transizioni quando si aggiungono elementi ad un 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> 

Con questa impostazione di base è già presente un'animazione quando un elemento è unito all'Elenco sottostante. Stranamente vengono utilizzate animazioni diverse. Il primo elemento scorre da destra e tutti gli altri elementi popup. Sto cercando un modo per animare tutti gli elementi aggiunti allo stesso modo (ad esempio, scorri da destra). Ho bloccato per ora il ListViewStyle generato automaticamente (da Blend) per ore ma non sono riuscito a trovare qualcosa. Più tardi ho scoperto che è possibile aggiungere questa proprietà all'interno dell'universo:

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

Il EntranceThemeTransition e PopupThemeTransition sembra essere la proprietà di destra perché cambiano il comportamento dell'animazione. Ma non so come usarli o come disabilitarne uno. Come posso ottenere solo un'animazione (scorri da destra) in ListView?

risposta

9

Questo dovrebbe funzionare:

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

* Aggiornamento:

È anche possibile utilizzare ListView.ItemContainerTransitions per definire queste transizioni.

+0

Voglio eseguire nuovamente questa animazione, posso richiamarla dal codice? –

+0

No. Per poter eseguire questa operazione è necessario collegare una normale storyboard o animazione per fotogramma. –

+2

È così divertente inciampare nella tua risposta quando cerchi di ricordare cosa sono stati chiamati "ChildrenTransitions" 4 anni dopo ... :) –

Problemi correlati