【Wince-自定义控件】ImageButton 带图片、文字
1.看图
可以实现MouseDown改变背景颜色或背景图片。
遗憾是没有实现键盘触发按钮事件。
2.选择继承自Control基类
public class ImageButton : Control
3.创建几个枚举类型
public enum TextAlignStyle { TopCenter, MiddleCenter, BottonCenter, } public enum PictureLocationStyle { TopCenter, MiddleCenter, BottonCenter, } public enum BorderStyle { None, Single, }
4.设置字段及其默认值
Image backgroundImage;//背景图片 Image pressedImage;//鼠标按下ImageButton时的图片 bool pressed = false;//ImageButton是否按下，true表示ImageButton按下 Color pressBackColor = SystemColors.Control;//鼠标按下时背景颜色 Color preBackColor = SystemColors.Control;//原来的背景颜色 TextAlignStyle textAlign = TextAlignStyle.BottonCenter;//文本的位置 PictureLocationStyle pictureLocation = PictureLocationStyle.TopCenter;//图片的位置 BorderStyle buttonBorder = BorderStyle.Single;//默认单线条边框 Color borderColor = SystemColors.Control;//默认边框颜色
5.设置属性
//背景图片属性 public Image BackgroundImage { get { return backgroundImage; } set { backgroundImage = value; this.Invalidate(); } } // 鼠标按下ImageButton时的图片 public Image PressedImage { get { return pressedImage; } set { pressedImage = value; this.Invalidate(); } } //鼠标按下时背景颜色 public Color PressBackColor { get { return pressBackColor; } set { pressBackColor = value; this.Invalidate(); } } //鼠标起来时背景颜色 public Color PreBackColor { get { return preBackColor; } set { preBackColor = value; this.Invalidate(); } } //文本的位置 public TextAlignStyle TextAlign { get { return textAlign; } set { textAlign = value; this.Invalidate(); } } //图片的位置 public PictureLocationStyle PictureLocation { get { return pictureLocation; } set { pictureLocation = value; this.Invalidate(); } } //边框样式 public BorderStyle ButtonBorder { get { return buttonBorder; } set { buttonBorder = value; this.Invalidate(); } }
6.重写MouseDown&MouseUp事件
protected override void OnMouseDown(MouseEventArgs e) { this.pressed = true;//鼠标按下，设置pressed=true this.Invalidate(); base.OnMouseDown(e); } protected override void OnMouseUp(MouseEventArgs e) { this.pressed = false;//鼠标释放，设置pressed=false this.Invalidate(); base.OnMouseUp(e); }
7. 重点：重绘控件
// 重绘背景图片和文本 protected override void OnPaint(PaintEventArgs e) { //画背景图片 DrawBackGroundImage(e); //改变背景颜色 ChangeBackColor(); //画文字 DrawForeText(e); //画边框 DrawBorder(e); // Calling the base class OnPaint base.OnPaint(e); } //改变背景颜色 private void ChangeBackColor() { //按下鼠标时改变背景颜色 if (this.pressed) { this.BackColor = this.pressBackColor; } else { this.BackColor = this.preBackColor; } } //画边框 private void DrawBorder(PaintEventArgs e) { switch (buttonBorder) { case BorderStyle.None: break; case BorderStyle.Single: //画边框 e.Graphics.DrawRectangle(new Pen(borderColor), 0, 0, this.ClientSize.Width - 1, this.ClientSize.Height - 1); break; } } //画文本 private void DrawForeText(PaintEventArgs e) { //如果Text不为空，就显示文本 if (this.Text.Length > 0) { //获取文本的Size SizeF size = e.Graphics.MeasureString(this.Text, this.Font); //设置画文本的初始位置 float textX = 0; float textY = 0; switch (textAlign) { case TextAlignStyle.TopCenter: textX = (this.ClientSize.Width - size.Width) / 2; textY = 0; break; case TextAlignStyle.MiddleCenter: textX = (this.ClientSize.Width - size.Width) / 2; textY = (this.ClientSize.Height - size.Height) / 2; break; case TextAlignStyle.BottonCenter: textX = (this.ClientSize.Width - size.Width) / 2; textY = this.ClientSize.Height - size.Height; break; } //画文本 e.Graphics.DrawString(this.Text, this.Font, new SolidBrush(this.ForeColor), textX, textY); } } //画背景图片 private void DrawBackGroundImage(PaintEventArgs e) { switch (pictureLocation) { case PictureLocationStyle.TopCenter: //当鼠标按下且按下的图片为不为空，此时显示鼠标按下时图片 if (this.pressed && this.pressedImage != null) { e.Graphics.DrawImage(this.pressedImage, (this.ClientSize.Width - this.pressedImage.Width) / 2, 0); } //其他情况显示背景图片 else if (this.backgroundImage != null) { e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / 2, 0); } break; case PictureLocationStyle.MiddleCenter: //当鼠标按下且按下的图片为不为空，此时显示鼠标按下时图片 if (this.pressed && this.pressedImage != null) { e.Graphics.DrawImage(this.pressedImage, (this.ClientSize.Width - this.pressedImage.Width) / 2, (this.ClientSize.Width - this.pressedImage.Width) / 2); } //其他情况显示背景图片 else if (this.backgroundImage != null) { e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / 2, (this.ClientSize.Width - this.backgroundImage.Width) / 2); } break; case PictureLocationStyle.BottonCenter: //当鼠标按下且按下的图片为不为空，此时显示鼠标按下时图片 if (this.pressed && this.pressedImage != null) { e.Graphics.DrawImage(this.pressedImage, (this.ClientSize.Width - this.pressedImage.Width) / 2, this.ClientSize.Width - this.pressedImage.Width); } //其他情况显示背景图片 else if (this.backgroundImage != null) { e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / 2, this.ClientSize.Width - this.backgroundImage.Width); } break; } }
所有代码如下：
using System.Drawing; using System.Windows.Forms; using System.Drawing.Imaging; namespace Demo { public class ImageButton : Control { public ImageButton() { } public enum TextAlignStyle { TopCenter, MiddleCenter, BottonCenter, } public enum PictureLocationStyle { TopCenter, MiddleCenter, BottonCenter, } public enum BorderStyle { None, Single, } Image backgroundImage;//背景图片 Image pressedImage;//鼠标按下ImageButton时的图片 bool pressed = false;//ImageButton是否按下，true表示ImageButton按下 Color pressBackColor = SystemColors.Control;//鼠标按下时背景颜色 Color preBackColor = SystemColors.Control;//原来的背景颜色 TextAlignStyle textAlign = TextAlignStyle.BottonCenter;//文本的位置 PictureLocationStyle pictureLocation = PictureLocationStyle.TopCenter;//图片的位置 BorderStyle buttonBorder = BorderStyle.Single;//默认单线条边框 Color borderColor = SystemColors.Control;//默认边框颜色 //背景图片属性 public Image BackgroundImage { get { return backgroundImage; } set { backgroundImage = value; this.Invalidate(); } } // 鼠标按下ImageButton时的图片 public Image PressedImage { get { return pressedImage; } set { pressedImage = value; this.Invalidate(); } } //鼠标按下时背景颜色 public Color PressBackColor { get { return pressBackColor; } set { pressBackColor = value; this.Invalidate(); } } //鼠标起来时背景颜色 public Color PreBackColor { get { return preBackColor; } set { preBackColor = value; this.Invalidate(); } } //文本的位置 public TextAlignStyle TextAlign { get { return textAlign; } set { textAlign = value; this.Invalidate(); } } //图片的位置 public PictureLocationStyle PictureLocation { get { return pictureLocation; } set { pictureLocation = value; this.Invalidate(); } } //边框样式 public BorderStyle ButtonBorder { get { return buttonBorder; } set { buttonBorder = value; this.Invalidate(); } } protected override void OnMouseDown(MouseEventArgs e) { this.pressed = true;//鼠标按下，设置pressed=true this.Invalidate(); base.OnMouseDown(e); } protected override void OnMouseUp(MouseEventArgs e) { this.pressed = false;//鼠标释放，设置pressed=false this.Invalidate(); base.OnMouseUp(e); } // 重绘背景图片和文本 protected override void OnPaint(PaintEventArgs e) { //画背景图片 DrawBackGroundImage(e); //改变背景颜色 ChangeBackColor(); //画文字 DrawForeText(e); //画边框 DrawBorder(e); // Calling the base class OnPaint base.OnPaint(e); } //改变背景颜色 private void ChangeBackColor() { //按下鼠标时改变背景颜色 if (this.pressed) { this.BackColor = this.pressBackColor; } else { this.BackColor = this.preBackColor; } } //画边框 private void DrawBorder(PaintEventArgs e) { switch (buttonBorder) { case BorderStyle.None: break; case BorderStyle.Single: //画边框 e.Graphics.DrawRectangle(new Pen(borderColor), 0, 0, this.ClientSize.Width - 1, this.ClientSize.Height - 1); break; } } //画文本 private void DrawForeText(PaintEventArgs e) { //如果Text不为空，就显示文本 if (this.Text.Length > 0) { //获取文本的Size SizeF size = e.Graphics.MeasureString(this.Text, this.Font); //设置画文本的初始位置 float textX = 0; float textY = 0; switch (textAlign) { case TextAlignStyle.TopCenter: textX = (this.ClientSize.Width - size.Width) / 2; textY = 0; break; case TextAlignStyle.MiddleCenter: textX = (this.ClientSize.Width - size.Width) / 2; textY = (this.ClientSize.Height - size.Height) / 2; break; case TextAlignStyle.BottonCenter: textX = (this.ClientSize.Width - size.Width) / 2; textY = this.ClientSize.Height - size.Height; break; } //画文本 e.Graphics.DrawString(this.Text, this.Font, new SolidBrush(this.ForeColor), textX, textY); } } //画背景图片 private void DrawBackGroundImage(PaintEventArgs e) { switch (pictureLocation) { case PictureLocationStyle.TopCenter: //当鼠标按下且按下的图片为不为空，此时显示鼠标按下时图片 if (this.pressed && this.pressedImage != null) { e.Graphics.DrawImage(this.pressedImage, (this.ClientSize.Width - this.pressedImage.Width) / 2, 0); } //其他情况显示背景图片 else if (this.backgroundImage != null) { e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / 2, 0); } break; case PictureLocationStyle.MiddleCenter: //当鼠标按下且按下的图片为不为空，此时显示鼠标按下时图片 if (this.pressed && this.pressedImage != null) { e.Graphics.DrawImage(this.pressedImage, (this.ClientSize.Width - this.pressedImage.Width) / 2, (this.ClientSize.Width - this.pressedImage.Width) / 2); } //其他情况显示背景图片 else if (this.backgroundImage != null) { e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / 2, (this.ClientSize.Width - this.backgroundImage.Width) / 2); } break; case PictureLocationStyle.BottonCenter: //当鼠标按下且按下的图片为不为空，此时显示鼠标按下时图片 if (this.pressed && this.pressedImage != null) { e.Graphics.DrawImage(this.pressedImage, (this.ClientSize.Width - this.pressedImage.Width) / 2, this.ClientSize.Width - this.pressedImage.Width); } //其他情况显示背景图片 else if (this.backgroundImage != null) { e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / 2, this.ClientSize.Width - this.backgroundImage.Width); } break; } } } }
