导航

新手用WPF山寨QQ管家7.6（一）

Posted on 2013-04-10 17:07  不死小熊  阅读(7187)  评论(21)  编辑  收藏  举报

      刚刚入门WPF，界面方面参考《基于Expression Blend 4中文版WPF和Silverlight项目设计基础》 一书学了一些，由于本人不是搞前台设计的，可是WPF做前台确实蛮好，加上公司要求做一个比较炫的界面，所以最后决定参考QQ管家的界面来做，接下来就是分享一下我这个新手边学边做的过程，因为都是笨办法来画，所以代码难免存在冗余.....

先来展示一下目前的成果吧~~2013-04-10

额....导航图标随便找的，凑合凑合

支持换肤，不是完全按照QQ管家界面走的，大部分包含的界面做了些，尤其是项目中可能用到的

1.导航TabItem的制作：

打开Blend4新建个WPF项目，然后在MainWindow里画一个Border，并设置BorderThickness="0.7" CornerRadius="5"  BorderBrush="Transparent"分别表示线、圆角、边框透明。

在属性面板里设置Border背景色为线性渐变，颜色设置成你想要的效果，但是最后要都变成透明，因为这里不做设计，后面做MouseOver触发效果的时候，系统会自动给你生成默认状态下的颜色，比如黑色，到时候返回头再做就浪费时间了，这是个人体会，可能还有更高明的办法吧~

在Border里放一个Grid，并分2行RowDefinition，上面放导航图片，下面写对应文本。

圈住Border包裹住的这些控件，然后在选工具->构成控件，选择TabItem，可以生成在当前Window下，也可以直接生成到全局，个人感觉在当前Window下设计比较方便，之后再剪切到资源字典里。

按F6切换到设计界面，方便做效果，如图：

 

 

Blend4设计界面

“触发器”界面里能添加和修改针对控件的点击、焦点、可用、鼠标移动等事件，选择IsMouseOver=True属性，然后在下面的“激活时的操作”点+号，就能添加一个故事版了，不过名字是系统给起的，个人推荐在“对象和时间线”里先添加一个命名好的故事版再在触发器里选择刚才添加的比较好，这样不会再到代码里手动修改名字。

可能会有发现IsMouseOver=False在触发器里不能写成True，那么手动在代码里改，添加好“激活时操作”，别忘了在“取消激活时的操作”里添加同样的故事版，并设置为Remove，如果是做的时间渐变效果就单独做一个故事版来做消失效果，在“取消激活时的操作”里指定故事版并Begin。

选好故事版就能开始设计针对不同触发器的效果了，在“对象和时间线”选择要设计的元素Border分别修改将之前做的边框和背景色变为可见。

在时间线上会出现一个原点表示在当前时刻触发，如果想做一个0.5秒渐变出现的效果就先把黄色指针放到0.5然后修改边框和背景色。

IsPressed点击事件可以把MouseOver最后的动画点复制过来，再加深颜色或者其他想要的效果，这样过度会好，尤其是有时间的渐变，个人观点....

样品展示

再细节的地方就不写啦，看看代码，自己多点点就明白了，反正我这都是笨办法，最后也没做出跟官方类似的效果，但是也有70%吧~

 最后把做好的TabItem引用到TabControl中，Style="{DynamicResource NavTabItem}"， DynamicResource和StaticResource的区别百度找找，基本就是换肤的时候DynamicResource会跟着换，StaticResource不会。

 

查看导航Style代码 
 1 <!--选项卡导航-->
 2     <Style x:Key="NavTabItem" TargetType="{x:Type TabItem}">
 3         <Setter Property="Template">
 4             <Setter.Value>
 5                 <ControlTemplate TargetType="{x:Type TabItem}">
 6                     <ControlTemplate.Resources>
 7                         <Storyboard x:Key="TabItemMouseOver">
 8                             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
 9                                 <EasingColorKeyFrame KeyTime="0" Value="#8C454545"/>
10                             </ColorAnimationUsingKeyFrames>
11                             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
12                                 <EasingColorKeyFrame KeyTime="0" Value="#4CFFFFFF"/>
13                             </ColorAnimationUsingKeyFrames>
14                             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
15                                 <EasingColorKeyFrame KeyTime="0" Value="#19FFFFFF"/>
16                             </ColorAnimationUsingKeyFrames>
17                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="border">
18                                 <EasingDoubleKeyFrame KeyTime="0" Value="0.217"/>
19                             </DoubleAnimationUsingKeyFrames>
20                             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="border">
21                                 <EasingColorKeyFrame KeyTime="0" Value="#26FFFFFF"/>
22                             </ColorAnimationUsingKeyFrames>
23                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="border">
24                                 <EasingDoubleKeyFrame KeyTime="0" Value="0.888"/>
25                             </DoubleAnimationUsingKeyFrames>
26                             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="border">
27                                 <EasingColorKeyFrame KeyTime="0" Value="#0CFFFFFF"/>
28                             </ColorAnimationUsingKeyFrames>
29                         </Storyboard>
30                         <Storyboard x:Key="TabItemSelected">
31                             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
32                                 <EasingColorKeyFrame KeyTime="0" Value="#CC3D3B3B"/>
33                             </ColorAnimationUsingKeyFrames>
34                             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
35                                 <EasingColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
36                             </ColorAnimationUsingKeyFrames>
37                             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
38                                 <EasingColorKeyFrame KeyTime="0" Value="#66FFFFFF"/>
39                             </ColorAnimationUsingKeyFrames>
40                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="border">
41                                 <EasingDoubleKeyFrame KeyTime="0" Value="0.104"/>
42                             </DoubleAnimationUsingKeyFrames>
43                             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="border">
44                                 <EasingColorKeyFrame KeyTime="0" Value="#66FFFFFF"/>
45                             </ColorAnimationUsingKeyFrames>
46                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="border">
47                                 <EasingDoubleKeyFrame KeyTime="0" Value="0.892"/>
48                             </DoubleAnimationUsingKeyFrames>
49                             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="border">
50                                 <EasingColorKeyFrame KeyTime="0" Value="#19FFFFFF"/>
51                             </ColorAnimationUsingKeyFrames>
52                         </Storyboard>
53                     </ControlTemplate.Resources>
54                     <Grid>
55                         <Border x:Name="border" BorderThickness="0.7" CornerRadius="5" BorderBrush="Transparent">
56                             <Border.Background>
57                                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
58                                     <GradientStop Color="Transparent" Offset="0"/>
59                                     <GradientStop Color="Transparent" Offset="1"/>
60                                     <GradientStop Color="Transparent" Offset="0.847"/>
61                                     <GradientStop Color="Transparent" Offset="0.928"/>
62                                 </LinearGradientBrush>
63                             </Border.Background>
64                             <Grid>
65                                 <Grid.RowDefinitions>
66                                     <RowDefinition Height="*"/>
67                                     <RowDefinition Height="20"/>
68                                 </Grid.RowDefinitions>
69                                 <Image Height="47" Source="Resource/Image/11.png"/>
70                                 <TextBlock Grid.Row="1" Height="15" Foreground="White" Text="日历" VerticalAlignment="Center" HorizontalAlignment="Center"/>
71                             </Grid>
72                         </Border>
73                     </Grid>
74                     <ControlTemplate.Triggers>
75                         <Trigger Property="IsMouseOver" Value="True">
76                             <Trigger.ExitActions>
77                                 <RemoveStoryboard BeginStoryboardName="TabItemMouseOver_BeginStoryboard"/>
78                             </Trigger.ExitActions>
79                             <Trigger.EnterActions>
80                                 <BeginStoryboard x:Name="TabItemMouseOver_BeginStoryboard" Storyboard="{StaticResource TabItemMouseOver}"/>
81                             </Trigger.EnterActions>
82                         </Trigger>
83                         <Trigger Property="Selector.IsSelected" Value="True">
84                             <Trigger.ExitActions>
85                                 <RemoveStoryboard BeginStoryboardName="TabItemSelected_BeginStoryboard"/>
86                             </Trigger.ExitActions>
87                             <Trigger.EnterActions>
88                                 <BeginStoryboard x:Name="TabItemSelected_BeginStoryboard" Storyboard="{StaticResource TabItemSelected}"/>
89                             </Trigger.EnterActions>
90                         </Trigger>
91                     </ControlTemplate.Triggers>
92                 </ControlTemplate>
93             </Setter.Value>
94         </Setter>
95     </Style>

我做的这个TabItem不可重用，意思就是你有多少个选项卡就复制出多少个，改图片和文本，而不能在XAML代码里分别引用相同的style来自定义图片，只能在资源字典里整，可能比较麻烦吧，我也不知道有啥好办法没，反正这样做我也方便后期修改不同选项卡的图片或文本。

TabItem内包含的Grid，我设置了Margin=10，为了后期在Grid中嵌套Frame引用Page，并且做背景渐进透明效果，记得在Frame上加NavigationUIVisibility="Hidden" 屏蔽Page导航条。

Blend4会自动生成一些没用的代码，可以手动删掉，修改调整后放到资源字典，熟悉代码的也可以自己直接修改细节而不需要工具的辅助。