（八十一）c#Winform自定义控件-时间轴-HZHControls

官网

http://www.hzhcontrols.com

前提

入行已经7,8年了，一直想做一套漂亮点的自定义控件，于是就有了本系列文章。

GitHub：https://github.com/kwwwvagaa/NetWinformControl

码云：https://gitee.com/kwwwvagaa/net_winform_custom_control.git

如果觉得写的还行，请点个 star 支持一下吧

欢迎前来交流探讨： 企鹅群568015492 

来都来了，点个【推荐】再走吧，谢谢

NuGet

Install-Package HZH_Controls

目录

https://www.cnblogs.com/bfyx/p/11364884.html

用处及效果

准备工作

没什么可准备的，直接开干吧。

思路：

2个panel，分别放标题和明细

然后重绘控件，在标题旁边画圆并且连线

开始

添加一个类来存放节点信息

  public class TimeLineItem
     {
         /// <summary>
         /// Gets or sets the title.
         /// </summary>
         /// <value>The title.</value>
         public string Title { get; set; }
         /// <summary>
         /// Gets or sets the details.
         /// </summary>
         /// <value>The details.</value>
         public string Details { get; set; }
     }

添加一个用户控件UCTimeLine

添加一些属性

 /// <summary>
         /// The line color
         /// </summary>
         private Color lineColor = TextColors.Light;

         /// <summary>
         /// Gets or sets the color of the line.
         /// </summary>
         /// <value>The color of the line.</value>
         [Description("连接线颜色"), Category("自定义")]
         public Color LineColor
         {
             get { return lineColor; }
             set
             {
                 lineColor = value;
                 Invalidate();
             }
         }
         /// <summary>
         /// The title font
         /// </summary>
         private Font titleFont = new Font("微软雅黑", 14f);

         /// <summary>
         /// Gets or sets the title font.
         /// </summary>
         /// <value>The title font.</value>
         [Description("标题字体"), Category("自定义")]
         public Font TitleFont
         {
             get { return titleFont; }
             set
             {
                 titleFont = value;
                 ReloadItems();
             }
         }

         /// <summary>
         /// The title forcolor
         /// </summary>
         private Color titleForcolor = TextColors.MoreDark;

         /// <summary>
         /// Gets or sets the title forcolor.
         /// </summary>
         /// <value>The title forcolor.</value>
         [Description("标题颜色"), Category("自定义")]
         public Color TitleForcolor
         {
             get { return titleForcolor; }
             set
             {
                 titleForcolor = value;
                 ReloadItems();
             }
         }

         /// <summary>
         /// The details font
         /// </summary>
         private Font detailsFont = new Font("微软雅黑", );

         /// <summary>
         /// Gets or sets the details font.
         /// </summary>
         /// <value>The details font.</value>
         [Description("详情字体"), Category("自定义")]
         public Font DetailsFont
         {
             get { return detailsFont; }
             set
             {
                 detailsFont = value;
                 ReloadItems();
             }
         }

         /// <summary>
         /// The details forcolor
         /// </summary>
         private Color detailsForcolor = TextColors.Light;

         /// <summary>
         /// Gets or sets the details forcolor.
         /// </summary>
         /// <value>The details forcolor.</value>
         [Description("详情颜色"), Category("自定义")]
         public Color DetailsForcolor
         {
             get { return detailsForcolor; }
             set
             {
                 detailsForcolor = value;
                 ReloadItems();
             }
         }

         /// <summary>
         /// The items
         /// </summary>
         TimeLineItem[] items;

         /// <summary>
         /// Gets or sets the items.
         /// </summary>
         /// <value>The items.</value>
         [Description("项列表"), Category("自定义")]
         public TimeLineItem[] Items
         {
             get { return items; }
             set
             {
                 items = value;
                 ReloadItems();
             }
         }

构造函数初始化一些东西

   public UCTimeLine()
         {
             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);
             InitializeComponent();
             items = new TimeLineItem[];
             if (ControlHelper.IsDesignMode())
             {
                 items = new TimeLineItem[];
                 for (int i = ; i < ; i++)
                 {
                     items[i] = new TimeLineItem()
                     {
                         Title = DateTime.Now.AddMonths(- * ( - i)).ToString("yyyy年MM月"),
                         Details = DateTime.Now.AddMonths(- * ( - i)).ToString("yyyy年MM月") + "发生了一件大事，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，然后王二麻子他爹王咔嚓出生了。"
                     };
                 }
                 ReloadItems();
             }
         }

重新加载列表

 private void ReloadItems()
         {
             try
             {
                 ControlHelper.FreezeControl(this, true);
                 this.Controls.Clear();
                 if (items != null)
                 {
                     foreach (var item in items)
                     {
                         FlowLayoutPanel panelTitle = new FlowLayoutPanel();
                         panelTitle.Dock = DockStyle.Top;
                         panelTitle.AutoScroll = false;
                         panelTitle.Padding = new System.Windows.Forms.Padding();
                         panelTitle.Name = "title_" + Guid.NewGuid().ToString();

                         Label lblTitle = new Label();
                         lblTitle.Dock = DockStyle.Top;
                         lblTitle.AutoSize = true;
                         lblTitle.Font = titleFont;
                         lblTitle.ForeColor = titleForcolor;
                         lblTitle.Text = item.Title;
                         lblTitle.SizeChanged += item_SizeChanged;
                         panelTitle.Controls.Add(lblTitle);
                         this.Controls.Add(panelTitle);
                         panelTitle.BringToFront();

                         FlowLayoutPanel panelDetails = new FlowLayoutPanel();
                         panelDetails.Dock = DockStyle.Top;
                         panelDetails.AutoScroll = false;
                         panelDetails.Padding = new System.Windows.Forms.Padding();
                         panelDetails.Name = "details_" + Guid.NewGuid().ToString();
                         Label lblDetails = new Label();
                         lblDetails.AutoSize = true;
                         lblDetails.Dock = DockStyle.Top;
                         lblDetails.Font = detailsFont;
                         lblDetails.ForeColor = detailsForcolor;
                         lblDetails.Text = item.Details;
                         lblDetails.SizeChanged += item_SizeChanged;
                         panelDetails.Controls.Add(lblDetails);
                         this.Controls.Add(panelDetails);
                         panelDetails.BringToFront();

                     }
                 }
             }
             finally
             {
                 ControlHelper.FreezeControl(this, false);
             }
         }

当文本大小改变时改变面板大小

 void item_SizeChanged(object sender, EventArgs e)
         {
             Label lbl = (Label)sender;
             lbl.Parent.Height = lbl.Height + ;
         }

重绘来画圆和连线

 protected override void OnPaint(PaintEventArgs e)
         {
             base.OnPaint(e);
             var g = e.Graphics;
             g.SetGDIHigh();
             var lst = this.Controls.ToArray().Where(p => p.Name.StartsWith("title_")).ToList();
             for (int i = ; i < lst.Count; i++)
             {
                 //画圆
                 g.DrawEllipse(new Pen(new SolidBrush(lineColor)), new Rectangle(, lst[i].Location.Y + , , ));
                 //划线
                 if (i != lst.Count - )
                 {
                     g.DrawLine(new Pen(new SolidBrush(lineColor)), new Point( + , lst[i].Location.Y +  - ), new Point( + , lst[i + ].Location.Y +  +  + ));
                 }
             }
         }

最后的话

如果你喜欢的话，请到 https://gitee.com/kwwwvagaa/net_winform_custom_control 点个星星吧