手把手教你:亲手打造Silverlight的Win8 Metro外观(3) 子菜单项
用过win8 的同鞋都会发现.当你按下win 键后, 打开菜单的时候..所有的菜单 都会有一个小动画,关闭亦是如此.所以我们要给desktopitem 添加二个状态 Open & Close
由于我们所做的都是模版化控件,因此无法在blend 中直接编辑且 可视化的编辑.所做动画我们必须自己建一个临时项目或用户控件..做好后COPY代码即可.
打开Blend, 新建一个项目..托入一个border
点击状态.
添加一个状态组 VisualStateGroup
然后在VisualStateGroup 下添加2个状态
Show
Hide
然后我们选择Show先给Show做上动画..
然后打开时间线(什么?你找不到时间线在哪打开?)
在时间线分别添加 3个时间点, 0(0秒) 0.4(0.4秒=400ms) 0.5
在0时间上将缩放改为 0.5 透明度0
0.4时间上缩放改为1.2 透明度1
0.5时间 缩放改为1
些时会有一个 变大并伴有反弹效果
接着切换到Hide状态上同上添加2个时间点 0 0.5
0.5缩放为0.5 透明度0
此时动画制作完毕, 将代码COPY到 项目模版的外观代码中
动画代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
在DesktopItem的 模版Template中放入一个按钮
使其Tag值绑定 数据的Code值 (Code存放的是xaml页面名)
完整的模版样式代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
转到DesktopItem 的cs 代码窗口, 重写OnApplyTemplate事件.
加入状态转换
1 public override void OnApplyTemplate()
2 {
3 base.OnApplyTemplate();
4 VisualStateManager.GoToState(this, "Show", false);
5 }
到此菜单全部制作完毕, 测试效果.!
测试数据为:
desktopView.ItemsSource =
new List
{
new TestModel {
Name = "编码设置",
Children = new List {
new TestModel { Name = "00101",Code = "Test" } ,
new TestModel { Name = "00102", Code="Test1" } ,
new TestModel { Name = "00103",}
}
},
new TestModel {
Name = "系统设置",
Children = new List {
new TestModel { Name = "00201" }
}
},
};
页:
[1]