手把手教你:亲手打造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          <Border.Projection>
 2                             <PlaneProjection/>
 3                         </Border.Projection>
 4                         <Border.RenderTransform>
 5                             <CompositeTransform/>
 6                         </Border.RenderTransform>
 7                         <VisualStateManager.VisualStateGroups>
 8                             <VisualStateGroup x:Name="VisualStateGroup">
 9                                 <VisualStateGroup.Transitions>
10                                 </VisualStateGroup.Transitions>
11                                 <VisualState x:Name="Show">
12                                     <Storyboard>
13                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DesktopItem_RootLayout">
14                                             <EasingDoubleKeyFrame KeyTime="0" Value="0.095"/>
15                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
16                                         </DoubleAnimationUsingKeyFrames>
17                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="DesktopItem_RootLayout">
18                                             <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
19                                             <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.2"/>
20                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
21                                         </DoubleAnimationUsingKeyFrames>
22                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="DesktopItem_RootLayout">
23                                             <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
24                                             <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.2"/>
25                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
26                                         </DoubleAnimationUsingKeyFrames>
27                                     </Storyboard>
28                                 </VisualState>
29                                 <VisualState x:Name="Hide">
30                                     <Storyboard>
31                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="DesktopItem_RootLayout">
32                                             <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
33                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.5"/>
34                                         </DoubleAnimationUsingKeyFrames>
35                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="DesktopItem_RootLayout">
36                                             <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
37                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.5"/>
38                                         </DoubleAnimationUsingKeyFrames>
39                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DesktopItem_RootLayout">
40                                             <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
41                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.1"/>
42                                         </DoubleAnimationUsingKeyFrames>
43                                     </Storyboard>
44                                 </VisualState>
45                             </VisualStateGroup>
46                         </VisualStateManager.VisualStateGroups>

在DesktopItem的模版Template中放入一个按钮

使其Tag值绑定数据的Code值 (Code存放的是xaml页面名)

<Button x:Name="desktopItemButton" Style="{StaticResource TileIcon_Btn}" Tag="{Binding Code}" >
                            <TextBlock Text="{Binding Name}" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Button>

完整的模版样式代码

 1     <Style TargetType="local:DesktopItem">
 2         <Setter Property="Background" Value="LightCoral" />
 3         <Setter Property="Template">
 4             <Setter.Value>
 5                 <ControlTemplate TargetType="local:DesktopItem">
 6                     <Border Margin="2"  BorderThickness="1" BorderBrush="Black" x:Name="DesktopItem_RootLayout" RenderTransformOrigin="0.5,0.5" MinHeight="80" MinWidth="150"  Cursor="Hand">
 7                         <Border.Projection>
 8                             <PlaneProjection/>
 9                         </Border.Projection>
10                         <Border.RenderTransform>
11                             <CompositeTransform/>
12                         </Border.RenderTransform>
13                         <VisualStateManager.VisualStateGroups>
14                             <VisualStateGroup x:Name="VisualStateGroup">
15                                 <VisualStateGroup.Transitions>
16                                 </VisualStateGroup.Transitions>
17                                 <VisualState x:Name="Show">
18                                     <Storyboard>
19                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DesktopItem_RootLayout">
20                                             <EasingDoubleKeyFrame KeyTime="0" Value="0.095"/>
21                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
22                                         </DoubleAnimationUsingKeyFrames>
23                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="DesktopItem_RootLayout">
24                                             <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
25                                             <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.2"/>
26                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
27                                         </DoubleAnimationUsingKeyFrames>
28                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="DesktopItem_RootLayout">
29                                             <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
30                                             <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.2"/>
31                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
32                                         </DoubleAnimationUsingKeyFrames>
33                                     </Storyboard>
34                                 </VisualState>
35                                 <VisualState x:Name="Hide">
36                                     <Storyboard>
37                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="DesktopItem_RootLayout">
38                                             <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
39                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.5"/>
40                                         </DoubleAnimationUsingKeyFrames>
41                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="DesktopItem_RootLayout">
42                                             <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
43                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.5"/>
44                                         </DoubleAnimationUsingKeyFrames>
45                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DesktopItem_RootLayout">
46                                             <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
47                                             <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.1"/>
48                                         </DoubleAnimationUsingKeyFrames>
49                                     </Storyboard>
50                                 </VisualState>
51                             </VisualStateGroup>
52                         </VisualStateManager.VisualStateGroups>
53                         <Button x:Name="desktopItemButton" Style="{StaticResource TileIcon_Btn}" Tag="{Binding Code}" >
54                             <TextBlock Text="{Binding Name}" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
55                         </Button>
56                     </Border>
57                 </ControlTemplate>
58             </Setter.Value>
59         </Setter>
60     </Style>

转到DesktopItem 的cs 代码窗口, 重写OnApplyTemplate事件.

加入状态转换

1         public override void OnApplyTemplate()
2         {
3             base.OnApplyTemplate();
4             VisualStateManager.GoToState(this, "Show", false);
5         }

到此菜单全部制作完毕, 测试效果.!

测试数据为:

desktopView.ItemsSource = 
            new List<TestModel> 
            {
                new TestModel {
                    Name = "编码设置",
                    Children = new List<TestModel> { 
                        new TestModel { Name = "00101",  Code = "Test" } ,
                        new TestModel { Name = "00102", Code="Test1" } ,
                        new TestModel { Name = "00103",  } 
                    } 
                },
                new TestModel {
                    Name = "系统设置",
                    Children = new List<TestModel> { 
                        new TestModel { Name = "00201" } 
                    }
                },
            };

<local:Desktop x:Name="desktopView" />

如须转载请说明出处

多抽出一分钟时间学习，让你的生命更加精彩，敢想敢做，努力做最好！

博客园: JonneyDong 地址:http://www.cnblogs.com/jonneydong/