《Windows Fun 7》四：修改ListBox的模板，视觉状态，及状态过渡

明天要去交大讲Expression Blend的课，做了一个教程，也整理到博客园分享一下：

本示例的目的是：

1. 修改ListBox的模板
2. 修改ListBoxItem的视觉状态
3. 添加ListBoxItem视觉状态之间的过渡

步骤：

1. 添加一个Windows Phone页面

2. 添加示例数据：

3.通过数据创建ListBox

4.设置，将ListBox调制剧中的位置

5. 编辑模板

6.修改模板的样式，可以复制以下代码：

<DataTemplate x:Key="ItemTemplate">

<Grid Height="100" Margin="0,10,0,0" Width="400">

<Image Source="{Binding BackImage}" HorizontalAlignment="Left" Width="400"/>

<Rectangle Fill="#FF131523" HorizontalAlignment="Left" Height="40" Margin="0" Stroke="Black" Width="400" VerticalAlignment="Bottom" StrokeThickness="0" Opacity="0.79" d:LayoutOverrides="VerticalAlignment"/>

</Grid>

</DataTemplate>

7.修改ListBoxItem的样式，通过以下方式调出ListBoxItem模板进行编辑：

8.修改ListBoxItem的容器为Grid，这是为了便于后面做动画

9.添加2个TextBlock，分别用于显示两个绑定字段，注意这里没有将这两个元素定义在前面的ItemTemplate中，是因为，在ListBox中，ItemTemplate只是作为ListBoxItem的一个内容控件，所以如果需要处理状态过渡，则在ListBoxItem的状态中是找不到这些元素的，这些状态是由ListBoxItem提供而不是ItemTemplate提供，所以，如果需要处理过渡则不能依赖于ItemTemplate，Blend提供一种方式直接调出ListBoxItem，作为一个补充，也为了更好的定制化ListBox

10，但是，这样就需要手动绑定TextBlock

11.绑定

12.设置两个文本元素，值看起来如下图：

13.修改视觉状态，首先删除ListBox选中默认的背景变换：

14.变换name元素，使在选中的时候向右滑动：

15.title元素相反向左滑动：

16,修改状态变换：

19.大功告成

20.源代码：https://files.cnblogs.com/hielvis/HelloBlend.rar