[Windows Phone] 为Listbox添加、删除item注入动画效果，并伴随Layout迁移动画

[Windows Phone] 为Listbox添加、删除item注入动画效果，并伴随Layout迁移动画

作者：sinodragon21/Nathan

转载请注明出处 http://www.cnblogs.com/sinodragon21/archive/2012/07/20/2601072.html

一、Demo截图

二、核心代码

 1 <ListBox Grid.Row="0" x:Name="mylistbox">
 2                 <ListBox.ItemsPanel>
 3                     <ItemsPanelTemplate>
 4                         <toolkit:WrapPanel x:Name="ListBoxItemPanel" Loaded="ListBoxItemPanel_Loaded" ItemHeight="87" ItemWidth="87">
 5                             <i:Interaction.Behaviors>
 6                                 <el:FluidMoveBehavior AppliesTo="Children" Duration="0:0:1.5">
 7                                     <el:FluidMoveBehavior.EaseY>
 8                                         <CubicEase EasingMode="EaseOut"/>
 9                                     </el:FluidMoveBehavior.EaseY>
10                                     <el:FluidMoveBehavior.EaseX>
11                                         <CubicEase EasingMode="EaseOut"/>
12                                     </el:FluidMoveBehavior.EaseX>
13                                 </el:FluidMoveBehavior>
14                             </i:Interaction.Behaviors>
15                         </toolkit:WrapPanel>
16                     </ItemsPanelTemplate>
17                 </ListBox.ItemsPanel>
18                 <Border Height="75" Width="75" Background="Red" Margin="12,12,0,0" BorderBrush="White" BorderThickness="2" />
19                 <Border Height="75" Width="75" Background="#FF665050" Margin="12,12,0,0" BorderBrush="White" BorderThickness="2" />
20                 <Border Height="75" Width="75" Background="Red" Margin="12,12,0,0" BorderBrush="White" BorderThickness="2" />
21                 <Border Height="75" Width="75" Background="#FF19A588" Margin="12,12,0,0" BorderBrush="White" BorderThickness="2" />
22                 <Border Height="75" Width="75" Background="Red" Margin="12,12,0,0" BorderBrush="White" BorderThickness="2" />
23                 <Border Height="75" Width="75" Background="#FF852121" Margin="12,12,0,0" BorderBrush="White" BorderThickness="2" />
24                 <Border Height="75" Width="75" Background="#FF19C854" Margin="12,12,0,0" BorderBrush="White" BorderThickness="2" />
25                 <Border Height="75" Width="75" Background="#FFA19595" Margin="12,12,0,0" BorderBrush="White" BorderThickness="2" />
26</ListBox>