对TabControl的简单优化

　　之前由于忙于赶项目进度而忽视了软件的用户体验，界面挺难看，有一天看见组长优化了某个窗体，让人感觉完全不一样，我也不甘示弱，要把我的程序做顺眼一点才行。我的程序是一个以TabControl为主要容器的窗体，这样的程序窗体在目前广泛使用，谷歌浏览器Chrome，360安全卫士，QQ，鲁大师等。

 

重点是头部的TabItem的变迁，从文字到图标结合文字和单纯图标，让TabControl以一种比较友好的形式融入到界面中去。先看看控件的效果

为了让新的TabControl能适应三种情况（文字，图标下衬文字，图标），就定义了如下枚举，

1         public enum TabTypeEnum

2         {

3             ImageText,

4             Text,

5             Image,

6         }

 

同时在新的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 * 2))

                    this.ItemSize =

                        new System.Drawing.Size((int)textSize.Width + this.Padding.X * 2,

                            this.ItemSize.Height);

                if (this.ItemSize.Height < (int)textSize.Height + ImageList.ImageSize.Height + this.Padding.Y * 2)

                    new System.Drawing.Size(this.ItemSize.Width,

                        (int)textSize.Height + ImageList.ImageSize.Height + this.Padding.Y * 2);

然后按照文字的Size还有Tab矩形的位置大小计算出文字的位置，描绘出文字

                textPoint.X

                    = bounds.X + (bounds.Width - textSize.Width) / 2;

                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) / 2,

                        bounds.Top + this.Padding.Y);

加上了这行代码，能让描绘出来的文字少点锯齿

e.Graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;  

Tab的描绘就完成了，其余两种Tab只是省去了文字部分或者图标部分的描绘而已，两部分的代码都会在最后列举整个控件源码时顺带列举出来。

         这个控件很大程度上参考了CSDN网友的源码，原本的博文一下子找不出来，要是哪位园友知道的顺带告诉我，我作为参考链接附在文中，谢谢！

  1     class ImageTabControl:TabControl

  2     {

  3         public enum TabTypeEnum

  4         {

  5             ImageText,

  6             Text,

  7             Image,

  8         }

  9 

 10         Image backImage;

 11         Size defaultSize;

 12         TabSizeMode defaultSizeModel;

 13 

 14         public ImageTabControl()

 15         {

 16             defaultSize = this.ItemSize;

 17             defaultSizeModel = this.SizeMode;

 18 

 19             this.TabType = TabTypeEnum.ImageText;

 20             backImage = new Bitmap(this.GetType(), "select_background.jpg");

 21         }

 22 

 23         private TabTypeEnum _tabType;

 24         public TabTypeEnum TabType

 25         {

 26             get { return _tabType; }

 27             set

 28             {

 29                 _tabType = value;

 30                 if (TabType != TabTypeEnum.Text)

 31                 {

 32                     SetStyle(ControlStyles.UserPaint |                      // 控件将自行绘制，而不是通过操作系统来绘制  

 33                      ControlStyles.OptimizedDoubleBuffer |          // 该控件首先在缓冲区中绘制，而不是直接绘制到屏幕上，这样可以减少闪烁  

 34                      ControlStyles.AllPaintingInWmPaint |           // 控件将忽略 WM_ERASEBKGND 窗口消息以减少闪烁  

 35                      ControlStyles.ResizeRedraw |                   // 在调整控件大小时重绘控件  

 36                      ControlStyles.SupportsTransparentBackColor,    // 控件接受 alpha 组件小于 255 的 BackColor 以模拟透明  

 37                      true);

 38                     base.UpdateStyles();

 39 

 40                     this.SizeMode = TabSizeMode.Fixed;

 41                 }

 42                 else

 43                 {

 44 

 45                     SizeMode = defaultSizeModel;

 46                     this.Size = defaultSize;

 47                 }

 48             }

 49         }

 50 

 51         protected override void OnPaint(PaintEventArgs e)

 52         {

 53             base.OnPaint(e);

 54 

 55             if (TabType == TabTypeEnum.ImageText)

 56                 DrawImageTextItem(e);

 57             else if (TabType == TabTypeEnum.Image)

 58                 DrawImageItem(e);

 59             else if (TabType == TabTypeEnum.Text)

 60                 DrawTextItem(e);

 61         }

 62 

 63         protected virtual void DrawImageTextItem(PaintEventArgs e)

 64         {

 65             for (int i = 0; i < this.TabCount; i++)

 66             {

 67                 //e.Graphics.DrawRectangle(Pens.Red, this.GetTabRect(i));

 68                 if (this.SelectedIndex == i)

 69                 {

 70                     e.Graphics.DrawImage(backImage, this.GetTabRect(i));

 71                 }

 72 

 73                 // Calculate text position  

 74                 Rectangle bounds = this.GetTabRect(i);

 75                 PointF textPoint = new PointF();

 76                 SizeF textSize = TextRenderer.MeasureText(this.TabPages[i].Text, this.Font);

 77 

 78                 if (this.ItemSize.Width < (textSize.Width + this.Padding.X * 2))

 79                     this.ItemSize =

 80                         new System.Drawing.Size((int)textSize.Width + this.Padding.X * 2,

 81                             this.ItemSize.Height);

 82                 if (this.ItemSize.Height < (int)textSize.Height + ImageList.ImageSize.Height + this.Padding.Y * 2)

 83                     new System.Drawing.Size(this.ItemSize.Width,

 84                         (int)textSize.Height + ImageList.ImageSize.Height + this.Padding.Y * 2);

 85 

 86                 // 注意要加上每个标签的左偏移量X  

 87                 textPoint.X

 88                     = bounds.X + (bounds.Width - textSize.Width) / 2;

 89                 textPoint.Y

 90                     = bounds.Bottom - textSize.Height - this.Padding.Y;

 91 

 92                 // Draw highlights  

 93                 e.Graphics.DrawString(

 94                     this.TabPages[i].Text,

 95                     this.Font,

 96                     SystemBrushes.ControlLightLight,    // 高光颜色  

 97                     textPoint.X,

 98                     textPoint.Y);

 99 

100                 // 绘制正常文字  

101                 textPoint.Y--;

102                 e.Graphics.DrawString(

103                     this.TabPages[i].Text,

104                     this.Font,

105                     SystemBrushes.ControlText,    // 正常颜色  

106                     textPoint.X,

107                     textPoint.Y);

108 

109 

110                 if (this.ImageList != null)

111                 {

112                     int index = this.TabPages[i].ImageIndex;

113                     string key = this.TabPages[i].ImageKey;

114                     Image icon = new Bitmap(1, 1);

115 

116                     if (index > -1)

117                     {

118                         icon = this.ImageList.Images[index];

119                     }

120                     if (!string.IsNullOrEmpty(key))

121                     {

122                         icon = this.ImageList.Images[key];

123                     }

124                     e.Graphics.DrawImage(

125                         icon,

126                         bounds.X + (bounds.Width - icon.Width) / 2,

127                         bounds.Top + this.Padding.Y);

128                 }

129             }

130 

131             e.Graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;  

132         }

133 

134         protected virtual void DrawImageItem(PaintEventArgs e)

135         {

136             for (int i = 0; i < this.TabPages.Count; i++)

137             {

138                 if (i == this.SelectedIndex)

139                 {

140                     e.Graphics.DrawImage(backImage, this.GetTabRect(i));

141                 }

142 

143                 RectangleF itemRec = this.GetTabRect(i);

144 

145                 if (ImageList != null)

146                 { 

147                     int imageIndex=this.TabPages[i].ImageIndex;

148                     string imageKey=this.TabPages[i].ImageKey;

149                     Image ico=new Bitmap(1,1);

150                     if (imageIndex >= 0)

151                         ico = this.ImageList.Images[i];

152                     if (!string.IsNullOrEmpty(imageKey))

153                         ico = this.ImageList.Images[imageKey];

154 

155                     if (this.ItemSize.Height < ImageList.ImageSize.Height + this.Padding.Y * 2)

156                         this.ItemSize = new System.Drawing.Size(this.ItemSize.Width,

157                             ImageList.ImageSize.Height + this.Padding.Y * 2);

158                     if (this.ItemSize.Width < ImageList.ImageSize.Width + this.Padding.X * 2)

159                         this.ItemSize = new System.Drawing.Size(ImageList.ImageSize.Width + this.Padding.X * 2,

160                             this.ItemSize.Height);

161 

162                     e.Graphics.DrawImage(ico, itemRec.X + (itemRec.Width - ico.Width) / 2, itemRec.Y + this.Padding.Y);

163                 }

164             }

165         }

166 

167         protected virtual void DrawTextItem(PaintEventArgs e)

168         {

169             for (int i = 0; i < this.TabCount; i++)

170             {

171                 //e.Graphics.DrawRectangle(Pens.Red, this.GetTabRect(i));

172                 if (this.SelectedIndex == i)

173                 {

174                     e.Graphics.DrawImage(backImage, this.GetTabRect(i));

175                 }

176 

177                 // Calculate text position  

178                 Rectangle bounds = this.GetTabRect(i);

179                 PointF textPoint = new PointF();

180                 SizeF textSize = TextRenderer.MeasureText(this.TabPages[i].Text, this.Font);

181 

182                 // 注意要加上每个标签的左偏移量X  

183                 textPoint.X

184                     = bounds.X + (bounds.Width - textSize.Width) / 2;

185                 textPoint.Y

186                     = bounds.Y+(bounds.Height-textSize.Height)/2;

187 

188                 // Draw highlights  

189                 e.Graphics.DrawString(

190                     this.TabPages[i].Text,

191                     this.Font,

192                     SystemBrushes.ControlLightLight,    // 高光颜色  

193                     textPoint.X,

194                     textPoint.Y);

195 

196                 // 绘制正常文字  

197                 textPoint.Y--;

198                 e.Graphics.DrawString(

199                     this.TabPages[i].Text,

200                     this.Font,

201                     SystemBrushes.ControlText,    // 正常颜色  

202                     textPoint.X,

203                     textPoint.Y);

204 

205             }

206         }

207     }

ImageTabControl