原文 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不会。
![](https://yqfile.alicdn.com/img_1c53668bcee393edac0d7b3b3daff1ae.gif?x-oss-process=image/resize,w_1400/format,webp)
我做的这个TabItem不可重用,意思就是你有多少个选项卡就复制出多少个,改图片和文本,而不能在XAML代码里分别引用相同的style来自 定义图片,只能在资源字典里整,可能比较麻烦吧,我也不知道有啥好办法没,反正这样做我也方便后期修改不同选项卡的图片或文本。
TabItem内包含的Grid,我设置了Margin=10,为了后期在Grid中嵌套Frame引用Page,并且做背景渐进透明效果,记得在Frame上加NavigationUIVisibility="Hidden" 屏蔽Page导航条。
Blend4会自动生成一些没用的代码,可以手动删掉,修改调整后放到资源字典,熟悉代码的也可以自己直接修改细节而不需要工具的辅助。