之前由于忙于赶项目进度而忽视了软件的用户体验，界面挺难看，有一天看见组长优化了某个窗体，让人感觉完全不一样，我也不甘示弱，要把我的程序做顺眼一点才行。我的程序是一个以TabControl为主要容器的窗体，这样的程序窗体在目前广泛使用，谷歌浏览器Chrome，360安全卫士，QQ，鲁大师等。
重点是头部的TabItem的变迁，从文字到图标结合文字和单纯图标，让TabControl以一种比较友好的形式融入到界面中去。先看看控件的效果
为了让新的TabControl能适应三种情况（文字，图标下衬文字，图标），就定义了如下枚举，
public enum TabTypeEnum
{
ImageText,
Text,
Image,
}
同时在新的TabControl类里面定义了对应的属性TabType和私有字段_tabType
private TabTypeEnum _tabType;
public TabTypeEnum TabType
{
get { return _tabType; }
set
{
_tabType = value;
if (TabType != TabTypeEnum.Text)
{
SetStyle(ControlStyles.UserPaint |
ControlStyles.OptimizedDoubleBuffer |
ControlStyles.AllPaintingInWmPaint |
ControlStyles.ResizeRedraw |
ControlStyles.SupportsTransparentBackColor,
true);
base.UpdateStyles(); this.SizeMode = TabSizeMode.Fixed; }
else
{ SizeMode = defaultSizeModel;
this.Size = defaultSize;
}
}
}
在改变Tab的类型时要额外加一些处理逻辑，如果是Tab包含图标的，肯定要对控件的Style进行设置
SetStyle(ControlStyles.UserPaint |
ControlStyles.OptimizedDoubleBuffer |
ControlStyles.AllPaintingInWmPaint |
ControlStyles.ResizeRedraw |
ControlStyles.SupportsTransparentBackColor, true);
base.UpdateStyles();
这里设置的都与重绘控件时有关：双缓冲，改变大小则重绘控件。对于单纯图标还有图标+文字，单纯文字这三种方式的Tab大小会有所不同，这个Tab的大小通过ItemSize设置，这里我默认设置了纯文字则按回它初始值的大小，这个初始值在构造函数里获取；图标+文字和纯图标这两种方式在重绘时计算设置。
描绘控件又是去重写OnPaint方法，这样又用回疏远了很久的GDI+去描绘这个TabItem。这里有三种Tab方式，但着重介绍图标+文字这种方式，Tab选中会有阴影的，阴影可以自己PS一个圆角矩形，我这个是网上抠别人的，这个图片已添加“已有项”的形式添加到项目中，然后生成操作选“嵌入资源”。
然后在构造函数里面以下面的形式获取阴影图片资源
backImage = new Bitmap(this.GetType(), "select_background.jpg");
在绘图时，先绘阴影，再绘文字，最后绘图标。
获取当前Tab的矩形主要通过TabControl的GetTabRect(int index)方法，通过判断当前的Tab是不是被选中的，来决定绘不绘制阴影
if (this.SelectedIndex == i)
{
e.Graphics.DrawImage(backImage, this.GetTabRect(i));
}
然后根据Tab文字的Size来决定TabSize，
if (this.ItemSize.Width < (textSize.Width + this.Padding.X * ))
this.ItemSize =
new System.Drawing.Size((int)textSize.Width + this.Padding.X * ,
this.ItemSize.Height);
if (this.ItemSize.Height < (int)textSize.Height + ImageList.ImageSize.Height + this.Padding.Y * )
new System.Drawing.Size(this.ItemSize.Width,
(int)textSize.Height + ImageList.ImageSize.Height + this.Padding.Y * );
然后按照文字的Size还有Tab矩形的位置大小计算出文字的位置，描绘出文字
textPoint.X
= bounds.X + (bounds.Width - textSize.Width) / ;
textPoint.Y
= bounds.Bottom - textSize.Height - this.Padding.Y;
e.Graphics.DrawString(
this.TabPages[i].Text,
this.Font,
SystemBrushes.ControlText,
textPoint.X,
textPoint.Y);
最后描绘图标也是结合了图标的Size和Tab的位置与大小来决定图标所在的位置，
e.Graphics.DrawImage(
icon,
bounds.X + (bounds.Width - icon.Width) / ,
bounds.Top + this.Padding.Y);
加上了这行代码，能让描绘出来的文字少点锯齿
e.Graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
Tab的描绘就完成了，其余两种Tab只是省去了文字部分或者图标部分的描绘而已，两部分的代码都会在最后列举整个控件源码时顺带列举出来。
这个控件很大程度上参考了****网友的源码，原本的博文一下子找不出来，要是哪位园友知道的顺带告诉我，我作为参考链接附在文中，谢谢！
class ImageTabControl:TabControl
{
public enum TabTypeEnum
{
ImageText,
Text,
Image,
} Image backImage;
Size defaultSize;
TabSizeMode defaultSizeModel; public ImageTabControl()
{
defaultSize = this.ItemSize;
defaultSizeModel = this.SizeMode; this.TabType = TabTypeEnum.ImageText;
backImage = new Bitmap(this.GetType(), "select_background.jpg");
} private TabTypeEnum _tabType;
public TabTypeEnum TabType
{
get { return _tabType; }
set
{
_tabType = value;
if (TabType != TabTypeEnum.Text)
{
SetStyle(ControlStyles.UserPaint | // 控件将自行绘制，而不是通过操作系统来绘制
ControlStyles.OptimizedDoubleBuffer | // 该控件首先在缓冲区中绘制，而不是直接绘制到屏幕上，这样可以减少闪烁
ControlStyles.AllPaintingInWmPaint | // 控件将忽略 WM_ERASEBKGND 窗口消息以减少闪烁
ControlStyles.ResizeRedraw | // 在调整控件大小时重绘控件
ControlStyles.SupportsTransparentBackColor, // 控件接受 alpha 组件小于 255 的 BackColor 以模拟透明
true);
base.UpdateStyles(); this.SizeMode = TabSizeMode.Fixed;
}
else
{ SizeMode = defaultSizeModel;
this.Size = defaultSize;
}
}
} protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e); if (TabType == TabTypeEnum.ImageText)
DrawImageTextItem(e);
else if (TabType == TabTypeEnum.Image)
DrawImageItem(e);
else if (TabType == TabTypeEnum.Text)
DrawTextItem(e);
} protected virtual void DrawImageTextItem(PaintEventArgs e)
{
for (int i = ; i < this.TabCount; i++)
{
//e.Graphics.DrawRectangle(Pens.Red, this.GetTabRect(i));
if (this.SelectedIndex == i)
{
e.Graphics.DrawImage(backImage, this.GetTabRect(i));
} // Calculate text position
Rectangle bounds = this.GetTabRect(i);
PointF textPoint = new PointF();
SizeF textSize = TextRenderer.MeasureText(this.TabPages[i].Text, this.Font); if (this.ItemSize.Width < (textSize.Width + this.Padding.X * ))
this.ItemSize =
new System.Drawing.Size((int)textSize.Width + this.Padding.X * ,
this.ItemSize.Height);
if (this.ItemSize.Height < (int)textSize.Height + ImageList.ImageSize.Height + this.Padding.Y * )
new System.Drawing.Size(this.ItemSize.Width,
(int)textSize.Height + ImageList.ImageSize.Height + this.Padding.Y * ); // 注意要加上每个标签的左偏移量X
textPoint.X
= bounds.X + (bounds.Width - textSize.Width) / ;
textPoint.Y
= bounds.Bottom - textSize.Height - this.Padding.Y; // Draw highlights
e.Graphics.DrawString(
this.TabPages[i].Text,
this.Font,
SystemBrushes.ControlLightLight, // 高光颜色
textPoint.X,
textPoint.Y); // 绘制正常文字
textPoint.Y--;
e.Graphics.DrawString(
this.TabPages[i].Text,
this.Font,
SystemBrushes.ControlText, // 正常颜色
textPoint.X,
textPoint.Y); if (this.ImageList != null)
{
int index = this.TabPages[i].ImageIndex;
string key = this.TabPages[i].ImageKey;
Image icon = new Bitmap(, ); if (index > -)
{
icon = this.ImageList.Images[index];
}
if (!string.IsNullOrEmpty(key))
{
icon = this.ImageList.Images[key];
}
e.Graphics.DrawImage(
icon,
bounds.X + (bounds.Width - icon.Width) / ,
bounds.Top + this.Padding.Y);
}
} e.Graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
} protected virtual void DrawImageItem(PaintEventArgs e)
{
for (int i = ; i < this.TabPages.Count; i++)
{
if (i == this.SelectedIndex)
{
e.Graphics.DrawImage(backImage, this.GetTabRect(i));
} RectangleF itemRec = this.GetTabRect(i); if (ImageList != null)
{
int imageIndex=this.TabPages[i].ImageIndex;
string imageKey=this.TabPages[i].ImageKey;
Image ico=new Bitmap(,);
if (imageIndex >= )
ico = this.ImageList.Images[i];
if (!string.IsNullOrEmpty(imageKey))
ico = this.ImageList.Images[imageKey]; if (this.ItemSize.Height < ImageList.ImageSize.Height + this.Padding.Y * )
this.ItemSize = new System.Drawing.Size(this.ItemSize.Width,
ImageList.ImageSize.Height + this.Padding.Y * );
if (this.ItemSize.Width < ImageList.ImageSize.Width + this.Padding.X * )
this.ItemSize = new System.Drawing.Size(ImageList.ImageSize.Width + this.Padding.X * ,
this.ItemSize.Height); e.Graphics.DrawImage(ico, itemRec.X + (itemRec.Width - ico.Width) / , itemRec.Y + this.Padding.Y);
}
}
} protected virtual void DrawTextItem(PaintEventArgs e)
{
for (int i = ; i < this.TabCount; i++)
{
//e.Graphics.DrawRectangle(Pens.Red, this.GetTabRect(i));
if (this.SelectedIndex == i)
{
e.Graphics.DrawImage(backImage, this.GetTabRect(i));
} // Calculate text position
Rectangle bounds = this.GetTabRect(i);
PointF textPoint = new PointF();
SizeF textSize = TextRenderer.MeasureText(this.TabPages[i].Text, this.Font); // 注意要加上每个标签的左偏移量X
textPoint.X
= bounds.X + (bounds.Width - textSize.Width) / ;
textPoint.Y
= bounds.Y+(bounds.Height-textSize.Height)/; // Draw highlights
e.Graphics.DrawString(
this.TabPages[i].Text,
this.Font,
SystemBrushes.ControlLightLight, // 高光颜色
textPoint.X,
textPoint.Y); // 绘制正常文字
textPoint.Y--;
e.Graphics.DrawString(
this.TabPages[i].Text,
this.Font,
SystemBrushes.ControlText, // 正常颜色
textPoint.X,
textPoint.Y); }
}
}
ImageTabControl