搞习惯了B/S的，想把winform的主页面搞成一个类似web网站主页的，首先左侧要有一个导航栏，这个对于winform 来说好像难度有点大了，连直接 拖拽的控件都没有，如果用TreeView的话，那是真的丑，那怎么办呢，只能自己定义一个导航控件了，首先，本人没有艺术细胞，先看看人家框架的导航栏是什么样式的，layui以前用的比较多，那就他了，等一下官网看看盗汗蓝是什么样子的。
上图是官网给的样式，那就照着这个搞一个导航栏，一般导是由图标的，那就在这个基础上加一个图标。这部就妥了吗。
按照上面的做一个，自己要自定义一个导航栏控件，我在网上先搜了一下，有一位大佬的思路不错，在大佬基础上在升华一次。首先现间一个类NavBar继承 FlowLayoutPanel
然后新建一个Model用来存放标题和子标题的。NavBarOption
public class NavBarOption
{
public string Title { get; set; }
public object Tag { get; set; }
public Image image { get; set; }
public List<NavBarOption> Item { get; set; }
}
然后就是自定义这个组件了：
public class NavBar: FlowLayoutPanel
{
private List<FlowLayoutPanel> childList = new List<FlowLayoutPanel>();//子类集合
private List<FlowLayoutPanel> parentList = new List<FlowLayoutPanel>();//父类集合
public event MouseEventHandler ChildItemMouseClick = null;//子项鼠标事件
public event MouseEventHandler ParentItemMouseClick = null;//父项鼠标事件
public NavBar()
{
this.AutoScroll = true;
this.Width = 170;
this.BackColor = Color.FromArgb(20, 30, 39);
this.Tag = "main";//初始化底层容器的标志，容器内的Panel 的 Tag用于存储折叠展开状态
SetScrollBar(this.Handle, 1, 0);//隐藏下、右滚动条
SetScrollBar(this.Handle, 0, 0);
}
/// <summary>
/// 设置子项的字体
/// </summary>
[DefaultValue(typeof(Font), "微软雅黑,9pt")]
[Description("子项的字体")]
public Font ChildItemFont
{
get { return _childItemFont; }
set { _childItemFont = value; }
}
private Font _childItemFont = new Font(new FontFamily("微软雅黑"), 9);
/// <summary>
/// 设置父项的字体
/// </summary>
[DefaultValue(typeof(Font), "微软雅黑,11pt,style=Bold")]
[Description("父项的字体")]
public Font ParentItemFont
{
get { return _parentItemFont; }
set { _parentItemFont = value; }
}
private Font _parentItemFont = new Font(new FontFamily("微软雅黑"), 11, FontStyle.Bold);
/// <summary>
/// 设置子项的四边边距
/// </summary>
[DefaultValue(typeof(Padding), "10,0,0,0")]
[Description("设置子项的四边边距")]
public Padding ChiluItemMargin
{
get { return _childItemMargin; }
set { _childItemMargin = value; }
}
private Padding _childItemMargin = new Padding(0, 0, 0, 0);
/// <summary>
/// 父节点的背景颜色
/// </summary>
[DefaultValue(typeof(Color), "57, 61, 73")]
[Description("父节点的背景颜色")]
public Color ParentBackColor
{
get { return _parentBackColor; }
set { _parentBackColor = value; }
}
private Color _parentBackColor = Color.FromArgb(57, 61, 73);
/// <summary>
/// 子节点的背景颜色
/// </summary>
[DefaultValue(typeof(Color), "20, 30, 39")]
[Description("子节点的背景颜色")]
public Color ChildBackColor
{
get { return _childBackColor; }
set { _childBackColor = value; }
}
private Color _childBackColor = Color.FromArgb(20, 30, 39);
/// <summary>
/// 父节点的高度
/// </summary>
[DefaultValue(typeof(int), "40")]
[Description("父节点的高度")]
public int ParentHeight
{
get { return _parentHeight; }
set { _parentHeight = value; }
}
private int _parentHeight = 40;
/// <summary>
/// 子级节点的高度
/// </summary>
[DefaultValue(typeof(int), "30")]
[Description("子节点的高度")]
public int ChildHeight
{
get { return _childHeight; }
set { _childHeight = value; }
}
private int _childHeight = 30;
/// <summary>
/// 鼠标悬浮节点的背景颜色
/// </summary>
[DefaultValue(typeof(Color), "39, 51, 69")]
[Description("鼠标悬浮节点的背景颜色")]
public Color MouseHoverBackColor
{
get { return _mouseHoverBackColor; }
set { _mouseHoverBackColor = value; }
}
private Color _mouseHoverBackColor = Color.FromArgb(39, 51, 69);
/// <summary>
/// 子节点被选中字体颜色
/// </summary>
[DefaultValue(typeof(Color), "28, 134, 238")]
[Description("子节点被选中字体颜色")]
public Color ChildSelectedForeColor
{
get { return _childSelectedForeColor; }
set { _childSelectedForeColor = value; }
}
private Color _childSelectedForeColor = Color.FromArgb(255, 255, 255);
public void SetNavBar(List<NavBarOption> options)
{
CreateMenuItemPanels(options, this, _parentHeight, false);
}
/// <summary>
/// 创建导航栏项
/// </summary>
/// <param name="options">项的设置信息</param>
/// <param name="parent">项的父容器</param>
/// <param name="itemH">项的高度</param>
/// <param name="isChildNode">该项是否输入最终子项</param>
private void CreateMenuItemPanels(List<NavBarOption> options, FlowLayoutPanel parent, int itemH, bool isChildNode)
{
if (options == null || options.Count <= 0) return;
foreach (NavBarOption option in options)
{
FlowLayoutPanel panel = CreatePanel(option, itemH, parent, isChildNode);
parent.Controls.Add(panel);
if (option.Item != null && option.Item.Count > 0)
{
CreateMenuItemPanels(option.Item, panel, _childHeight, true);
}
}
}
/// <summary>
/// 创建项中的控件
/// </summary>
/// <param name="option">项的设置信息</param>
/// <param name="itemH">项高度</param>
/// <param name="pPanel">项的父容器</param>
/// <returns></returns>
private FlowLayoutPanel CreatePanel(NavBarOption option, int itemH, FlowLayoutPanel pPanel, bool isChildNode)
{
NavBar panel = new NavBar();
Label itemL = new Label();
panel.AutoScroll = false;
panel.Height = itemH;
if (isChildNode)
{
panel.BackColor = _childBackColor;
panel.Margin = _childItemMargin;
childList.Add(panel);
}
else
{
panel.BackColor = _parentBackColor;
panel.Margin = new Padding(0);
parentList.Add(panel);
}
panel.Width = pPanel.Width;
panel.Tag = false;
if (isChildNode)
{
itemL.Font = _childItemFont;
}
else
{
itemL.Font = _parentItemFont;
}
itemL.Text = option.Title;
itemL.TextAlign = ContentAlignment.MiddleCenter;
itemL.ImageAlign = ContentAlignment.MiddleLeft;
itemL.Image = option.image;
//itemL.BackColor = Color.Empty;
itemL.ForeColor = Color.White;
itemL.Height = panel.Height;
itemL.Width = pPanel.Width;
itemL.Tag = option;
//添加鼠标进入与离开事件
itemL.MouseEnter += ItemL_MouseEnter;
itemL.MouseLeave += ItemL_MouseLeave;
//如果该节点的子节点不为空，且子节点数大于0
if (option.Item != null && option.Item.Count > 0)
{
itemL.Paint += ItemL_Paint_Expand;//添加展开与折叠图案绘制
itemL.MouseClick += ItemL_Parent_MouseClick;//展开与折叠事件
if (ParentItemMouseClick != null)
{
itemL.MouseClick += ParentItemMouseClick;
}
}
else
{
itemL.MouseClick += ItemL_Childe_MouseClick;//更改选中状态
if (ChildItemMouseClick != null)
{
itemL.MouseClick += ChildItemMouseClick;
}
}
panel.Controls.Add(itemL);
return panel;
}
#region 设置滚动条显示
[DllImport("user32.dll", CharSet = CharSet.Auto)]
public static extern int ShowScrollBar(IntPtr hWnd, int bar, int show);
private class SubWindow : NativeWindow
{
private int m_Horz = 0;
private int m_Show = 0;
public SubWindow(int p_Horz, int p_Show)
{
m_Horz = p_Horz;
m_Show = p_Show;
}
protected override void WndProc(ref Message m_Msg)
{
ShowScrollBar(m_Msg.HWnd, m_Horz, m_Show);
base.WndProc(ref m_Msg);
}
}
/// <summary>
/// 设置滚动条是否显示
/// </summary>
/// <param name="p_ControlHandle">句柄</param>
/// <param name="p_Horz">0横 1列 3全部</param>
/// <param name="p_Show">0隐 1显</param>
public static void SetScrollBar(IntPtr p_ControlHandle, int p_Horz, int p_Show)
{
SubWindow _SubWindow = new SubWindow(p_Horz, p_Show);
_SubWindow.AssignHandle(p_ControlHandle);
}
#endregion
private void ItemL_Childe_MouseClick(object sender, MouseEventArgs e)
{
Label label = sender as Label;
NavBarOption option = label.Tag as NavBarOption;
if (!childList.Contains(label.Parent as FlowLayoutPanel)) return;//如果子项中不包含该控件，则退出
InitializaAllChildItem();//初始化所有子节点
label.Font = new Font(_childItemFont.FontFamily, _childItemFont.Size + 1, FontStyle.Bold);
label.ForeColor = Color.White;
}
/// <summary>
/// 初始化所有子节点
/// </summary>
public void InitializaAllChildItem()
{
foreach (FlowLayoutPanel item in childList)
{
Label l = item.Controls[0] as Label;
l.Font = _childItemFont;
l.ForeColor = Color.White;
}
}
private void ItemL_Parent_MouseClick(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
Label label = sender as Label;
FlowLayoutPanel p = label.Parent as FlowLayoutPanel;
if ((bool)p.Tag)//折叠
{
p.Height = label.Height;
label.Invalidate();
p.Tag = false;
}
else//展开
{
CollapseAllItem();
p.Height = (p.Controls.Count - 1) * _childHeight + (p.Controls.Count - 1) * (_childItemMargin.Bottom + _childItemMargin.Top) + _parentHeight;
label.Invalidate();
p.Tag = true;
}
}
}
/// <summary>
/// 折叠所有节点
/// </summary>
public void CollapseAllItem()
{
foreach (FlowLayoutPanel item in parentList)//折叠所有父节点
{
item.Height = _parentHeight;
foreach (Control itemControl in item.Controls)
{
if (itemControl is Label)
{
itemControl.Invalidate();
break;
}
}
item.Tag = false;
}
}
private void ItemL_Paint_Expand(object sender, PaintEventArgs e)
{
Label label = sender as Label;
FlowLayoutPanel panel = label.Parent as FlowLayoutPanel;
Pen p = new Pen(Color.White, 2);
//int startP = 5;
//int drawLW =8;
int lHeight = label.Height;
int lWidth = label.Width;
if ((bool)panel.Tag)//折叠
{
e.Graphics.DrawLine(p, lWidth * 7 / 9, lHeight * 2 / 5, lWidth * 15 / 18, lHeight * 3 / 5);
e.Graphics.DrawLine(p, lWidth * 15 / 18, lHeight * 3 / 5, lWidth * 8 / 9, lHeight * 2 / 5);
}
else//展开
{
e.Graphics.DrawLine(p, lWidth * 15 / 18, lHeight * 3 / 7, lWidth * 8 / 9, lHeight * 4 / 7);
e.Graphics.DrawLine(p, lWidth * 8 / 9, lHeight * 4 / 7, lWidth * 15 / 18, lHeight * 5 / 7);
}
}
private void ItemL_MouseLeave(object sender, EventArgs e)
{
Label label = sender as Label;
label.BackColor = Color.Empty;
}
private void ItemL_MouseEnter(object sender, EventArgs e)
{
Label label = sender as Label;
label.BackColor = _mouseHoverBackColor;
}
}
定义完后，我们重新编译一下，会看到工具箱中出现了这个NavBar的组件：
把控件拖拽到窗体上：
然后填充一下数据：
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
CreateNavi();
}
private void CreateNavi()
{
List<NavBarOption> plist = new List<NavBarOption>();
NavBarOption Poption = new NavBarOption();
Poption.Tag = false;
Poption.Title = "父标题1";
Poption.image = Image.FromFile(@"F:\项目\MES\Mesfrm\MES.Win.UI\Resources\yes.png");
Poption.Item = new List<NavBarOption>();
NavBarOption Coption1 = new NavBarOption() { Title = "子标题1", Tag = true, image = Image.FromFile(@"F:\项目\MES\Mesfrm\MES.Win.UI\Resources\yes.png") };
NavBarOption Coption2 = new NavBarOption() { Title = "子标题2", Tag = true, image = Image.FromFile(@"F:\项目\MES\Mesfrm\MES.Win.UI\Resources\yes.png") };
Poption.Item.Add(Coption1);
Poption.Item.Add(Coption2);
plist.Add(Poption);
NavBarOption Poption1 = new NavBarOption();
Poption1.Tag = false;
Poption1.Title = "父标题2";
Poption1.image = Image.FromFile(@"F:\项目\MES\Mesfrm\MES.Win.UI\Resources\yes.png");
Poption1.Item = new List<NavBarOption>();
NavBarOption Coption3 = new NavBarOption() { Title = "子标题3", Tag = true, image = Image.FromFile(@"F:\项目\MES\Mesfrm\MES.Win.UI\Resources\yes.png") };
NavBarOption Coption4 = new NavBarOption() { Title = "子标题4", Tag = true, image = Image.FromFile(@"F:\项目\MES\Mesfrm\MES.Win.UI\Resources\yes.png") };
Poption1.Item.Add(Coption3);
Poption1.Item.Add(Coption4);
plist.Add(Poption1);
NavBarOption Poption2 = new NavBarOption();
Poption2.Tag = false;
Poption2.Title = "父标题3";
Poption2.image = Image.FromFile(@"F:\项目\MES\Mesfrm\MES.Win.UI\Resources\yes.png");
Poption2.Item = new List<NavBarOption>();
NavBarOption Coption5 = new NavBarOption() { Title = "子标题5", Tag = true, image = Image.FromFile(@"F:\项目\MES\Mesfrm\MES.Win.UI\Resources\yes.png") };
NavBarOption Coption6 = new NavBarOption() { Title = "子标题6", Tag = true, image = Image.FromFile(@"F:\项目\MES\Mesfrm\MES.Win.UI\Resources\yes.png") };
Poption2.Item.Add(Coption5);
Poption2.Item.Add(Coption6);
plist.Add(Poption2);
navBar1.ChildItemMouseClick += navBar1_ChildItemMouseClick;
navBar1.SetNavBar(plist);
}
private void navBar1_ChildItemMouseClick(object sender, MouseEventArgs e)
{
Label lb = sender as Label;
NavBarOption nav = lb.Tag as NavBarOption;
MessageBox.Show(nav.Title);
}
}
运行一下看一看效果：
这里导航栏就成了，看一看是不是和layui差不多了。
标签：Color,NavBarOption,private,Tag,new,导航,public,winform From： https://www.cnblogs.com/zpy1993-09/p/17018259.html