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

前提

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

github：https://github.com/kwwwvagaa/netwinformcontrol

码云：

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

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

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

nuget

install-package hzh_controls

目录

用处及效果

准备工作

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

思路：

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

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

开始

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

 1  public class timelineitem
 2     {
 3         /// <summary>
 4         /// gets or sets the title.
 5         /// </summary>
 6         /// <value>the title.</value>
 7         public string title { get; set; }
 8         /// <summary>
 9         /// gets or sets the details.
10         /// </summary>
11         /// <value>the details.</value>
12         public string details { get; set; }
13     }

添加一个用户控件uctimeline

添加一些属性

  1 /// <summary>
  2         /// the line color
  3         /// </summary>
  4         private color linecolor = textcolors.light;
  5 
  6         /// <summary>
  7         /// gets or sets the color of the line.
  8         /// </summary>
  9         /// <value>the color of the line.</value>
 10         [description("连接线颜色"), category("自定义")]
 11         public color linecolor
 12         {
 13             get { return linecolor; }
 14             set
 15             {
 16                 linecolor = value;
 17                 invalidate();
 18             }
 19         }
 20         /// <summary>
 21         /// the title font
 22         /// </summary>
 23         private font titlefont = new font("微软雅黑", 14f);
 24 
 25         /// <summary>
 26         /// gets or sets the title font.
 27         /// </summary>
 28         /// <value>the title font.</value>
 29         [description("标题字体"), category("自定义")]
 30         public font titlefont
 31         {
 32             get { return titlefont; }
 33             set
 34             {
 35                 titlefont = value;
 36                 reloaditems();
 37             }
 38         }
 39 
 40         /// <summary>
 41         /// the title forcolor
 42         /// </summary>
 43         private color titleforcolor = textcolors.moredark;
 44 
 45         /// <summary>
 46         /// gets or sets the title forcolor.
 47         /// </summary>
 48         /// <value>the title forcolor.</value>
 49         [description("标题颜色"), category("自定义")]
 50         public color titleforcolor
 51         {
 52             get { return titleforcolor; }
 53             set
 54             {
 55                 titleforcolor = value;
 56                 reloaditems();
 57             }
 58         }
 59 
 60         /// <summary>
 61         /// the details font
 62         /// </summary>
 63         private font detailsfont = new font("微软雅黑", 10);
 64 
 65         /// <summary>
 66         /// gets or sets the details font.
 67         /// </summary>
 68         /// <value>the details font.</value>
 69         [description("详情字体"), category("自定义")]
 70         public font detailsfont
 71         {
 72             get { return detailsfont; }
 73             set
 74             {
 75                 detailsfont = value;
 76                 reloaditems();
 77             }
 78         }
 79 
 80         /// <summary>
 81         /// the details forcolor
 82         /// </summary>
 83         private color detailsforcolor = textcolors.light;
 84 
 85         /// <summary>
 86         /// gets or sets the details forcolor.
 87         /// </summary>
 88         /// <value>the details forcolor.</value>
 89         [description("详情颜色"), category("自定义")]
 90         public color detailsforcolor
 91         {
 92             get { return detailsforcolor; }
 93             set
 94             {
 95                 detailsforcolor = value;
 96                 reloaditems();
 97             }
 98         }
 99 
100         /// <summary>
101         /// the items
102         /// </summary>
103         timelineitem[] items;
104 
105         /// <summary>
106         /// gets or sets the items.
107         /// </summary>
108         /// <value>the items.</value>
109         [description("项列表"), category("自定义")]
110         public timelineitem[] items
111         {
112             get { return items; }
113             set
114             {
115                 items = value;
116                 reloaditems();
117             }
118         }

构造函数初始化一些东西

 1   public uctimeline()
 2         {
 3             this.setstyle(controlstyles.allpaintinginwmpaint, true);
 4             this.setstyle(controlstyles.doublebuffer, true);
 5             this.setstyle(controlstyles.resizeredraw, true);
 6             this.setstyle(controlstyles.selectable, true);
 7             this.setstyle(controlstyles.supportstransparentbackcolor, true);
 8             this.setstyle(controlstyles.userpaint, true);
 9             initializecomponent();
10             items = new timelineitem[0];
11             if (controlhelper.isdesignmode())
12             {
13                 items = new timelineitem[4];
14                 for (int i = 0; i < 4; i++)
15                 {
16                     items[i] = new timelineitem()
17                     {
18                         title = datetime.now.addmonths(-1 * (3 - i)).tostring("yyyy年mm月"),
19                         details = datetime.now.addmonths(-1 * (3 - i)).tostring("yyyy年mm月") + "发生了一件大事，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，咔嚓一声打了一个炸雷，然后王二麻子他爹王咔嚓出生了。"
20                     };
21                 }
22                 reloaditems();
23             }
24         }

重新加载列表

 1 private void reloaditems()
 2         {
 3             try
 4             {
 5                 controlhelper.freezecontrol(this, true);
 6                 this.controls.clear();
 7                 if (items != null)
 8                 {
 9                     foreach (var item in items)
10                     {
11                         flowlayoutpanel paneltitle = new flowlayoutpanel();
12                         paneltitle.dock = dockstyle.top;
13                         paneltitle.autoscroll = false;
14                         paneltitle.padding = new system.windows.forms.padding(5);
15                         paneltitle.name = "title_" + guid.newguid().tostring();
16 
17                         label lbltitle = new label();
18                         lbltitle.dock = dockstyle.top;
19                         lbltitle.autosize = true;
20                         lbltitle.font = titlefont;
21                         lbltitle.forecolor = titleforcolor;
22                         lbltitle.text = item.title;
23                         lbltitle.sizechanged += item_sizechanged;
24                         paneltitle.controls.add(lbltitle);
25                         this.controls.add(paneltitle);
26                         paneltitle.bringtofront();
27 
28 
29                         flowlayoutpanel paneldetails = new flowlayoutpanel();
30                         paneldetails.dock = dockstyle.top;
31                         paneldetails.autoscroll = false;
32                         paneldetails.padding = new system.windows.forms.padding(5);
33                         paneldetails.name = "details_" + guid.newguid().tostring();
34                         label lbldetails = new label();
35                         lbldetails.autosize = true;
36                         lbldetails.dock = dockstyle.top;
37                         lbldetails.font = detailsfont;
38                         lbldetails.forecolor = detailsforcolor;
39                         lbldetails.text = item.details;
40                         lbldetails.sizechanged += item_sizechanged;
41                         paneldetails.controls.add(lbldetails);
42                         this.controls.add(paneldetails);
43                         paneldetails.bringtofront();
44 
45                     }
46                 }
47             }
48             finally
49             {
50                 controlhelper.freezecontrol(this, false);
51             }
52         }

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

1 void item_sizechanged(object sender, eventargs e)
2         {
3             label lbl = (label)sender;
4             lbl.parent.height = lbl.height + 10;
5         }

重绘来画圆和连线

 1 protected override void onpaint(painteventargs e)
 2         {
 3             base.onpaint(e);
 4             var g = e.graphics;
 5             g.setgdihigh();
 6             var lst = this.controls.toarray().where(p => p.name.startswith("title_")).tolist();
 7             for (int i = 0; i < lst.count; i++)
 8             {
 9                 //画圆
10                 g.drawellipse(new pen(new solidbrush(linecolor)), new rectangle(7, lst[i].location.y + 10, 16, 16));
11                 //划线
12                 if (i != lst.count - 1)
13                 {
14                     g.drawline(new pen(new solidbrush(linecolor)), new point(7 + 8, lst[i].location.y + 10 - 2), new point(7 + 8, lst[i + 1].location.y + 10 + 16 + 2));
15                 }
16             }
17         }

 

最后的话

如果你喜欢的话，请到  点个星星吧