SplitContainer控件扩展之收缩面板



转自http://www.cnblogs.com/cxwx/archive/2011/01/11/1932620.html

补充说明,尤其一开始自己没注意到 “程序员之窗”网站提供了示例下载,所以可能我文中有些言语不太妥当,

在此说明,希望不要引起不必要的误会,此文仅当一个学习的例子。

--------------------------------------------------------------------

前几天路过一个网站时看到一个关于SplitContainer控件美化的文章,实现的效果如图:(直接引用自那个站)

 

 

说起这个站看到的这篇文章,我还真是生气。本来觉得这个效果蛮好的,也想学习下。结果这玩意TMD整个一篇废文,

地址在这里 

 

为什么我要生气呢,这边文章只是展示了最终效果,并且贴了一点点无关紧要的代码,连如何实现,什么原理完全木有讲。给我等菜鸟看来真是一头雾水不说,还要误导大家。

不知道这种文章发出来是为了打广告呢,还是怎么的。

 

 既然人家效果好,那咱就自己动手来实现吧,当然咱不能跟他一样,咱得把具体实现方法过程记录下来供不会的朋友学习。

 好了,言归正传! 我们按照上面的图示来看,需要实现的就是SplitContainer 中间那有散点加小三角的那部分,

通过点击小三角就能直接隐藏一个Panel,。

我们一步一步来分析下,如何实现这种效果:

 

我们先创建一个类 SplitContainerEx  让它继承自SplitContainer,我们的目的是扩展,不是要完全自己做一个SplitContainer。

 

首先:要实现那种散点加小三角的按钮样式, 我们能想到的就是这里是一个按钮,按钮上面图片或者内容能表示为这种形式;

        不过我觉得按钮的话,存在按钮样式,可能会使美观上看上去不太平滑, 所以我想应该是直接在SplitContainer 控件背景上绘制那些散点和小三角

        第一步知道需要绘制,这也是做自定义控件首先可能会注意到的问题,实际上也就是重写OnPaint 函数了,需要一点GDI知识。 

        怎么来绘制这一部分呢,如果单纯绘制散点再绘制小三角我觉得是不是有点麻烦,那我们能不能先自己生成一张图片,图片就是散点+小三角,然后再将这张图片绘制到具体           位置呢。 

 

        OK,这么想到了,那就没问题了。因为对于我们菜鸟来说,想到是第一步,动手做才是第2步。 那我们就来实现绘制一张包括散点加小三角的Bitmap吧:

         

复制代码
          private  Bitmap CreateCollapseImage( bool  collapse, Color color) 

        {
            Bitmap bmp = new Bitmap(809);
            
for (int i = 5; i <= 30; i += 5)
            {
                
for (int j = 1; j <= 8; j += 3)
                {
                    bmp.SetPixel(i, j, color);
                }
            }
            
for (int i = 50; i <= 75; i += 5)
            {
                
for (int j = 1; j <= 8; j += 3)
                {
                    bmp.SetPixel(i, j, color);
                }
            }
            
int p = 35, q = 45;
            
if (collapse)
            {
                
int j = 1;
                
for (int i = p; i <= q; i++)
                {
                    
if (j > 8)
                        
break;
                    bmp.SetPixel(i, j, color);
                    
if (i == q)
                    {
                        p++;
                        q--;
                        j++;
                        i = p - 1;
                    }
                }
            }
            
else
            {
                
int j = 8;
                
for (int i = p; i <= q; i++)
                {
                    
if (j < 1)
                        
break;
                    bmp.SetPixel(i, j, color);
                    
if (i == q)
                    {
                        p++;
                        q--;
                        j--;
                        i = p - 1;
                    }
                }
            }
            
return bmp;
        }

复制代码

       我们首先创建一个 80*9大小的图片,通过SetPixel设置图片中点的颜色,那我们就分析下,高度为9的话,我们可以每隔3个像素竖直方向绘制一个点

       即(x,2),(x,5),(x,8) 这样正好在竖直方向3个点并且看起来也位置适中比较美观

       横向的是同一个道理,宽度80,那我就让2端的散点各位6个每隔间隔5像素 这种的话左边就是(5,y) (10,y) (15,y) (20,y)(25,y)(30,y)  

       再加上竖直方向的绘制,正好形成这样一种 6*3 矩阵散点外观效果,还是比较好看滴。 

       右端同样道理的绘制;

       好了, 散点的绘制没问题了,中间小三角的绘制的话,一下就让我想起来大一学C时,老师总会要求你在CMD窗口中编写算法输出倒三角,菱形==。

       不过,,,可怜的是我不是个好学生,算法还真不怎么样。

       所以就有了这么一段绘制代码

      

绘制小三角算法
复制代码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值