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

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

op

 

本示例的目的是:

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

 

步骤:

1. 添加一个Windows Phone页面

2. 添加示例数据:

22

3.通过数据创建ListBox

23

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

5. 编辑模板

Picture1

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>

Picture2

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

Picture3

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

Picture4

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

Picture5

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

Picture6

11.绑定

df

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

Picture7

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

Picture8

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

Picture9

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

Picture10

16,修改状态变换:

sds

19.大功告成

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

posted on 2011-11-09 02:20  秦春林  阅读(2699)  评论(8编辑  收藏  举报

导航