一个垂直的步骤组件

控件非完全自主实现,基于网络上水平的步骤组件开发。最终效果如下:
在这里插入图片描述

每个步骤可以点击,点击后触发事件,后续步骤的图标变为灰色。
核心源代码如下:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

namespace Controls
{
    /// <summary>
    /// Class UCStep.
    /// Implements the <see cref="System.Windows.Forms.UserControl" />
    /// </summary>
    /// <seealso cref="System.Windows.Forms.UserControl" />
    [DefaultEvent("IndexChecked")]
    public partial class UCStepV : UserControl
    {
        /// <summary>
        /// Occurs when [index checked].
        /// </summary>
        [Description("步骤更改事件"), Category("自定义")]
        public event EventHandler IndexChecked;

        /// <summary>
        /// The m step back color
        /// </summary>
        private Color m_stepBackColor = Color.FromArgb(189, 189, 189);

        /// <summary>
        /// 步骤背景色
        /// </summary>
        /// <value>The color of the step back.</value>
        [Description("步骤背景色"), Category("自定义")]
        public Color StepBackColor
        {
            get { return m_stepBackColor; }
            set
            {
                m_stepBackColor = value;
                Refresh();
            }
        }

        /// <summary>
        /// The m step fore color
        /// </summary>
        private Color m_stepForeColor = Color.FromArgb(255, 77, 59);

        /// <summary>
        /// 步骤前景色
        /// </summary>
        /// <value>The color of the step fore.</value>
        [Description("步骤前景色"), Category("自定义")]
        public Color StepForeColor
        {
            get { return m_stepForeColor; }
            set
            {
                m_stepForeColor = value;
                Refresh();
            }
        }

        /// <summary>
        /// The m step font color
        /// </summary>
        private Color m_stepFontColor = Color.White;

        /// <summary>
        /// 步骤文字颜色
        /// </summary>
        /// <value>The color of the step font.</value>
        [Description("步骤文字景色"), Category("自定义")]
        public Color StepFontColor
        {
            get { return m_stepFontColor; }
            set
            {
                m_stepFontColor = value;
                Refresh();
            }
        }

        /// <summary>
        /// The m step width
        /// </summary>
        private int m_stepHeight = 35;

        /// <summary>
        /// 步骤宽度
        /// </summary>
        /// <value>The width of the step.</value>
        [Description("步骤宽度景色"), Category("自定义")]
        public int StepHeight
        {
            get { return m_stepHeight; }
            set
            {
                m_stepHeight = value;
                Refresh();
            }
        }

        /// <summary>
        /// The m steps
        /// </summary>
        private string[] m_steps = new string[] { "step1", "step2", "step3" };

        /// <summary>
        /// Gets or sets the steps.
        /// </summary>
        /// <value>The steps.</value>
        [Description("步骤"), Category("自定义")]
        public string[] Steps
        {
            get { return m_steps; }
            set
            {
                if (value == null || value.Length < 1)
                    return;
                m_steps = value;
                Refresh();
            }
        }

        /// <summary>
        /// The m step index
        /// </summary>
        private int m_stepIndex = 0;

        /// <summary>
        /// Gets or sets the index of the step.
        /// </summary>
        /// <value>The index of the step.</value>
        [Description("步骤位置"), Category("自定义")]
        public int StepIndex
        {
            get { return m_stepIndex; }
            set
            {
                if (value > Steps.Length)
                    return;
                m_stepIndex = value;
                Refresh();
                IndexChecked?.Invoke(this, null);
            }
        }

        /// <summary>
        /// The m line width
        /// </summary>
        private int m_lineWidth = 2;

        /// <summary>
        /// Gets or sets the width of the line.
        /// </summary>
        /// <value>The width of the line.</value>
        [Description("连接线宽度,最小2"), Category("自定义")]
        public int LineWidth
        {
            get { return m_lineWidth; }
            set
            {
                if (value < 2)
                    return;
                m_lineWidth = value;
                Refresh();
            }
        }

        /// <summary>
        /// The m img completed
        /// </summary>
        private Image m_imgCompleted = null;

        /// <summary>
        /// Gets or sets the img completed.
        /// </summary>
        /// <value>The img completed.</value>
        [Description("已完成步骤图片,当不为空时,已完成步骤将不再显示数字,建议24*24大小"), Category("自定义")]
        public Image ImgCompleted
        {
            get { return m_imgCompleted; }
            set
            {
                m_imgCompleted = value;
                Refresh();
            }
        }

        /// <summary>
        /// The m LST cache rect
        /// </summary>
        private List<Rectangle> m_lstCacheRect = new List<Rectangle>();

        /// <summary>
        /// Initializes a new instance of the <see cref="UCStep" /> class.
        /// </summary>
        public UCStepV()
        {
            InitializeComponent();
            this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
            this.SetStyle(ControlStyles.DoubleBuffer, true);
            this.SetStyle(ControlStyles.ResizeRedraw, true);
            this.SetStyle(ControlStyles.Selectable, true);
            this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);
            this.SetStyle(ControlStyles.UserPaint, true);
            this.MouseDown += UCStep_MouseDown;
        }

        /// <summary>
        /// Handles the MouseDown event of the UCStep control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="MouseEventArgs" /> instance containing the event data.</param>
        private void UCStep_MouseDown(object sender, MouseEventArgs e)
        {
            var clickLocation = new Point(m_lstCacheRect[0].X+m_lstCacheRect[0].Width/2,e.Location.Y);
            var index = m_lstCacheRect.FindIndex(p => p.Contains(clickLocation));
            if (index >= 0)
            {
                StepIndex = index + 1;
            }
        }

        /// <summary>
        /// 引发 <see cref="E:System.Windows.Forms.Control.Paint" /> 事件。
        /// </summary>
        /// <param name="e">包含事件数据的 <see cref="T:System.Windows.Forms.PaintEventArgs" />。</param>
        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            var g = e.Graphics;
            g.DrawLine(new Pen(Color.LightGray), new Point(this.Width - 1, 1), new Point(this.Width - 1, this.Height - 1));
            //g.SetGDIHigh();
            g.SmoothingMode = SmoothingMode.AntiAlias;  //使绘图质量最高,即消除锯齿
            g.InterpolationMode = InterpolationMode.HighQualityBicubic;
            g.CompositingQuality = CompositingQuality.HighQuality;
            //g.Clear(Color.Red) ;
            if (m_steps != null && m_steps.Length > 0)
            {
                System.Drawing.SizeF sizeFirst = new SizeF(40,80);
                int x = 10;
                if (x < 0)
                    x = 0;

                int intTxtX = x + m_stepHeight + 10;
                int intLeft = 0;
                if (sizeFirst.Width > m_stepHeight)
                {
                    intLeft = (int)(sizeFirst.Width - m_stepHeight) / 2 + 1;
                }

                int intRight = 0;
                System.Drawing.SizeF sizeEnd = g.MeasureString(m_steps[m_steps.Length - 1], this.Font);
                if (sizeEnd.Width > m_stepHeight)
                {
                    intRight = (int)(sizeEnd.Width - m_stepHeight) / 2 + 1;
                }

                int intSplitHeight = 20;
                if (m_steps.Length > 1)
                {
                    intSplitHeight = (this.Height - m_steps.Length - (m_steps.Length * m_stepHeight) - intRight - intLeft) / (m_steps.Length - 1);
                }

                m_lstCacheRect = new List<Rectangle>();
                for (int i = 0; i < m_steps.Length; i++)
                {
                    #region 画圆,横线

                    Rectangle rectEllipse = new Rectangle(new Point(x,intLeft + i * (m_stepHeight + intSplitHeight)), new Size(m_stepHeight, m_stepHeight));
                    m_lstCacheRect.Add(rectEllipse);
                    g.FillEllipse(new SolidBrush(m_stepBackColor), rectEllipse);

                    if (m_stepIndex > i)
                    {
                        g.FillEllipse(new SolidBrush(m_stepForeColor), new Rectangle(new Point(x + 2,intLeft + i * (m_stepHeight + intSplitHeight) + 2), new Size(m_stepHeight - 4, m_stepHeight - 4)));
                    }
                    if (m_stepIndex > i && m_imgCompleted != null)
                    {
                        g.DrawImage(m_imgCompleted, new Rectangle(new Point(x + (m_stepHeight - 24) / 2,(intLeft + i * (m_stepHeight + intSplitHeight) + (m_stepHeight - 24) / 2)), new Size(24, 24)), 0, 0, m_imgCompleted.Width, m_imgCompleted.Height, GraphicsUnit.Pixel, null);
                    }
                    else
                    {
                        System.Drawing.SizeF _numSize = g.MeasureString((i + 1).ToString(), this.Font);
                        g.DrawString((i + 1).ToString(), Font, new SolidBrush(m_stepFontColor), new Point(x + (m_stepHeight - (int)_numSize.Width) / 2 - 1,intLeft + i * (m_stepHeight + intSplitHeight) + (m_stepHeight - (int)_numSize.Width) / 2 - 1));
                    }

                    #endregion 画圆,横线

                    System.Drawing.SizeF sizeTxt = g.MeasureString(m_steps[i], this.Font);
                    g.DrawString(m_steps[i], Font, new SolidBrush(m_stepIndex > i ? m_stepForeColor : m_stepBackColor), new Point(intTxtX,intLeft + i * (m_stepHeight + intSplitHeight) + (m_stepHeight - (int)sizeTxt.Height) / 2 + 1));
                }

                for (int i = 0; i < m_steps.Length; i++)
                {
                    if (m_stepIndex > i)
                    {
                        if (i != m_steps.Length - 1)
                        {
                            if (m_stepIndex == i + 1)
                            {
                                g.DrawLine(new Pen(m_stepForeColor, m_lineWidth), new Point(x + ((m_stepHeight) / 2),intLeft + i * (m_stepHeight + intSplitHeight) + m_stepHeight - 3), new Point(x + ((m_stepHeight) / 2),intLeft + i * (m_stepHeight + intSplitHeight) + m_stepHeight + intSplitHeight / 2));
                                g.DrawLine(new Pen(m_stepBackColor, m_lineWidth), new Point(x + ((m_stepHeight) / 2),intLeft + i * (m_stepHeight + intSplitHeight) + m_stepHeight + intSplitHeight / 2), new Point(x + ((m_stepHeight) / 2),intLeft + (i + 1) * (m_stepHeight + intSplitHeight) + 10));
                            }
                            else
                            {
                                g.DrawLine(new Pen(m_stepForeColor, m_lineWidth), new Point(x + ((m_stepHeight) / 2),intLeft + i * (m_stepHeight + intSplitHeight) + m_stepHeight - 3), new Point(x + ((m_stepHeight) / 2),intLeft + (i + 1) * (m_stepHeight + intSplitHeight) + 10));
                            }
                        }
                    }
                    else
                    {
                        if (i != m_steps.Length - 1)
                        {
                            g.DrawLine(new Pen(m_stepBackColor, m_lineWidth), new Point(x + ((m_stepHeight) / 2),intLeft + i * (m_stepHeight + intSplitHeight) + m_stepHeight - 3), new Point(x + ((m_stepHeight) / 2),intLeft + (i + 1) * (m_stepHeight + intSplitHeight) + 10));
                        }
                    }
                }
            }
        }
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丷丩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值