用过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     

转到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" }                     }                },            };