Silverlight之自定义ListBoxItem加载移除效果

本文利用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。

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

private void btnAddItem_Click(object sender, System.Windows.RoutedEventArgs e)
{
	// TODO: Add event handler implementation here.
      	lstItems.Items.Add("new item" + lstItems.Items.Count);
}

private void btnRemoveItem_Click(object sender, System.Windows.RoutedEventArgs e)
{
	// TODO: Add event handler implementation here.
	if (lstItems.Items.Count > 0)
		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执行，预览效果。

源文件下载：ListBoxItemEffect