【WP7】关于WrapPanel的使用和动画效果

除了三个常用的布局控件（Grid，Canvas，StackPanel）外，有时候我们需要做一些更加丰富的布局功能

例如：

下面介绍这个WrapPanel，叫自动排列面板，控件按顺序排列，当遇到末尾是自动换行

　　1、添加引用　　Microsoft.Phone.Controls.Toolkit.dll

　　2、在xaml控件中添加　

      xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 

　　2、然后添加WrapPanel控件（放在ScrollViewer中，使之可以滚动）

         <ScrollViewer HorizontalAlignment="Left" Margin="12,78,0,92" Name="scrollViewer1" Width="438" >
            <toolkit:WrapPanel Height="auto" HorizontalAlignment="Left" Name="wrapPanel1" VerticalAlignment="Top" Width="441" />
        </ScrollViewer>

　　4、接下来通过代码添加控件　

         Random rnd = new Random();
        private void AddItem()
        {
            Border b = new Border()
            {
                Width = 80,
                Height = 100,
                Background = new SolidColorBrush(Color.FromArgb(255, (byte)rnd.Next(256), (byte)rnd.Next(256), (byte)rnd.Next(256))),
                BorderThickness = new Thickness(2),
                Margin = new Thickness(8)
            };
            b.BorderBrush = (SolidColorBrush)Resources["PhoneForegroundBrush"];
            //注册移除事件
              GestureListener listener = GestureService.GetGestureListener(b);
            listener.Tap += new EventHandler<Microsoft.Phone.Controls.GestureEventArgs>(WrapPanelSample_Tap);
            wrapPanel1.Children.Insert(0, b);
        }

  　　　　5、接下来是动画的添加

　　　　　　首先添加引用

        Microsoft.Expression.Interactions
        System.Windows.Interactivity

　　　　　　在xaml文件中添加两个命名空间

        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:el="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"

　　　　　　在WrapPanel控件的声明中添加动画效果，当WrapPanel内部控件的位置发生改变的时候，就会出现动画效果

        <toolkit:WrapPanel Height="auto" HorizontalAlignment="Left" Name="wrapPanel1" VerticalAlignment="Top" Width="441" >
            <i:Interaction.Behaviors>
                <el:FluidMoveBehavior AppliesTo="Children" Duration="0:0:1.5">
                    <el:FluidMoveBehavior.EaseY>
                        <CubicEase EasingMode="EaseOut"/>
                    </el:FluidMoveBehavior.EaseY>
                    <el:FluidMoveBehavior.EaseX>
                        <CubicEase EasingMode="EaseOut"/>
                    </el:FluidMoveBehavior.EaseX>
                </el:FluidMoveBehavior>
            </i:Interaction.Behaviors>
        </toolkit:WrapPanel>