【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), , , this.ClientSize.Width - , this.ClientSize.Height - );
                    break;
            }
        }

        //画文本
        private void DrawForeText(PaintEventArgs e)
        {
            //如果Text不为空，就显示文本
            if (this.Text.Length > )
            {
                //获取文本的Size
                SizeF size = e.Graphics.MeasureString(this.Text, this.Font);
                //设置画文本的初始位置
                float textX = ;
                float textY = ;
                switch (textAlign)
                {
                    case TextAlignStyle.TopCenter:
                        textX = (this.ClientSize.Width - size.Width) / ;
                        textY = ;
                        break;
                    case TextAlignStyle.MiddleCenter:
                        textX = (this.ClientSize.Width - size.Width) / ;
                        textY = (this.ClientSize.Height - size.Height) / ;
                        break;
                    case TextAlignStyle.BottonCenter:
                        textX = (this.ClientSize.Width - size.Width) / ;
                        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) / , );
                    }
                    //其他情况显示背景图片
                    else if (this.backgroundImage != null)
                    {
                        e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / , );
                    }
                    break;
                case PictureLocationStyle.MiddleCenter:
                    //当鼠标按下且按下的图片为不为空，此时显示鼠标按下时图片
                    if (this.pressed && this.pressedImage != null)
                    {
                        e.Graphics.DrawImage(this.pressedImage, (this.ClientSize.Width - this.pressedImage.Width) / , (this.ClientSize.Width - this.pressedImage.Width) / );
                    }
                    //其他情况显示背景图片
                    else if (this.backgroundImage != null)
                    {
                        e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / , (this.ClientSize.Width - this.backgroundImage.Width) / );
                    }
                    break;
                case PictureLocationStyle.BottonCenter:
                    //当鼠标按下且按下的图片为不为空，此时显示鼠标按下时图片
                    if (this.pressed && this.pressedImage != null)
                    {
                        e.Graphics.DrawImage(this.pressedImage, (this.ClientSize.Width - this.pressedImage.Width) / , this.ClientSize.Width - this.pressedImage.Width);
                    }
                    //其他情况显示背景图片
                    else if (this.backgroundImage != null)
                    {
                        e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / , 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), , , this.ClientSize.Width - , this.ClientSize.Height - );
                    break;
            }
        }

        //画文本
        private void DrawForeText(PaintEventArgs e)
        {
            //如果Text不为空，就显示文本
            if (this.Text.Length > )
            {
                //获取文本的Size
                SizeF size = e.Graphics.MeasureString(this.Text, this.Font);
                //设置画文本的初始位置
                float textX = ;
                float textY = ;
                switch (textAlign)
                {
                    case TextAlignStyle.TopCenter:
                        textX = (this.ClientSize.Width - size.Width) / ;
                        textY = ;
                        break;
                    case TextAlignStyle.MiddleCenter:
                        textX = (this.ClientSize.Width - size.Width) / ;
                        textY = (this.ClientSize.Height - size.Height) / ;
                        break;
                    case TextAlignStyle.BottonCenter:
                        textX = (this.ClientSize.Width - size.Width) / ;
                        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) / , );
                    }
                    //其他情况显示背景图片
                    else if (this.backgroundImage != null)
                    {
                        e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / , );
                    }
                    break;
                case PictureLocationStyle.MiddleCenter:
                    //当鼠标按下且按下的图片为不为空，此时显示鼠标按下时图片
                    if (this.pressed && this.pressedImage != null)
                    {
                        e.Graphics.DrawImage(this.pressedImage, (this.ClientSize.Width - this.pressedImage.Width) / , (this.ClientSize.Width - this.pressedImage.Width) / );
                    }
                    //其他情况显示背景图片
                    else if (this.backgroundImage != null)
                    {
                        e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / , (this.ClientSize.Width - this.backgroundImage.Width) / );
                    }
                    break;
                case PictureLocationStyle.BottonCenter:
                    //当鼠标按下且按下的图片为不为空，此时显示鼠标按下时图片
                    if (this.pressed && this.pressedImage != null)
                    {
                        e.Graphics.DrawImage(this.pressedImage, (this.ClientSize.Width - this.pressedImage.Width) / , this.ClientSize.Width - this.pressedImage.Width);
                    }
                    //其他情况显示背景图片
                    else if (this.backgroundImage != null)
                    {
                        e.Graphics.DrawImage(this.backgroundImage, (this.ClientSize.Width - this.backgroundImage.Width) / , this.ClientSize.Width - this.backgroundImage.Width);
                    }
                    break;
            }
        }
    }
}