之前不会用blend，感觉好难的，但美工给出的效果自己有没办法实现，所以研究了一下blend，感觉没有想象中的那么难
废话不多说，开始界面设计
今天拿到美工给的一个界面效果图
这个界面说实话，还可以吧，勉强说得过去。拿到界面效果图，难的两个部分都让我框起来的，这一看就是wpf里面的控件TabControl美化而来，其他部分都是很好弄得，这一篇我们下来美化一个tabControl控件。如下图:
这里我们借助vs 2015 自带的blend，
，这个软件安装vs2015就会默认安装上。
我们来新建一个wpf项目，然后在里面修改这个控件
这是我的blend for vs2015
根据图中的标识，我们拖拽一个TabControl控件到界面上去，然后调整好大小，如下图:
接下来我们就拿它开刀吧
首先分析，明显的TabItem部分不符合我们的要求，这样我们就编辑这部分样式即可
这样我们可以看到代码会变为如下
1
2
3
4
5
6
7
8
9
10
11
View Code
后面的一个样式是我后加上去的，这样方便查看效果
我们在样式中找到key=”TabItemStyle1”，这个样式就决定了我们现在TabItem展示样式。
我们可以看到，这个样式中有个边框，我们可以在样式中找到这个边框，然后去掉它，看样是
1
2
3
View Code
修改为
1
2
3
View Code
现在就可以看到边框消失了
下面我们将背景图改为白色，我们先来看他目前的背景颜色定义 ，这个就是定义了背景颜色，下面我们修改key=ButtonNormalBackground的颜色即可修改TabItem的背景颜色了。
我们可以找到现在定义为：
1
2
3
4
5
6
View Code
我们把渐变去掉，只要白色即可修改为：，现在我们再来看效果
，怎么样，是不是接近了美工给的效果图呢，
好吧，还是差挺多，我们继续修改
TabItem下面有个横线，而选中的下面还有个粗横线，并且被选中额TabItem文字为浅蓝色背景，接下来我们逐一进行修改。
先来添加TabItem下面的横线，我们可以看到这个横线在TabItem与下面的面板之间，所以我们不能修改TabItem来添加这条横线，所以我们来修改整个TabControl的样式，
在代码中查找新生成的TabControlStyle1样式
我们可以看到以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
View Code
我们可以分析看出，控件是分了两行两列，TabItem在上面一行，Panel放在了下面一样，我们可以巧妙的加入一个Grid控件(将两行改为3行，Grid放在第二行，而原来的panel改为第三行)，并设置背景颜色，及高度，然后让Grid控件位于TabItem及panel之间，代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
View Code
现在我们再来看一下效果
是不是离成功又进了一步呢，下面我们来添加选中状态下的比较粗的下划线
这次我们又该回来修改TabItem的样式了。
在代码中找到如下：
1
2
3
4
这个样式定义了被选中是的状态，这样我们可以在TabItem中添加一个粗的下划线，平时的时候让其hidden，而选中时隐藏。同样这个下划线使用Grid控件来构造
代码修改后如下:
1
2
3
4
5
6
7
8
注意，上面的代码只由6,7行是后添加的
下面我们来修改被选中状态的属性值
1
2
3
4
5
同样需要注意的是，只有第4行是我后添加的代码
现在我们可以来看下效果了
怎么样，已经无限接近了吧，还剩下一个被选中状态是文字的颜色，我想大家都知道怎么修改了吧。
来，这就修改一下，添加一行代码即可，
好了，这个简单的控件样式到此就全部结束了
是不是跟美工设计的差不多呢，如果运行起来看，还有些地方需要修改，例如鼠标在头部悬浮，头部的样式就会发生变化，这样我们还需要继续修改样式。
我们可以通过删除一行代码就可以达到效果了
1
2
5
over，有时间我还会将美工设计的另一个控件美化篇贴出来
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
