[Windows Phone] adds or deletes an item to or from a ListBox and injects an animation with layout.

[Windows Phone] adds or deletes an item to or from a ListBox and injects an animation with layout.

 

By sinodragon21/Nathan

 

Reprinted please indicate the source http://www.cnblogs.com/sinodragon21/archive/2012/07/20/2601072.html

 

I. Demo

 

 

Ii. Core code

 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>

 

3. Source Code download

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

 

-Complete.