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

 

三、原始碼下載

http://www.hugwp.com/thread-4207-1.html

 

-完。