(2)FluidMoveBehavior 之单击 Grid 中 Tile 进行排序
在上一篇文章中,使用 FluidMoveBehavior 结合 FluidMoveSetTagBehavior 可以使数据从 ListBox 中的
数据显示时,产生缓慢的动画,从而更加生动。其实 FluidMoveBehavior 这个行为在单独使用时,也可以把元素
的移动产生动画效果。
Silverlight中控件可以随着界面大小的调整而重新布局,这是通过控件的MeasureOverride和ArrangeOverride方法来实现。
一般情况下,到界面重新布局时,控件瞬间被安排到新的位置,然而有时候我们希望看到这个重新排列的过程,于是
Blend 小组开发了这个可重用的 Behavior,来使元素在重新布局时,把布局的过程通过动画进行放慢,从而提升
用户体验,达到生动的效果。
之前 Blend 小组演示了 WrapPanel 子元素重新排序时产生流动的效果:
设置很简单, FluidMoveBehavior 位于Asset面板中的Behaviors部分,拖动FluidMoveBehavior到 WarpPanel控件上,
配置的属性即可:
模仿该行为,这次我使用 Grid ,并且在其中添加6个 Border 子元素,实现的效果是当单击
其中的一个 Border 时,即为选中它,给它一个白色的边框,再单击其它的 Border 元素,从而
实现两个 Border 互换,同时产生动画效果。
步骤:
第一步:在 MainPage 的 XAML 页面中设置 Name 为 “ContentPanel” 的 Grid 的子元素 ,设置为两列、三行,共六个border,
并且给每个 Border 设置一个颜色用于区分,添加 Border 的 Tap 属性:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="150"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions> <Border Background="Yellow" Tap="Border_Tap"/>
<Border Background="AntiqueWhite" Grid.Column="1" Tap="Border_Tap"/>
<Border Background="YellowGreen" Grid.Row="1" Tap="Border_Tap"/>
<Border Background="HotPink" Grid.Row="1" Grid.Column="1" Tap="Border_Tap"/>
<Border Background="Chocolate" Grid.Row="2" Grid.Column="0" Tap="Border_Tap"/>
<Border Background="Goldenrod" Grid.Row="2" Grid.Column="1" Tap="Border_Tap"/>
</Grid>
第二步,在 CodeBehind 页面中,实现单击两个 Border ,通过 Grid.SetColumn(element, value) 和
Grid.SetRow(element, value) 交换两个 Border 的行和列属性:
Border borderTemp;
private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
Border border = sender as Border; if (border == borderTemp)
{
border.BorderBrush = new SolidColorBrush(Colors.Transparent);
borderTemp = null;
return;
} if (borderTemp != null)
{
SwapBorder(borderTemp, border);
}
else
{
borderTemp = sender as Border;
borderTemp.BorderBrush = new SolidColorBrush(Color.FromArgb(0xff,0xff, 0xff, 0xff)); // 设置边框的颜色为白色,用于区分
}
} //交换两个 Border
void SwapBorder(Border border1, Border border2)
{
int colNum1 = Grid.GetColumn(border1);
int rowNum1 = Grid.GetRow(border1); int colNum2 = Grid.GetColumn(border2);
int rowNum2 = Grid.GetRow(border2); Grid.SetColumn(border1, colNum2);
Grid.SetRow(border1, rowNum2); Grid.SetColumn(border2, colNum1);
Grid.SetRow(border2, rowNum1);
}
经过以上两步,就可以实现单击两个 Border 后,实现互换的效果,不过比较生涩,没有动画效果。
第三步,打开 Blend,给容器 Grid 添加 FluidMoveBehavior 行为。首先在“行为”面板中,拖动FluidMoveBehavior
到 “对象和时间线” 面板上的 Grid 上:
设置 FluidMoveBehavior 的属性 AppliesTo="Children"。
MainPage 中的最终 XAML :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="150"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<!--<Setter Property="Opacity" Value="0.5"/>-->
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<i:Interaction.Behaviors>
<el:FluidMoveBehavior AppliesTo="Children" Duration="00:00:1">
<el:FluidMoveBehavior.EaseY>
<QuinticEase EasingMode="EaseOut"/>
</el:FluidMoveBehavior.EaseY>
<el:FluidMoveBehavior.EaseX>
<QuinticEase EasingMode="EaseOut"/>
</el:FluidMoveBehavior.EaseX>
</el:FluidMoveBehavior>
</i:Interaction.Behaviors>
<Border Background="Yellow" Tap="Border_Tap"/>
<Border Background="AntiqueWhite" Grid.Column="1" Tap="Border_Tap"/>
<Border Background="YellowGreen" Grid.Row="1" Tap="Border_Tap"/>
<Border Background="HotPink" Grid.Row="1" Grid.Column="1" Tap="Border_Tap"/>
<Border Background="Chocolate" Grid.Row="2" Grid.Column="0" Tap="Border_Tap"/>
<Border Background="Goldenrod" Grid.Row="2" Grid.Column="1" Tap="Border_Tap"/>
</Grid>
经过以上三步,就可以实现上面的动画效果。
附上 Expression Blend 小组的博客地址:http://blogs.msdn.com/b/expression/
(2)FluidMoveBehavior 之单击 Grid 中 Tile 进行排序的更多相关文章
- EASYUI- EASYUI左移右移 GRID中值
EASYUI左移右移 GRID中值 $("#addAll").click(function(){ var ids = []; var names = []; var srcrows ...
- LigerUi中的Grid中不分页显示(local)!
LigerUi中的Grid中不分页显示! grid为local usePager: true, //是否分页
- 关于ListBox在Grid中无法充满的问题
WPF布局的时候发现一个问题,ListBox放在Grid中的时候,老是无法充满整个Grid,但是查看代码也没有设置相关的属性,原来在设置ListBox之前首先要让ListBox的容器充满,然后List ...
- 有关ngui grid中去除一项后的排序问题
遇到这个问题,是在实现一个公告栏界面的时候,公告栏可以新增一条公告,也可以删除一条公告. 新增很简单,这里不做多的介绍: 关于删除,之前的代码是: GameObject go = is_parent. ...
- DevExpress中Tile Application窗体的模型架构图
DEV中Tile Application模型架构比较复杂,整理一下和大家分享. 图中:立体代表类:虚线椭圆代表属性.
- 基于jquery 全选、反选、各行换色、单击行选中事件实现代码
<script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...
- oracle 11g GRID 中 关于 OLR 须要知道的一些内容
oracle 11g GRID 中 关于 OLR 须要知道的一些内容 1.检查olr 的状态: [root@vmrac1 ~]# ocrcheck -local Status of Oracle ...
- 关于手机端在同一个Grid中使用不同的布局展现即Layout的使用
标题可能说的不是很清楚,我举个栗子好了,现在你正在写手机端的一个审批模块,这个模块要求能够展示所有待审批的信息 比如出差申请,请假申请,加班申请,以及报销申请 那么我的思路有两个 1:建立一个Tab页 ...
- 禁止Grid、TreeGrid列排序和列菜单
Ext的Grid和Treegrid默认提供列菜单的功能,在列菜单中可以进行排序以及控制列显示状态. 在实际项目中,往往有些列是不需要用户看到的,因此就必须屏蔽列菜单的功能. 1.屏蔽Grid,包括Ed ...
随机推荐
- Scurm 术语
角色 Product Owner Scrum Master Team 工件(Backlog) Product Backlog Sprint Backlog Burndown Backlog 活动 Sp ...
- Glide Picasso Fresco UIL 图片框架 缓存 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- css整站规划
准备1 css reset /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http:/ ...
- TextView子类的常用属性
TextView常见的子类包括EditText,Button,CheckBox, RadioButton等. 1.EditText EditText继承自TextView,因此TextView所有属性 ...
- [Grunt] Watch && grunt-contrib-watch
Watch is an essential component of any Grunt build, and you will find yourself using it in almost ev ...
- Andrew Ng机器学习笔记+Weka相关算法实现(四)SVM和原始对偶问题
这篇博客主要解说了Ng的课第六.七个视频,涉及到的内容包含,函数间隔和几何间隔.最优间隔分类器 ( Optimal Margin Classifier).原始/对偶问题 ( Primal/Dual P ...
- C#基础视频教程7.3 如何编写简单游戏
前面我们大致实现了鸟的一圈轨迹(其实如果你不做这个,就用两个矩形块的碰撞检测代替也可以),跟所有前面的教程一样,草稿打完了就要设计封装成一个类.至少到目前为止我们已经知道了鸟的属性和方法,先不要管方法 ...
- angularjs中的数据绑定
这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-i ...
- java创建二叉树并实现非递归中序遍历二叉树
java创建二叉树并递归遍历二叉树前面已有讲解:http://www.cnblogs.com/lixiaolun/p/4658659.html. 在此基础上添加了非递归中序遍历二叉树: 二叉树类的代码 ...
- 在div 底部显示背景图片
下面代码实现div层背景图片在底部显示: div { background : url (/images/bg.jpg) no-repeat fixed ; background-position-y ...