前提
入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章。
本系列文章将讲解各种控件的开发及思路,欢迎各位批评指正。
此系列控件开发教程将全部在原生控件基础上进行重绘开发,目标的扁平化、漂亮、支持触屏。
如果有什么好的建议也可以评论留言来交流。
源码地址:
GitHub:https://github.com/kwwwvagaa/NetWinformControl
码云:https://gitee.com/kwwwvagaa/net_winform_custom_control.git
如果觉得写的还行,请点个 star 支持一下吧
欢迎前来交流探讨: 企鹅群568015492
目录
http://toutiao.com/item/6824291838963220999/
准备工作
该控件是由多个按钮组合形成的,类似多选框和单选框,需要用到前面我们说到的控件UCBtnExt ,如果你对UCBtnExt 还不了解,请移步
(二)C#WinFrom自定义控件系列-按钮 查看
我们先理一下思路,我们需要显示多个按钮,支持多选和单选,具有选中效果
开始
我们先看下有哪些属性
1 /// 2 /// 选中改变事件 3 /// 4 public event EventHandler SelectedItemChanged; 5 private Dictionary m_dataSource = new Dictionary(); 6 /// 7 /// 数据源 8 /// 9 public Dictionary DataSource10 {11 get { return m_dataSource; }12 set13 {14 m_dataSource = value;15 Reload();16 }17 }18 19 private List m_selectItem = new List();20 /// 21 /// 选中项22 /// 23 public List SelectItem24 {25 get { return m_selectItem; }26 set27 {28 m_selectItem = value;29 if (m_selectItem == null)30 m_selectItem = new List();31 SetSelected();32 }33 }34 35 private bool m_isMultiple = false;36 /// 37 /// 是否多选38 /// 39 public bool IsMultiple40 {41 get { return m_isMultiple; }42 set { m_isMultiple = value; }43 }
当数据源改变的时候,需要加载按钮到面板上
1 private void Reload() 2 { 3 try 4 { 5 ControlHelper.FreezeControl(flowLayoutPanel1, true); 6 this.flowLayoutPanel1.Controls.Clear(); 7 if (DataSource != null) 8 { 9 foreach (var item in DataSource)10 {11 UCBtnExt btn = new UCBtnExt();12 btn.BackColor = System.Drawing.Color.Transparent;13 btn.BtnBackColor = System.Drawing.Color.White;14 btn.BtnFont = new System.Drawing.Font("微软雅黑", 10F);15 btn.BtnForeColor = System.Drawing.Color.Gray;16 btn.BtnText = item.Value;17 btn.ConerRadius = 5;18 btn.Cursor = System.Windows.Forms.Cursors.Hand;19 btn.FillColor = System.Drawing.Color.White;20 btn.Font = new System.Drawing.Font("微软雅黑", 15F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Pixel);21 btn.IsRadius = true;22 btn.IsShowRect = true;23 btn.IsShowTips = false;24 btn.Location = new System.Drawing.Point(5, 5);25 btn.Margin = new System.Windows.Forms.Padding(5);26 btn.Name = item.Key;27 btn.RectColor = System.Drawing.Color.FromArgb(224, 224, 224);28 btn.RectWidth = 1;29 btn.Size = new System.Drawing.Size(72, 38);30 btn.TabStop = false;31 btn.BtnClick += btn_BtnClick;32 this.flowLayoutPanel1.Controls.Add(btn);33 }34 }35 }36 finally37 {38 ControlHelper.FreezeControl(flowLayoutPanel1, false);39 }40 SetSelected();41 }42 43 void btn_BtnClick(object sender, EventArgs e)44 {45 var btn = sender as UCBtnExt;46 if (m_selectItem.Contains(btn.Name))47 {48 btn.RectColor = System.Drawing.Color.FromArgb(224, 224, 224);49 m_selectItem.Remove(btn.Name);50 }51 else52 {53 if (!m_isMultiple)54 {55 foreach (var item in m_selectItem)56 {57 var lst = this.flowLayoutPanel1.Controls.Find(item, false);58 if (lst.Length == 1)59 {60 var _btn = lst[0] as UCBtnExt;61 _btn.RectColor = System.Drawing.Color.FromArgb(224, 224, 224);62 }63 }64 m_selectItem.Clear();65 }66 btn.RectColor = System.Drawing.Color.FromArgb(255, 77, 59);67 m_selectItem.Add(btn.Name);68 }69 if (SelectedItemChanged != null)70 SelectedItemChanged(this, e);71 }
如果设置了初始选中项,那么还需要在加载后选中
1 private void SetSelected() 2 { 3 if (m_selectItem != null && m_selectItem.Count > 0 && DataSource != null && DataSource.Count > 0) 4 { 5 try 6 { 7 ControlHelper.FreezeControl(flowLayoutPanel1, true); 8 if (m_isMultiple) 9 {10 foreach (var item in m_selectItem)11 {12 var lst = this.flowLayoutPanel1.Controls.Find(item, false);13 if (lst.Length == 1)14 {15 var btn = lst[0] as UCBtnExt;16 btn.RectColor = System.Drawing.Color.FromArgb(255, 77, 59);17 }18 }19 }20 else21 {22 UCBtnExt btn = null;23 foreach (var item in m_selectItem)24 {25 var lst = this.flowLayoutPanel1.Controls.Find(item, false);26 if (lst.Length == 1)27 {28 btn = lst[0] as UCBtnExt;29 break;30 }31 }32 if (btn != null)33 {34 m_selectItem = new List() { btn.Name };35 btn.RectColor = System.Drawing.Color.FromArgb(255, 77, 59);36 }37 }38 }39 finally40 {41 ControlHelper.FreezeControl(flowLayoutPanel1, false);42 }43 }44 }
至此所有的逻辑已经处理完成
用处及效果
用处:可以用选择按钮组来替换单选框和复选框,具有更和谐的界面效果
效果:
最后的话
如果你喜欢的话,请到 码云或Github 点个星星吧