winform异型不规则界面设计的实现方法

本文实例讲述了winform异型不规则界面设计的实现方法，用于界面设计时有不错的用户体验，非常实用。分享给大家供大家参考之用。具体方法如下：

一、不规则winform窗体

author:unknown from:internet
在以前版本的visual basic或visual c++中，创建不规则窗体和控件是一件很复杂的事，不仅需要调用大量api函数而且工作量也不小。不过，现在在visual c#下，情况就完全不同了。运用windows forms你就可以很轻易地创建出一个不规则的窗体以及窗体上的控件。一个具有不规则窗体和控件的应用程序肯定会更吸引广大的用户，微软的windows media player 7就显示出这一点。作为程序员，您一定想在自己的程序中运用这点技术吧。

程序的窗体和控件都可以以非传统的方式被创建。本文就向大家展示如何在应用程序中创建不规则窗体，以及如何在窗体上创建各式各样的自定义形状的控件。

注：创建不规则窗体和控件这个过程包含了大量的图形编程工作，所以不同的计算机因内存和显卡的不同可能会导致最终的效果有所不同。因此，在发布你的应用程序前，务必在各种不同类型的计算机上做好测试工作。

实现方法：

首先，创建一个位图文件作为程序的窗体。位图可以是任意形状的，但是位图文件区域一定要足够大，这样才能包含窗体上的所有控件。然后，你可以通过设置一些属性使该图成为程序的窗体。

把程序中的标题栏去掉，否则整个界面将显得很不协调。当然你去掉了标题栏也就去掉了它的最大化、最小化、关闭、移动窗体等功能。为了使程序仍然具有这些功能，我们需在程序中添加一些代码，这样用户就仍然可以像以前一样和程序进行交互。

因此，你需要完成如下工作：

1．创建一个作为窗体的位图文件。

2．创建一个windows应用程序，用上述位图文件作为程序的窗体同时去掉其标题栏。

3．添加原标题栏具有的功能所需的代码。

具体步骤：

下面我就具体向大家介绍如何创建不规则窗体。

创建一个具有不规则形状的位图文件

1．用任何画图程序就可以创建不规则形状的位图，你可以使用最容易也是最方便的画图程序。

2．用一种颜色画出一个不规则的区域作为程序的窗体，并用另一种颜色画出该位图的背景。（你要使该不规则区域足够大。）

3．保存位图文件。

下面就是一个例子：

在vs.net中创建一个新的工程：

首先，设置窗体的背景从而建立窗体形状。

1．在窗体设计器中选中窗体使之获得焦点。

2．在属性对话框中进行如下设置：

●将formborderstyle属性设置为none。该属性去掉了程序的标题栏，同时也除去了标题栏的功能，不过我在后面还会向大家介绍如何添加代码以恢复这些功能的。

●将backgroundimage属性设置为你创建的位图文件。你不必在工程中添加该文件，因为你一旦指定了该文件，它就会自动被添加到工程中。

●将transparencykey属性设置为位图文件的背景颜色值（在本例中是蓝色）。该属性使得位图的背景即上图中的蓝色部分不可见，从而窗体就呈现出一个不规则的椭圆形。

3．保存工程。按ctrl+f5可以运行此程序。（注：因为没有标题栏，所以你可以通过alt+f4来关闭程序）

将formborderstyle属性设置为none后，程序的标题栏就被去掉了。这样，为了获得原来标题栏的功能，我们必须手动添加代码。下面我就向大家介绍如何添加代码实现关闭功能以及移动窗体的功能。

实现窗体的关闭及移动：

1．往窗体上拖放一个按钮控件。

2．在属性对话框中，将该控件的text属性设置为“关闭”。

3．双击按钮添加一个click事件处理函数。

4．在代码编辑器中添加如下代码：

private void button1_click(object sender, system.eventargs e) 
{ 
  this.close(); 
} 

二、不规则按钮author:unknown from:internet现在，我们已经创建了一个不规则的窗体，并实现了一些基本的移动窗体、关闭窗体的功能。然而，窗体上的按钮控件还是老一套，那么方方正正，使得整个界面不美观。接下来我就向大家介绍如何创建自定义形状的控件。 前面我们创建不规则窗体的时候用到了transparencykey属性，但是控件是没有该属性的，所以我们得找其他的方法来实现控件的不规则形状了。在窗体上画一个自定义形状的控件时，你需要精确的告知窗体在什么位置以及如何画该控件。在.net framework中有相应的类和方法来帮你实现这些，所以你不必担心具体实现。 .net framework中的类提供给控件一个指示说明，该指示说明能确定控件被画的形状。通过不同的指示说明，你就可以按你想要的方法来画控件了。该指示说明利用了graphicspath这个类，这个类代表了一系列用来画图的直线和曲线。首先，你得指定一个graphicspath类的对象并告知它你要画什么图形。然后，你将控件的region属性设置为上述graphicspath类的对象。这样，你就可以创建任何自定义形状的控件了。

步骤如下：

● 创建一个graphicspath类的实例对象。

● 指定好该对象的各项细节（如大小、形状等等）。

● 将控件的region属性设置为上面建立的graphicspath类的实例对象。 创建一个像文本的按钮控件：

1．拖放一个按钮控件到窗体上。

2．在属性对话框中进行如下设置：

● 将name属性设置为custombutton。

● 将backcolor属性设置为一个和窗体背景颜色不同的颜色值。

● 将其text属性设置为空字符串。

3．添加窗体的paint事件的事件处理函数。

4．添加以下代码，用graphicspath类的实例对象来画控件。

下面的代码以一串字符串的形式画该按钮控件，同时，程序还设置了字符串的字体、大小、风格等属性。字符串被赋给graphicspath类的实例对象。然后，该实例对象就被设置为按钮控件的region属性。这样一个自定义形状的控件就完成了。 

private void custombutton_paint( object sender, system.windows.forms.painteventargs e ) 
{ 
  //初始化一个graphicspath类的对象 
  system.drawing.drawing2d.graphicspath mygraphicspath = new system.drawing.drawing2d.graphicspath(); 
  //确定一个字符串，该字符串就是控件的形状 
  string stringtext = "click me!"; 
  //确定字符串的字体 
  fontfamily family = new fontfamily("arial"); 
  //确定字符串的风格 
  int fontstyle = (int)fontstyle.bold; 
  //确定字符串的高度 
  int emsize = 35; 
  //确定字符串的起始位置，它是从控件开始计算而非窗体 
  pointf origin = new pointf(0, 0); 
  //一个stringformat对象来确定字符串的字间距以及对齐方式 
  stringformat format = new stringformat(stringformat.genericdefault); 
  //用addstring方法创建字符串 
  mygraphicspath.addstring(stringtext, family, fontstyle, emsize, origin, format); 
  //将控件的region属性设置为上面创建的graphicspath对象 
  custombutton.region = new region(mygraphicspath); 
} 

三、gdi+编程的10个基本技巧

//创建绘图表面有两种常用的方法。下面设法得到picturebox的绘图表面。  
private void form1_load(object sender, system.eventargs e)  
{  
//得到picturebox1的绘图表面  
graphics g = this.picturebox1.creategraphics();  
}  
private void picturebox1_paint(object sender, system.windows.forms.painteventargs e)  
{  
//得到picturebox1的绘图表面  
graphics g = e.graphics;  
}  
//可以利用graphics对象绘制出各种图形图案。控件的paint事件和onpaint方法都可以绘图都是好时机。在onpaint方法里绘制图案一定从参数e里面得到graphics属性。下面是两个例子。  
protected override void onpaint(painteventargs e)  
{  
e.graphics.clear(color.white);  
float x, y, w, h;  
x = this.left+2;  
y = this.top+2;  
w = this.width-4;  
h = this.height-4;  
pen pen = new pen(color.red, 2);  
e.graphics.drawrectangle(pen, x, y, w, h);  
base.onpaint (e);  
}  
private void pictureboxii_resize(object sender, eventargs e)  
{  
this.invalidate();  
}  
private void button1_click(object sender, system.eventargs e)  
{  
this.pictureboxii1.creategraphics().fillellipse(  
brushes.blue, 10, 20, 50, 100);  
}  
//和文本有关的三个类：  
//fontfamily——定义有着相似的基本设计但在形式上有某些差异的一组字样。无法继承此类。  
//font——定义特定的文本格式，包括字体、字号和字形属性。无法继承此类。  
//stringformat——封装文本布局信息（如对齐方式和行距），显示操作（如省略号插入和国家标准 (national) 数字位替换）和 opentype 功能。无法继承此类。  
//下面的程序显示了一段文字。  
private void button2_click(object sender, system.eventargs e)  
{  
graphics g = this.pictureboxii1.creategraphics();  
g.fillrectangle(brushes.white, this.pictureboxii1.clientrectangle);  
string s = "aaaaaaaaaaaaaaaaaaaaaaaaaa";  
fontfamily fm = new fontfamily("ëîìå");  
font f = new font(fm, 20, fontstyle.bold, graphicsunit.point);  
rectanglef rectf = new rectanglef(30, 20, 180, 205);  
stringformat sf = new stringformat();  
solidbrush sbrush = new solidbrush(color.fromargb(255, 0, 0, 255));  
sf.linealignment = stringalignment.center;  
sf.formatflags = stringformatflags.directionvertical;  
g.drawstring(s, f, sbrush, rectf, sf);  
}  
//gdi+的路径——graphicspath类 
 
//graphicspath类提供了一系列属性和方法，利用它可以获取路径上的关键点，可以添加直线段、圆等几何元素。可以获得包围矩形，进行拾取测试。这些功能都怎么用，要仔细看一下。  
private void button3_click(object sender, system.eventargs e)  
{  
//绘图表面  
graphics g = this.pictureboxii1.creategraphics();  
//填充成白色  
g.fillrectangle(brushes.white, this.clientrectangle);  
//弄一个绘图路径¶  
graphicspath gp = new graphicspath();  
//添加一些集合图形  
gp.addellipse(20, 20, 300, 200);  
gp.addpie(50, 100, 300, 100, 45, 200);  
gp.addrectangle(new rectangle(100, 30, 100, 80));  
//在绘图表面上绘制绘图路径  
g.drawpath(pens.blue, gp);  
//平移  
g.translatetransform(200, 20);  
//填充绘图路径¶  
g.fillpath(brushes.greenyellow, gp);  
gp.dispose();  
}  
//区域——region类  
//从已有的矩形和路径可以创建region。使用graphics.fillregion方法绘制region。该类指示由矩形和由路径构成的图形形状的内部。无法继承此类。  
//渐变色填充  
//需要使用两个刷子：  
//线性梯度刷子(lineargradientbrush)  
//路径梯度刷子(pathguadientbrush)  
private void button4_click(object sender, system.eventargs e)  
{  
//绘图表面  
graphics g = this.pictureboxii1.creategraphics();  
g.fillrectangle(brushes.white, this.pictureboxii1.clientrectangle);  
//定义一个线性梯度刷子  
lineargradientbrush lgbrush =  
new lineargradientbrush(  
new point(0, 10),  
new point(150, 10),  
color.fromargb(255, 0, 0),  
color.fromargb(0, 255, 0));  
pen pen = new pen(lgbrush);  
//用线性笔刷梯度效果的笔绘制一条直线段并填充一个矩形  
g.drawline(pen, 10, 130, 500, 130);  
g.fillrectangle(lgbrush, 10, 150, 370, 30);  
//定义路径并添加一个椭圆  
graphicspath gp = new graphicspath();  
gp.addellipse(10, 10, 200, 100);  
//用该路径定义路径梯度刷子  
pathgradientbrush brush =  
new pathgradientbrush(gp);  
//颜色数组  
color[] colors = {  
color.fromargb(255, 0, 0),  
color.fromargb(100, 100, 100),  
color.fromargb(0, 255, 0),  
color.fromargb(0, 0, 255)};  
//定义颜色渐变比率  
float[] r = {0.0f, 0.3f, 0.6f, 1.0f};  
colorblend blend = new colorblend();  
blend.colors = colors;  
blend.positions = r;  
brush.interpolationcolors = blend;  
//在椭圆外填充一个矩形  
g.fillrectangle(brush, 0, 0, 210, 110);  
//用添加了椭圆的路径定义第二个路径梯度刷子  
graphicspath gp2 = new graphicspath();  
gp2.addellipse(300, 0, 200, 100);  
pathgradientbrush brush2 = new pathgradientbrush(gp2);  
//设置中心点位置和颜色  
brush2.centerpoint = new pointf(450, 50);  
brush2.centercolor = color.fromargb(0, 255, 0);  
//设置边界颜色  
color[] color2 = {color.fromargb(255, 0, 0)};  
brush2.surroundcolors = color2;  
//用第二个梯度刷填充椭圆  
g.fillellipse(brush2, 300, 0, 200, 100);  
}  
//gdi+的坐标系统 
 
//通用坐标系——用户自定义坐标系。  
//页面坐标系——虚拟坐标系。  
//设备坐标系——屏幕坐标系。  
//当页面坐标系和设备坐标系的单位都是象素时，它们相同。  
private void button10_click(object sender, system.eventargs e)  
{  
graphics g = this.pictureboxii1.creategraphics();  
g.clear(color.white);  
this.draw(g);  
}  
private void draw(graphics g)  
{  
g.drawline(pens.black, 10, 10, 100, 100);  
g.drawellipse(pens.black, 50, 50, 200, 100);  
g.drawarc(pens.black, 100, 10, 100, 100, 20, 160);  
g.drawrectangle(pens.green, 50, 200, 150, 100);  
}  
private void button5_click(object sender, system.eventargs e)  
{  
//左移  
graphics g = this.pictureboxii1.creategraphics();  
g.clear(color.white);  
g.translatetransform(-50, 0);  
this.draw(g);  
}  
private void button6_click(object sender, system.eventargs e)  
{  
//右移  
graphics g = this.pictureboxii1.creategraphics();  
g.clear(color.white);  
g.translatetransform(50, 0);  
this.draw(g);  
}  
private void button7_click(object sender, system.eventargs e)  
{  
//旋转  
graphics g = this.pictureboxii1.creategraphics();  
g.clear(color.white);  
g.rotatetransform(-30);  
this.draw(g);  
}  
private void button8_click(object sender, system.eventargs e)  
{  
//放大  
graphics g = this.pictureboxii1.creategraphics();  
g.clear(color.white);  
g.scaletransform(1.2f, 1.2f);  
this.draw(g);  
}  
private void button9_click(object sender, system.eventargs e)  
{  
//缩小  
graphics g = this.pictureboxii1.creategraphics();  
g.clear(color.white);  
g.scaletransform(0.8f, 0.8f);  
this.draw(g);  
}  
//全局坐标——变换对于绘图表面上的每个图元都会产生影响。通常用于设定通用坐标系。  
//一下程序将原定移动到控件中心，并且y轴正向朝上。  
//先画一个圆  
graphics g = e.graphics;  
g.fillrectangle(brushes.white, this.clientrectangle);  
g.drawellipse(pens.black, -100, -100, 200, 200);  
//使y轴正向朝上，必须做相对于x轴镜像  
//变换矩阵为[1,0,0,-1,0,0]  
matrix mat = new matrix(1, 0, 0, -1, 0, 0);  
g.transform = mat;  
rectangle rect = this.clientrectangle;  
int w = rect.width;  
int h = rect.height;  
g.translatetransform(w/2, -h/2);  
//以原点为中心，做一个半径为100的圆  
g.drawellipse(pens.red, -100, -100, 200, 200);  
g.translatetransform(100, 100);  
g.drawellipse(pens.green, -100, -100, 200, 200);  
g.scaletransform(2, 2);  
g.drawellipse(pens.blue, -100, -100, 200, 200);  
//局部坐标系——只对某些图形进行变换，而其它图形元素不变。  
protected override void onpaint(painteventargs e)  
{  
graphics g = e.graphics;  
//客户区设置为白色  
g.fillrectangle(brushes.white, this.clientrectangle);  
//y轴朝上  
matrix mat = new matrix(1, 0, 0, -1, 0, 0);  
g.transform = mat;  
//移动坐标原点到窗体中心  
rectangle rect = this.clientrectangle;  
int w = rect.width;  
int h = rect.height;  
g.translatetransform(w/2, -h/2);  

//在全局坐标下绘制椭圆  
g.drawellipse(pens.red, -100, -100, 200, 200);  
g.fillrectangle(brushes.black, -108, 0, 8, 8);  
g.fillrectangle(brushes.black, 100, 0, 8, 8);  
g.fillrectangle(brushes.black, 0, 100, 8, 8);  
g.fillrectangle(brushes.black, 0, -108, 8, 8);  
//创建一个椭圆然后在局部坐标系中进行变换  
graphicspath gp = new graphicspath();  
gp.addellipse(-100, -100, 200, 200);  
matrix mat2 = new matrix();  
//平移  
mat2.translate(150, 150);  
//旋转  
mat2.rotate(30);  
gp.transform(mat2);  
g.drawpath(pens.blue, gp);  
pointf[] p = gp.pathpoints;  
g.fillrectangle(brushes.black, p[0].x-2, p[0].y+2, 4, 4);  
g.fillrectangle(brushes.black, p[3].x-2, p[3].y+2, 4, 4);  
g.fillrectangle(brushes.black, p[6].x-4, p[6].y-4, 4, 4);  
g.fillrectangle(brushes.black, p[9].x-4, p[9].y-4, 4, 4);  
gp.dispose();  
//base.onpaint (e);  
}  
//alpha混合 

//color.fromargb()的a就是alpha。alpha的取值范围从0到255。0表示完全透明，255完全不透明。  
//当前色＝前景色×alpha/255+背景色×（255－alpha）/255  
protected override void onpaint(painteventargs e)  
{  
graphics g = e.graphics;  
//创建一个填充矩形  
solidbrush brush = new solidbrush(color.blueviolet);  
g.fillrectangle(brush, 180, 70, 200, 150);  
//创建一个位图，其中两个位图之间有透明效果  
bitmap bm1 = new bitmap(200, 100);  
graphics bg1 = graphics.fromimage(bm1);  
solidbrush redbrush =  
new solidbrush(color.fromargb(210, 255, 0, 0));  
solidbrush greenbrush =  
new solidbrush(color.fromargb(210, 0, 255, 0));  
bg1.fillrectangle(redbrush, 0, 0, 150, 70);  
bg1.fillrectangle(greenbrush, 30, 30, 150, 70);  
g.drawimage(bm1, 100, 100);  
//创建一个位图，其中两个位图之间没有透明效果  
bitmap bm2 = new bitmap(200, 100);  
graphics bg2 = graphics.fromimage(bm2);  
bg2.compositingmode = compositingmode.sourcecopy;  
bg2.fillrectangle(redbrush, 0, 0, 150, 170);  
bg2.fillrectangle(greenbrush, 30, 30, 150, 70);  
g.compositingquality = compositingquality.gammacorrected;  
g.drawimage(bm2, 300, 200);  
//base.onpaint (e);  
}  
//反走样  
protected override void onpaint(painteventargs e)  
{  
graphics g = e.graphics;  
//放大8倍  
g.scaletransform(8, 8);  
//没有反走样的图形和文字  
draw(g);  
//设置反走样  
g.smoothingmode = smoothingmode.antialias;  
//右移40  
g.translatetransform(40, 0);  
//再绘制就是反走样之后的了  
draw(g);  
//base.onpaint (e);  
}  
private void draw(graphics g)  
{  
//绘制图形和文字  
g.drawline(pens.gray, 10, 10, 40, 20);  
g.drawellipse(pens.gray, 20, 20, 30, 10);  
string s = "反走样测试";  
font font = new font("宋体", 5);  
solidbrush brush = new solidbrush(color.gray);  
g.drawstring(s, font, brush, 10, 40);  
}

相信本文所述对大家的c#程序设计有一定的借鉴价值。