新手用WPF山寨QQ管家7.6(一)

      刚刚入门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会自动生成一些没用的代码,可以手动删掉,修改调整后放到资源字典,熟悉代码的也可以自己直接修改细节而不需要工具的辅助。

原文地址:https://www.cnblogs.com/channingzhao/p/3012587.html