本文利用Silverlight VSM修改ListBoxItem加载移除效果,具体效果见源文件。
主界面如下图:
选中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],设置其属性,如下图:
F5执行,预览效果。