怎么制作功能强大的位图按钮控件

怎么制作功能强大的位图按钮控件

原文（英文）http://www.codeproject.com/cs/miscctrl/XCtrls.asp

系统：WindowsXP P42.2G 内存：512MB

环境：Visual Studio.NET 2003 语言：C# 源码下载

在开始我们的讲解之前先看一下我们位图Button控件的效果（很漂亮吧！）如果你对这个控件感兴趣的话，就跟着我们的脚步学习如何做出这样的一个控件吧！

简介：

创建自定义位图控件的目的是允许在每一种按钮状态下呈现不同的位图，这些状态包括：disabled, normal, mouse over,还有button pressed；除了按钮的图像，让我们的按钮饱含文本，并且根据按钮图片控制文本的对齐方式也很重要。按钮采用XP样式，还包含了我们定制的一些特性。

代码使用：

程序的源码可以分为3大部分：data（数据）, rendering（表现）, and events（事件）

Data：存储状态和设置属性的私有变量，下表中有每一个属性的描述。

Rendering：按钮的呈现是靠几个方法来实现的，OnPaint方法是调用其它绘制方法的一个驱动性质的方法（意思就是靠我们的OnPaint方法，调用自定义的绘制方法），用来呈现我们的Button控件

Events：事件处理操作按钮的状态这些事件有：OnMouseDown, OnMouseUp, OnMouseLeave, OnMouseMove, OnEnabledChanged, OnLostFocus.

Data：

首先让我们研究一下这些属性

BITMAP BUTTON PROPERTIES

`BackColor`	background color of the button 按钮的背景
`BorderColor`	the color of the thin one pixel width border surrounding the button 围绕着按钮的一个像素宽的边框的颜色
`Font`	font used to render the text 按钮文本呈现的字体
`ForeColor`	color of button text 按钮文本的颜色
`ImageAlign`	specifies the alignment of the image 指定图像的对齐方式
`ImageBorderColor`	If ImageBorderEnabled is true, then this property contains the color of the rendered image border. In addition, the StretchImage property must be false 如果该属性被设置为true，这个属性就使得图像边框为设置多颜色，但是使用此属性时，StretchImage必须设为false
`ImageBorderEnabled`	true if to render an image border, otherwise false 是否呈现图像的边框
`ImageDropShadow`	true, if to render a shadow around the image border 是否呈现图像的阴影
`ImageFocused`	image used to render when button has focus and is in a normal state 按钮获得焦点并处于普通状态时呈现的图像
`ImageInactive`	image used when button is disabled. Note, if a image is not defined, a gray scale version of the normal image is used in substitution 按钮不可用时呈现的图像，如果没有被设置，将呈现灰化的普通状态的图像
`ImageMouseOver`	image used when the mouse is over the button, but the button is not pressed 鼠标移到按钮时显示的图片
`ImageNormal`	image used when the button is it its normal state. Note, this image must be set for an image button 普通状态的按钮呈现图片，必须被设置
`ImagePressed`	image used when button is pressed 按钮按下呈现的图片
`InnerBorderColor`	color of the inner border while button is in its normal state 普通状态按钮内边框的颜色
`InnerBorderColor_Focus`	color of the inner border when the button has focus 按钮获取焦点时内边框的颜色
`InnerBorderColor_MouseOver`	color of the inner border when the mouse is over a button 鼠标移到按钮上时内边框的颜色
`OffsetPressedContent`	If this is set to true and the button is pressed, the contents of the button is shifted. 如果属性设置为true，按钮按下时替换的内容
`Padding`	It holds the pixel padding amount between each of the button contents. This is the space between the image, text, and border. 图像、文本和边框之间的距离（像素）
`StretchImage`	If true, it indicates to stretch the current image across the button 如果设置为true，拉伸图像.
`Text`	the text to be displayed in the button 按钮文本
`TextAlignment`	defines the alignment of the text 按钮文本对齐方式
`TextDropShadow`	If true, the text casts a shadow 如果设置为true，文本有阴影属性

所有的这些属性都被加到属性标签页了，下面是个截图：

Rendering：

按钮控件的呈现工作是OnPaint方法实现的，它轮流调用几个方法呈现Button我们设置的状态。

CreateRegion: 创建按钮的圆角边框
paint_Background: 绘制呈现按钮背景
paint_Text: 绘制呈现按钮文本和文本阴影
paint_Border: 绘制 1像素的按钮边框
paint_InnerBorder: 绘制 2像素的按钮内边框
paint_FocusBorder: 绘制 1像素的按钮虚线焦点边框

/// <summary>

/// This method paints the button in its entirety.

/// </summary>

/// <param name="e">paint arguments use to paint the button</param>

protected override void OnPaint(PaintEventArgs e)

{

CreateRegion(0);

paint_Background(e);

paint_Text(e);

paint_Image(e);

paint_Border(e);

paint_InnerBorder(e);

paint_FocusBorder(e);

}

绘制背景应该是很有趣的：

Painting the background can be of some interest. The approach that was taken allows for a gradient background interpolation between multiple colors (meaning more then 2 colors). First, a blend object needs to be initialized with an array of colors, and the position of interpolation. Next, the gradient brush can be created as usual. The Final step involves linking the blend object to the brush. This is accomplished by setting the InterpolationColors property of a brush.

下面是复合颜色的代码示例：



Color[] ColorArray = new Color[]{
   System.Drawing.Color.White,
   System.Drawing.Color.Yellow,
   System.Drawing.Color.Blue,
   System.Drawing.Color.Green,               
   System.Drawing.Color.Red,
   System.Drawing.Color.Black};                
float[] PositionArray  = new float[]{0.0f,.15f,.40f,.65f,.80f,1.0f};
//
// create blend variable for the interpolate the colors
//
System.Drawing.Drawing2D.ColorBlend blend
                                = new System.Drawing.Drawing2D.ColorBlend();
blend.Colors    = ColorArray;
blend.Positions = PositionArray;
//
// create vertical gradient brush
//
System.Drawing.Drawing2D.LinearGradientBrush brush
                = new System.Drawing.Drawing2D.LinearGradientBrush(rect, 
                      this.BackColor,Blend(this.BackColor,this.BackColor,10),
                      System.Drawing.Drawing2D.LinearGradientMode.Vertical);
brush.InterpolationColors = blend;
//
// fill the rectangle
//
g.FillRectangle(brush, rect);
//
// release resources
//
brush.Dispose();

我使用了System.Drawing.DrawString（）方法绘制按钮文本，在何处使用这个方法呢，为了区别paint_Text()方法，我们将代码放置在Helper函数部分（看源代码大家就一目了然是什么意思了）还有一处大家一定会感兴趣，就是文本的阴影效果是如何实现的呢？我们看看接下来的代码：

// paint text shadow

if(TextDropShadow)

{

System.Drawing.Brush TransparentBrush0

= new System.Drawing.SolidBrush( System.Drawing.Color.FromArgb(50,

System.Drawing.Color.Black ) ) ;

System.Drawing.Brush TransparentBrush1

= new System.Drawing.SolidBrush( System.Drawing.Color.FromArgb(20,

System.Drawing.Color.Black ) ) ;