文章目录
用处及效果

准备工作
没什么可准备的,直接开干吧。
思路:
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("微软雅黑", 10);
/// <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[0];
if (ControlHelper.IsDesignMode())
{
items = new TimeLineItem[4];
for (int i = 0; i < 4; i++)
{
items[i] = new TimeLineItem()
{
Title = DateTime.Now.AddMonths(-1 * (3 - i)).ToString("yyyy年MM月"),
Details = DateTime.Now.AddMonths(-1 * (3 - 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(5);
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(5);
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 + 10;
}
重绘来画圆和连线
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 = 0; i < lst.Count; i++)
{
//画圆
g.DrawEllipse(new Pen(new SolidBrush(lineColor)), new Rectangle(7, lst[i].Location.Y + 10, 16, 16));
//划线
if (i != lst.Count - 1)
{
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));
}
}
}
最后的话
如果你喜欢的话,请到 https://gitee.com/kwwwvagaa/net_winform_custom_control 点个星星吧
作者:冰封一夏
出处: http://www.hzhcontrols.com/doc.html
HZHControls官网:http://www.hzhcontrols.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,
且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
GitHub:https://github.com/kwwwvagaa/NetWinformControl
码云:https://gitee.com/kwwwvagaa/net_winform_custom_control.git