在上一篇文章中,使用 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 进行排序的更多相关文章

  1. EASYUI- EASYUI左移右移 GRID中值

    EASYUI左移右移 GRID中值 $("#addAll").click(function(){ var ids = []; var names = []; var srcrows ...

  2. LigerUi中的Grid中不分页显示(local)!

    LigerUi中的Grid中不分页显示! grid为local usePager: true,                         //是否分页

  3. 关于ListBox在Grid中无法充满的问题

    WPF布局的时候发现一个问题,ListBox放在Grid中的时候,老是无法充满整个Grid,但是查看代码也没有设置相关的属性,原来在设置ListBox之前首先要让ListBox的容器充满,然后List ...

  4. 有关ngui grid中去除一项后的排序问题

    遇到这个问题,是在实现一个公告栏界面的时候,公告栏可以新增一条公告,也可以删除一条公告. 新增很简单,这里不做多的介绍: 关于删除,之前的代码是: GameObject go = is_parent. ...

  5. DevExpress中Tile Application窗体的模型架构图

    DEV中Tile Application模型架构比较复杂,整理一下和大家分享. 图中:立体代表类:虚线椭圆代表属性.

  6. 基于jquery 全选、反选、各行换色、单击行选中事件实现代码

    <script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...

  7. oracle 11g GRID 中 关于 OLR 须要知道的一些内容

     oracle 11g GRID 中 关于 OLR 须要知道的一些内容 1.检查olr 的状态: [root@vmrac1 ~]# ocrcheck -local Status of Oracle ...

  8. 关于手机端在同一个Grid中使用不同的布局展现即Layout的使用

    标题可能说的不是很清楚,我举个栗子好了,现在你正在写手机端的一个审批模块,这个模块要求能够展示所有待审批的信息 比如出差申请,请假申请,加班申请,以及报销申请 那么我的思路有两个 1:建立一个Tab页 ...

  9. 禁止Grid、TreeGrid列排序和列菜单

    Ext的Grid和Treegrid默认提供列菜单的功能,在列菜单中可以进行排序以及控制列显示状态. 在实际项目中,往往有些列是不需要用户看到的,因此就必须屏蔽列菜单的功能. 1.屏蔽Grid,包括Ed ...

随机推荐

  1. 卷积神经网络CNN 手写数字识别

    1. 知识点准备 在了解 CNN 网络神经之前有两个概念要理解,第一是二维图像上卷积的概念,第二是 pooling 的概念. a. 卷积 关于卷积的概念和细节可以参考这里,卷积运算有两个非常重要特性, ...

  2. GOOGLE突破图书馆入口IP限制之技巧

    很多图书馆都要注册或要本地IP才能浏览或下载图书,有没有另类的快速办法能快速突破图书馆的入口,能随意地下载图书呢? 希望大家在GOOGLE里试试这个:“index of/ ” inurl:lib 你将 ...

  3. Forms.Timer、Timers.Timer、Threading.Timer的研究

    .NET Framework里面提供了三种Timer System.Windows.Forms.Timer System.Timers.Timer System.Threading.Timer 一.S ...

  4. Echarts使用dataset数据集管理数据

    1.可以看官网api的入门例子 使用常见的对象数组的格式 option = { legend: {}, tooltip: {}, dataset: { // 这里指定了维度名的顺序,从而可以利用默认的 ...

  5. SCU 4313 把一棵树切成每段K个点 (n%k)剩下的点不管

    题目链接:http://cstest.scu.edu.cn/soj/problem.action?id=4313 判断是不是存在拆图得到新连通分支的点个数是K的倍数 注意一个点所连的边只能被切一条 # ...

  6. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  7. UNIX网络编程读书笔记:poll函数

    poll函数提供的功能与select类似,不过在处理流设备时,它能够提供额外的信息. poll函数原型 #include <poll.h> int poll(struct pollfd * ...

  8. BMFONT 字体制作

    原地址:http://blog.csdn.net/luyuncsd123/article/details/18351057 网上搜BMFont做字体,很多都是从一个字体文件读取,然后选择需要的字,然后 ...

  9. TP框架模板中IF Else 如何使用?

    TP框架模板中IF Else 如何使用? 截个图吧 如果效果出不来,一般就是条件写错了!!!

  10. Python 创建元组tuple

    创建tupletuple是另一种有序的列表,中文翻译为“ 元组 ”.tuple 和 list 非常类似,但是,tuple一旦创建完毕,就不能修改了.同样是表示班里同学的名称,用tuple表示如下:&g ...