热门:网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置:.Net中文社区>> Silverlight>>正文内容

Silverlight之自定义ListBoxItem加载移除效果【附源码下载】

发布时间:2010年07月13日点击数: 佚名

本文利用Silverlight VSM修改ListBoxItem加载移除效果,具体效果见源文件。

  • 开发工具:Microsoft Expression Blend 4 EN     【源码下载
  • Silverlight版本:4.0
  • 开发语言:Visual C#

主界面如下图:

未命名

1. 修改ListBox->Generated Item Container Style

选中ListBox右击-> Edit Additional Templates->Edit Generated Item Container->Edit a Copy,设置名称,点击 OK,如下图:未命名

2. 切换至States选项卡,选中 Objects and Timeline中的[Grid],如下图:

未命名

选中LayoutStates->BeforeLoaded状态,修改grid->Transform->RenderTransform->TranslateX为-150(可根据实际调整)。未命名

选中LayoutStates->BeforeUnloaded状态,grid->Transform->RenderTransform->TranslateX为150(可根据实际调整)。方法如上。 

未命名

设置LayoutStates Transition duration(动画长度) 为0.5s,EasingFunction(设置动画效果)为Elastic Out。

未命名

为添加、移动按钮实现鼠标点击事件,代码如下:

  1. private void btnAddItem_Click(object sender, System.Windows.RoutedEventArgs e) 
  2.     // TODO: Add event handler implementation here. 
  3.         lstItems.Items.Add("new item" + lstItems.Items.Count); 
  4.  
  5. private void btnRemoveItem_Click(object sender, System.Windows.RoutedEventArgs e) 
  6.     // TODO: Add event handler implementation here. 
  7.     if (lstItems.Items.Count > 0) 
  8.         lstItems.Items.RemoveAt(0); 

 

按F5执行预览,在移除后下面的列表项会向上移动,发现运动太过生硬,下面为ListBox容器添加FluidMoveBehavior,产生流动效果。

选中ListBox右击-> Edit Additional Templates->Edit Layout of Items->Edit Empty,设置名称,点击 OK。

在Assets资源面板中选中Behaviors->FluidMoveBehavior,添加至[StackPanel]

未命名

选中[FluidMoveBehavior],设置其属性,如下图:

未命名

  • AppliesTo : Children 作用于子项
  • Duration:00:00:00.3000000动画长度,300毫秒
  • EaseX、EaseY 为动画效果

F5执行,预览效果。

本站热点业务

更多模板/案例展示

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作