ItemsControl에 항목을 삽입 애니메이션

Question

난 내 창에서 itemsControl 폰 7 응용 프로그램을 사용하여 종류의 목록을 표시하고,하지만 난 등 나의 itemsControl이

<ItemsControl x:Name="ListContainer"> 

         <ItemsControl.ItemTemplate>       
          <DataTemplate x:Name="listTemplate">         
            <StackPanel Margin="25,0,0,0" MaxHeight="100"> 
             <TextBlock Text="{Binding DisplayName}" FontSize="21"></TextBlock>        
             <Button Name="btn" Tag="{Binding ID}" Content="request" FontSize="21" Width="183" Click="btn_Click" Padding="0"></Button> 
            </StackPanel>         
          </DataTemplate>        
         </ItemsControl.ItemTemplate> 

         <ItemsControl.ItemsPanel> 
          <ItemsPanelTemplate> 
           <StackPanel Orientation="Vertical"/> 
          </ItemsPanelTemplate> 
         </ItemsControl.ItemsPanel> 

    </ItemsControl> 

아래에 주어진 지금 내가 원하는 animation 및 storyBoard에 아주 새로운 오전 제가 많이 봤 add

항목을 받아이 itemsControl 그것 (item)에 추가 될 때마다 정도로한다는 animation 추가보다 up d 개에 bottom에서 이동되어야 그러나 어떤 변덕스러운 대답도 찾지 못했습니다. 스토리 보드와 애니메이션에 대한 지식을 가진 사람이 대답을하면 plZ는 답변을드립니다. - : thanks

Answer 1

는 당신이 필요로하는 등의 애니메이션을 구현하려면 : 1. 항목 StackPanel에 TranslateTransform를 추가하고 900 Y를 설정; StackPanel의 Loaded 이벤트에 이벤트 핸들러를 추가하십시오. 귀하의 XAML 지금과 같이 표시됩니다

<ItemsControl x:Name="ListContainer" VerticalAlignment="Top"> 
       <ItemsControl.ItemTemplate> 
        <DataTemplate x:Name="listTemplate"> 
         <StackPanel Margin="25,0,0,0" MaxHeight="100" Loaded="FrameworkElement_OnLoaded"> 
          <StackPanel.RenderTransform> 
           <TranslateTransform Y="900"/> 
          </StackPanel.RenderTransform> 
          <TextBlock Text="{Binding}" FontSize="21"></TextBlock> 
          <Button Name="btn" Content="request" FontSize="21" Width="183" Padding="0"></Button> 
         </StackPanel> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Vertical"/> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
      </ItemsControl> 

3. 이벤트 핸들러 Loaded에서 새 항목을 이동하려고하는 Storyboard을 만들어야합니다

private void FrameworkElement_OnLoaded(object sender, RoutedEventArgs e) 
    { 
     var storyboard = new Storyboard(); 
     var animation = new DoubleAnimation 
          { 
           From = 900, 
           To = 0 
          }; 

     var translatTransform = new TranslateTransform 
            { 
             Y = 900 
            }; 

     var panel = (StackPanel) sender; 
     panel.RenderTransform = translatTransform; 

     Storyboard.SetTarget(animation, translatTransform); 
     Storyboard.SetTargetProperty(animation, new PropertyPath("Y")); 
     storyboard.Children.Add(animation); 
     storyboard.Begin(); 
    }  

Answer 2

이제이 애니메이션 튜토리얼을 혼합하여 직접 확인하고 자신 만의 아이디어를 적용하십시오. 조화를 이루는 것은 애니메이션에 매우 좋습니다. Animating a card in windows phone

그리고 항목 컨트롤의 애니메이션 이 작동 : Item control animation