新手用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 x:Key="NavTabItem" TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="TabItemMouseOver">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#8C454545"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#4CFFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#19FFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="border">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0.217"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#26FFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="border">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0.888"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#0CFFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="TabItemSelected">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#CC3D3B3B"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#66FFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="border">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0.104"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#66FFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="border">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0.892"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#19FFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Grid>
                        <Border x:Name="border" BorderThickness="0.7" CornerRadius="5" BorderBrush="Transparent">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="Transparent" Offset="0"/>
                                    <GradientStop Color="Transparent" Offset="1"/>
                                    <GradientStop Color="Transparent" Offset="0.847"/>
                                    <GradientStop Color="Transparent" Offset="0.928"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="20"/>
                                </Grid.RowDefinitions>
                                <Image Height="47" Source="Resource/Image/11.png"/>
                                <TextBlock Grid.Row="1" Height="15" Foreground="White" Text="日历" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Grid>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.ExitActions>
                                <RemoveStoryboard BeginStoryboardName="TabItemMouseOver_BeginStoryboard"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="TabItemMouseOver_BeginStoryboard" Storyboard="{StaticResource TabItemMouseOver}"/>
                            </Trigger.EnterActions>
                        </Trigger>
                        <Trigger Property="Selector.IsSelected" Value="True">
                            <Trigger.ExitActions>
                                <RemoveStoryboard BeginStoryboardName="TabItemSelected_BeginStoryboard"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="TabItemSelected_BeginStoryboard" Storyboard="{StaticResource TabItemSelected}"/>
                            </Trigger.EnterActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

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

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

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