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

原文 http://www.cnblogs.com/channingzhao/archive/2013/04/10/3012587.html

    刚刚入门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不会。

 

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

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

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