对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

posted @ 2014-10-29 07:53 猴健居士阅读(5341) 评论(16) 编辑收藏举报

刷新页面返回顶部

对TabControl的简单优化

公告