【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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步