C# Winform中制作精美控件（1）

仓库温度监控系统重有个控件，就是温度监控，还是比较精美的，那么我们来看看制作的要点有哪些。

1. 布局：

     两个Panel将界面分位上下两个部分，Dock.Top  Dock.Fill分别设置给他们。

2.  温度按钮采用的有自定义的圆角按钮，代码如下：

    public partial class UCircleButton : Button
    {
            public UCircleButton()
            {
                    InitializeComponent();
            }
            private const int WM_PAINT = 0xF;
            private Color bgColor = Color.Gray;
            /// <summary>
            /// 背景色（渐变色中，颜色1）
            /// </summary>
            [DefaultValue(typeof(Color), "Gray"), Description("控件背景色")]
            public Color BgColor
            {
                    get { return bgColor; }
                    set
                    {
                            bgColor = value;
                            Invalidate();
                    }
            }

            [DefaultValue(typeof(Color), "Transparent"), Description("控件背景颜色2")]
            private Color bgColor2 = Color.Transparent;
            public Color BgColor2
            {
                    get { return bgColor2; }
                    set
                    {
                            bgColor2 = value;
                            Invalidate();
                    }
            }


            private Color borderColor = Color.Gray;
            [DefaultValue(typeof(Color), "Gray"), Description("控件边框颜色")]
            public Color BorderColor
            {
                    get { return borderColor; }
                    set
                    {
                            borderColor = value;
                            Invalidate();
                    }
            }

            private int borderWidth = 0;
            [DefaultValue(typeof(int), "0"), Description("控件边框粗细")]
            public int BorderWidth
            {
                    get { return borderWidth; }
                    set
                    {
                            borderWidth = value;
                            Invalidate();
                    }
            }


            [DefaultValue(typeof(int), "5"), Description("圆角弧度大小")]
            private int radius = 5;
            public int Radius
            {
                    get { return radius; }
                    set
                    {
                            radius = value;
                            Invalidate();
                    }
            }

            [DefaultValue(typeof(LinearGradientMode), "Vertical"), Description("渐变方式")]
            private LinearGradientMode gradientMode = LinearGradientMode.Vertical;
            public LinearGradientMode GradientMode
            {
                    get { return gradientMode; }
                    set
                    {
                            gradientMode = value;
                            Invalidate();
                    }
            }

    //protected override void OnMouseLeave(EventArgs e)
    //{
    //        base.OnMouseLeave(e);
    //}

    //protected override void OnMouseEnter(EventArgs e)
    //{
    //        base.OnMouseEnter(e);
    //}

    protected override void WndProc(ref Message m)
    {
        base.WndProc(ref m);
        if (m.Msg == WM_PAINT)
        {
            //绘制工作：重绘边框、背景、按钮文本Text
            if (this.Radius > 0)
            {
                using (Graphics g = Graphics.FromHwnd(this.Handle))
                {
                    g.SmoothingMode = SmoothingMode.AntiAlias;
                    Rectangle r = new Rectangle();
                    r.Width = this.Width;
                    r.Height = this.Height;
                    DrawBorder(g, r, this.Radius);//绘制边框和背景还有文本
                }
            }
        }
    }

    private void DrawBorder(Graphics g, Rectangle rect, int radius)
    {
        rect.Width -= 1;
        rect.Height -= 1;

        if (BorderWidth > 0)//边框粗细》0
        {
            GraphicsPath path = new GraphicsPath();
            path = PaintCommon.GetRoundRectangle(rect, radius);//绘制圆角矩形路径
            using (Pen pen = new Pen(this.BorderColor, BorderWidth))
            {
                g.DrawPath(pen, path);
            }
        }
        //背景区域的矩形
        Rectangle rect1 = new Rectangle(rect.X + BorderWidth, rect.Y + BorderWidth, rect.Width - 2 * BorderWidth, rect.Height - 2 * BorderWidth);
        DrawBackColor(g, rect1, radius);// 绘制背景
        //绘制按钮文本
        StringFormat format = new StringFormat();
        format.LineAlignment = StringAlignment.Center;
        format.Alignment = StringAlignment.Center;
        Rectangle rect2 = new Rectangle( 5, 5, rect.Width - 10, rect.Height - 10);
        g.DrawString(this.Text, this.Font, new SolidBrush(this.ForeColor), rect1, format);
    }

    /// <summary>
    /// 绘制背景
    /// </summary>
    /// <param name="g"></param>
    /// <param name="rect1"></param>
    /// <param name="radius"></param>
    private void DrawBackColor(Graphics g, Rectangle rect, int radius)
    {
        //获取背景区域的圆角矩形
        GraphicsPath path1 = PaintCommon.GetRoundRectangle(rect, radius);
        if (this.BgColor2 != Color.Transparent)
        {
            //线型渐变画刷
            LinearGradientBrush brush = new LinearGradientBrush(rect, BgColor, BgColor2, gradientMode);
            g.FillPath(brush, path1);//填充圆角矩形内部
        }
        else
        {
            Brush b = new SolidBrush(BgColor);
            g.FillPath(b, path1);//填充圆角矩形内部
        }
    }
}

partial class UCircleButton
{
        /// <summary> 
        /// 必需的设计器变量。
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary> 
        /// 清理所有正在使用的资源。
        /// </summary>
        /// <param name="disposing">如果应释放托管资源，为 true；否则为 false。</param>
        protected override void Dispose(bool disposing)
        {
                if (disposing && (components != null))
                {
                        components.Dispose();
                }
                base.Dispose(disposing);
        }

        #region 组件设计器生成的代码

        /// <summary> 
        /// 设计器支持所需的方法 - 不要修改
        /// 使用代码编辑器修改此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {
    this.SuspendLayout();
    // 
    // UCircleButton
    // 
    this.FlatAppearance.BorderSize = 0;
    this.FlatAppearance.MouseDownBackColor = System.Drawing.Color.Transparent;
    this.FlatAppearance.MouseOverBackColor = System.Drawing.Color.Transparent;
    this.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
    this.ResumeLayout(false);

        }

        #endregion
}

public partial class UCircle : UserControl
{
    public UCircle()
    {
        InitializeComponent();
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        Graphics g = e.Graphics;
        g.SmoothingMode = SmoothingMode.AntiAlias;
        Rectangle rect = e.ClipRectangle;

        Rectangle rect1 = new Rectangle(rect.X + 1, rect.Y + 1, rect.Width - 2, rect.Height - 2);
        g.DrawEllipse(new Pen(this.ForeColor), rect1);
        g.FillEllipse(new SolidBrush(this.ForeColor), rect1);
    }
}
partial class UCircle
{
    /// <summary> 
    /// 必需的设计器变量。
    /// </summary>
    private System.ComponentModel.IContainer components = null;

    /// <summary> 
    /// 清理所有正在使用的资源。
    /// </summary>
    /// <param name="disposing">如果应释放托管资源，为 true；否则为 false。</param>
    protected override void Dispose(bool disposing)
    {
        if (disposing && (components != null))
        {
            components.Dispose();
        }
        base.Dispose(disposing);
    }

    #region 组件设计器生成的代码

    /// <summary> 
    /// 设计器支持所需的方法 - 不要修改
    /// 使用代码编辑器修改此方法的内容。
    /// </summary>
    private void InitializeComponent()
    {
        this.SuspendLayout();
        // 
        // UCircle
        // 
        this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 15F);
        this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
        this.Name = "UCircle";
        this.Size = new System.Drawing.Size(30, 30);
        this.ResumeLayout(false);

    }

    #endregion
}

3. 就是温度计控件，这个下节中讨论其中的绘制特点