T1-17 卷轴动画界面
1、窗口设计
新建项目中MainWindow的Window属性：
“外观”栏目中，WindowStyle-None，窗口最上方的控制条被去除；
“布局”栏目中，Height=600，Width=800；
“公共属性”栏目中，WindowStartupLocation-CenterScreen。
LayoutRoot属性设置为：
“画笔”栏目中，Background-纯色画笔，深紫色。
2、画面
画面由3部分元素组成。1是图片Image控件（pict1）,2是背景（实际上是1个被填充图形的Rectangle控件，名为bj），3是白色矩形边框，也是Rectangle控件，名为rectanle。图片pict1“裱”在有背景图案的“矩形”上，矩形图案这样完成：在项目中“添加现有项”插入图片“背景2.jpg”、拖入【设计面板】并选中，选择菜单“工具”-“生成画笔资源”（ImageBrish资源），用此资源作为背景“矩形”属性“Fill”的“画笔资源”，具体操作可以参考“设计基础”。
这3部分元素用Grid组合在一起。
3、卷轴
共2个卷轴，每个卷轴由2个矩形组成，其中1个矩形构成轴面，选择红色渐变画笔，画笔设置如图T1-18所示。为了使白色光线沿轴向伸展，需要使用【工具】面板中的“渐变工具”调整渐变方向。
另1个矩形构成轴心，选择黑色渐变画笔，设置同前，长度略长，同时矩形边角调成“弧形”，如图T1-19所示。
T1-18 轴面画笔设置
T1-19 轴心画笔设置
将这2个矩形用Grid组合，名为zhouLeft，复制又生成1个卷轴zhouRight。
4、遮罩
动画的初始状态是2个卷轴停靠在左端，看不到画面，这实际上是被1个矩形（Rectangle控件，名为zhezhao）遮罩，此矩形的Fill颜色和窗口的Background颜色一样（可以设置1个画笔资源，窗口的background和遮罩矩形的Fill属性都采用此画笔资源）。
左边轴不动，右边轴平移到右端8秒，停止8秒，再以同样时间返回到左端；同时拖动遮罩矩形左边做同步运动（矩形的X方向变换，Y轴不动），这样动画就完成了。故事板设计如T1-19a所示。
T1-19a 卷轴动画故事板设计
T1-19b 卷轴动画触发器设计
6、鼠标点击右边的卷轴
鼠标点击右边的卷轴zhouRight，无论用鼠标的左键或右键，引发动画重复一次，使用触发器设计，如图t1-19b。
7、关闭按钮
“关闭”按钮，其Click事件代码：
Application.Current.Shutdown();
（或this.Close();）
