实例介绍
【实例简介】
【美化TabControl教程】仿苹果Safari浏览器选项卡
【实例截图】
教程：
分析，分析
山寨的灵魂在于分析，首先把刚才拍的高清果照扯过来分解了。
我把他分解成这几个部分：
- 根据标签不同修改窗体标题
- 导航标签
- 标签面板
-
自动缩放
- 这篇是#1-1，就专心讨论关于标签的东西，也就是第2、3点。
- 组件设计
- 分析了其中的功能，那么就要想想怎么来实现。
- 从功能来看，这个窗口实际上是由多个子面板切换来实现的，最多他加了点自动缩放。所以从本质来说，还是一个标签切换的窗口。
-
我最早想到的就是大名鼎鼎却又丑得无以复加的TabControl。
按照标签切换这个思想，TabControl完全可以胜任这次的山寨需求。但是TabControl这么丑，必须要给它整整容才行。想不到我竟然有整容的才华。
下手吧，年轻人！
因为要改动的地方会很多，所以还是完全自己来绘制标签好了。为了完全自定义TabControl，同时方便循环利用，从TabControl派生一个我们自己的标签控件TabControlEx。
|
1
|
publicclassTabControlEx : System.Windows.Forms.TabControl
|
这就是我们的TabControlEx，看起来和TabControl没什么两样（那是当然的）。
为了让他看起来不太一样，在构造函数里加上下面的代码。
|
1
2
3
4
5
6
7
8
|
base.SetStyle(
ControlStyles.UserPaint | // 控件将自行绘制，而不是通过操作系统来绘制
ControlStyles.OptimizedDoubleBuffer | // 该控件首先在缓冲区中绘制，而不是直接绘制到屏幕上，这样可以减少闪烁
ControlStyles.AllPaintingInWmPaint | // 控件将忽略 WM_ERASEBKGND 窗口消息以减少闪烁
ControlStyles.ResizeRedraw | // 在调整控件大小时重绘控件
ControlStyles.SupportsTransparentBackColor, // 控件接受 alpha 组件小于 255 的 BackColor 以模拟透明
true); // 设置以上值为 true
base.UpdateStyles();
|
这段代码的意思就像注释里说的，注意ControlStyles这个枚举是可以按位组合的，所以上面要用「或（|）」来进行连接，这样系统就会完全忽视TabControl这个基类的界面显示，而使用我们自己的方式来呈现UI。
现在TabControlEx看起来是这样的。
啥米？！！OMG！东西哪去了？？
嗯，当我第一次玩UserPaint的时候，也被吓了一跳。其实这就是上面我们设置的那句ControlStyles.UserPaint，于是系统就不帮我们画任何东西了。
所以从现在开始，一切都要靠自己了。下面所有的绘制都在OnPaint()方法中绘制。
为了先让我们找到方向，在OnPaint()方法中，我们先把Tab的位置找到，为此我们给每个Tab的边框都画出来。
|
1
2
3
4
5
6
7
|
protectedoverridevoidOnPaint(PaintEventArgs e)
{
for(inti = 0; i <this.TabCount; i )
{
e.Graphics.DrawRectangle(Pens.Red,this.GetTabRect(i));
}
}
|
TabControl.GetTabRect(int)的功能是获得指定index的标签的矩形位置。画完后，我们的TabControlEx看起来不那么迷糊了。
可是，标签的大小还是不对，我们要的不是普通的那种长条，而是闷骚的苹果的瘦高型，要像这样。
嗯，好吧，我们回到构造函数，用下面的语句来设置大小。
|
1
2
|
this.SizeMode = TabSizeMode.Fixed; // 大小模式为固定
this.ItemSize =newSize(44, 55); // 设定每个标签的尺寸
|
上面设置44x55其实只是因为苹果原版刚好是这么大，先这么着，后面如果不合适了，回头再来改。现在标签是这样的了。
Apple标签的选中状态是带阴影的，看起来很酷，可是如果我用GDI 来画的话，什么渐变什么变换，烦都烦死了。怎么办呢？
请记住，我们正在山寨。所谓山寨的精神，就是不问方法、不择手段，只要最后「看起来一样」就行了。所以，我决定用上抠图大法，把apple的背景图抠出来。
把这个背景保存为TabBackground.bmp文件，然后添加到项目中，把它做成「嵌入的资源」，就像这样。
然后我们用一个变量来保存背景图。因为这张图随时会用到，所以还是做成全局变量（类级别），在构造函数里读取图片。
|
1
2
3
4
5
6
|
Image backImage;
publicTabControlEx()
{
// （略）
backImage =newBitmap(this.GetType(),"TabButtonBackground.bmp"); // 从资源文件（嵌入到程序集）里读取图片
}
|
现在有了图标，加上去看看吧。在OnPaint()里这样写。
|
1
2
3
4
|
if(this.SelectedIndex == i)
{
e.Graphics.DrawImage(backImage,this.GetTabRect(i));
}
|
只有被选中的标签才会出现这种背景。于是，标签变成这样了。
绘制文字
这会看着还挺单调的，所以我们来加点料。下面来画文字。说起文字，我想你应该注意到了，Safari的标签文字，都是带有阴影的（准确的说是高光）。
所以，在绘制文字时，先用高光色绘制第一遍，再用普通文字色（黑）绘制第二遍。
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
protectedoverridevoidOnPaint(PaintEventArgs e)
{
for(inti = 0; i <this.TabCount; i )
{
// （略）
// Calculate text position
Rectangle bounds =this.GetTabRect(i);
PointF textPoint =newPointF();
SizeF textSize = TextRenderer.MeasureText(this.TabPages.Text,this.Font);
// 注意要加上每个标签的左偏移量X
textPoint.X
= bounds.X (bounds.Width - textSize.Width) / 2;
textPoint.Y
= bounds.Bottom - textSize.Height -this.Padding.Y;
// Draw highlights
e.Graphics.DrawString(
this.TabPages.Text,
this.Font,
SystemBrushes.ControlLightLight, // 高光颜色
textPoint.X,
textPoint.Y);
// 绘制正常文字
textPoint.Y--;
e.Graphics.DrawString(
this.TabPages.Text,
this.Font,
SystemBrushes.ControlText, // 正常颜色
textPoint.X,
textPoint.Y);
}
}
|
缤纷色彩的源泉：图标
文字也有了，那么接下来就轮到图标了。TabControl是用ImageList控件来存储自己使用的图标的，那么添加一个ImageList，然后加入图标。注意这里都要32x32的图标，所以应该设置ImageList.ImageSize为32x32。
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
// 绘制图标
if(this.ImageList !=null)
{
intindex =this.TabPages.ImageIndex;
stringkey =this.TabPages.ImageKey;
Image icon =newBitmap(1, 1);
if(index > -1)
{
icon =this.ImageList.Images[index];
}
if(!string.IsNullOrEmpty(key))
{
icon =this.ImageList.Images[key];
}
e.Graphics.DrawImage(
icon,
bounds.X (bounds.Width - icon.Width) / 2,
bounds.Top this.Padding.Y);
}
|
嗯，现在我们的标签看起来像那么回事了，接下来就该难看的红线条退休了。再完善一下，我们的标签就OK了。
同步滚动演示。（上面是山寨，下面是正品，正品的文字开了抗锯齿，山寨没开，这是次要问题）
到此，标签导航部分已经完成，剩下的，就是窗体的自动缩放和同步修改Text功能了
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论