转自http://www.cnblogs.com/cxwx/archive/2011/01/11/1932620.html
补充说明,尤其一开始自己没注意到 “程序员之窗”网站提供了示例下载,所以可能我文中有些言语不太妥当,
在此说明,希望不要引起不必要的误会,此文仅当一个学习的例子。
--------------------------------------------------------------------
前几天路过一个网站时看到一个关于SplitContainer控件美化的文章,实现的效果如图:(直接引用自那个站)
说起这个站看到的这篇文章,我还真是生气。本来觉得这个效果蛮好的,也想学习下。结果这玩意TMD整个一篇废文,
为什么我要生气呢,这边文章只是展示了最终效果,并且贴了一点点无关紧要的代码,连如何实现,什么原理完全木有讲。给我等菜鸟看来真是一头雾水不说,还要误导大家。
不知道这种文章发出来是为了打广告呢,还是怎么的。
既然人家效果好,那咱就自己动手来实现吧,当然咱不能跟他一样,咱得把具体实现方法过程记录下来供不会的朋友学习。
好了,言归正传! 我们按照上面的图示来看,需要实现的就是SplitContainer 中间那有散点加小三角的那部分,
通过点击小三角就能直接隐藏一个Panel,。
我们一步一步来分析下,如何实现这种效果:
我们先创建一个类 SplitContainerEx 让它继承自SplitContainer,我们的目的是扩展,不是要完全自己做一个SplitContainer。
首先:要实现那种散点加小三角的按钮样式, 我们能想到的就是这里是一个按钮,按钮上面图片或者内容能表示为这种形式;
不过我觉得按钮的话,存在按钮样式,可能会使美观上看上去不太平滑, 所以我想应该是直接在SplitContainer 控件背景上绘制那些散点和小三角
第一步知道需要绘制,这也是做自定义控件首先可能会注意到的问题,实际上也就是重写OnPaint 函数了,需要一点GDI知识。
怎么来绘制这一部分呢,如果单纯绘制散点再绘制小三角我觉得是不是有点麻烦,那我们能不能先自己生成一张图片,图片就是散点+小三角,然后再将这张图片绘制到具体 位置呢。
OK,这么想到了,那就没问题了。因为对于我们菜鸟来说,想到是第一步,动手做才是第2步。 那我们就来实现绘制一张包括散点加小三角的Bitmap吧:
{
Bitmap bmp = new Bitmap(80, 9);
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窗口中编写算法输出倒三角,菱形==。
不过,,,可怜的是我不是个好学生,算法还真不怎么样。
所以就有了这么一段绘制代码