手把手教你:亲手打造Silverlight的Win8 Metro外观(3) 子菜单项

kaywang

　　用过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" }
}
},
};