之前不会用blend,感觉好难的,但美工给出的效果自己有没办法实现,所以研究了一下blend,感觉没有想象中的那么难
废话不多说,开始界面设计
今天拿到美工给的一个界面效果图
这个界面说实话,还可以吧,勉强说得过去。拿到界面效果图,难的两个部分都让我框起来的,这一看就是wpf里面的控件TabControl美化而来,其他部分都是很好弄得,这一篇我们下来美化一个tabControl控件。如下图:
这里我们借助vs 自带的blend,
,这个软件安装vs就会默认安装上。
我们来新建一个wpf项目,然后在里面修改这个控件
这是我的blend for vs
根据图中的标识,我们拖拽一个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,有时间我还会将美工设计的另一个控件美化篇贴出来