Dev控件使用之导航控件NavBarControl

控件用途

Navbarcontrol功能很强大，dev 目前也是winform/wpf/asp .new mvc 非常火的控件集，本文主要介绍导航控件的用法，多用于菜单导航，官方给出demo 如下，今天我们主要讲winform的使用；

控件使用

首先看下navbar 有哪些属性，这些都是布局属性，比如PaintStyleKind 可以选择不同的外观展示风格，也可以设定显示图标，

增加显示菜单，效果如下

但是navbar 只能显示两层菜单，这是官方给出的说法，如果想要显示多级菜单，我们还需要配合TreeList 使用，需要自己写代码进行实现，这里我们将做一个演示，最后会给出最终效果图；
首先我们要找出顶级菜单，来建立navbar 所需要的navbargroup，代码如下

//查询顶级菜单
var ltTop = ltMenu.FindAll(x => string.IsNullOrWhiteSpace(x.ParentNo)).OrderBy(x => x.SEQNO).ToList();
//循环建立navgroup
for (int i = 0; i < ltTop.Count; i++)
            {
                NavBarGroupControlContainer container = new NavBarGroupControlContainer();

                nbcMenu.Controls.Add(container);

                //添加Group
                NavBarGroup group = new NavBarGroup();
                group.Name = ltTop[i].FuncId;
                //功能名称
                group.Caption = ltTop[i].FuncName;
                group.ControlContainer = container;
                //是否展开
                group.Expanded = true;
                group.GroupClientHeight = 300;
                group.AppearanceBackground.BackColor = Color.White;
                group.AppearanceBackground.BackColor2 = Color.White;
                group.Appearance.BackColor = Color.White;
                group.Appearance.BackColor2 = Color.White;
                group.ImageOptions.LargeImage = image;
                 group.ImageOptions.SmallImage = image;
                 //
 
}

至此我们navbargroup 添加完成，但是我们多层级的还未建立，还需要在循环里添加Treelist 菜单，代码如下

var tl = GetTreeList();

                var ltChildMenu = FindNodeAllMenu(ltMenu, ltTop[i].FuncId);//ltMenu.FindAll(x => x.ParentNo == ltTop[i].FuncId).OrderBy(x => x.SEQNO).ToList();
                tl.DataSource = ltChildMenu;
                tl.ParentFieldName = "ParentNo";
                tl.KeyFieldName = "FuncId";
                tl.RefreshDataSource();
                container.Controls.Add(tl);

                nbcMenu.Groups.Add(group);

TreeList 获取方法

private TreeList GetTreeList() 
      {
          TreeList tl = new TreeList();
          tl.Appearance.FocusedCell.BackColor = System.Drawing.Color.LightCyan;
          tl.Appearance.FocusedCell.BackColor2 = System.Drawing.Color.LightCyan;
          tl.Appearance.FocusedCell.Options.UseBackColor = true;
          tl.Appearance.FocusedRow.BackColor = System.Drawing.Color.LightCyan;
          tl.Appearance.FocusedRow.BackColor2 = System.Drawing.Color.LightCyan;
          tl.Appearance.FocusedRow.Options.UseBackColor = true;
          tl.Appearance.Row.Font = new System.Drawing.Font("微软雅黑", 9.5F);
          tl.Appearance.Row.Options.UseFont = true;
          //新增栏位
          var tlColumn = new TreeListColumn();
          tlColumn.Caption = "treeListColumn1";
          tlColumn.FieldName = "FuncName";
          tlColumn.MinWidth = 28;
          tlColumn.Name = "treeListColumn2";
          tlColumn.OptionsColumn.AllowEdit = false;
          tlColumn.Visible = true;
          tlColumn.VisibleIndex = 0;
          tlColumn.Width = 104;
          tl.Columns.AddRange(new DevExpress.XtraTreeList.Columns.TreeListColumn[] {
          tlColumn});
          tl.Dock = System.Windows.Forms.DockStyle.Fill;
          tl.Location = new System.Drawing.Point(0, 0);
          tl.MinWidth = 18;
          tl.Name = "tlSubMenuList";
          tl.OptionsMenu.ShowExpandCollapseItems = false;
          tl.OptionsView.FocusRectStyle = DevExpress.XtraTreeList.DrawFocusRectStyle.RowFullFocus;
          tl.OptionsView.ShowColumns = false;
          tl.OptionsView.TreeLineStyle = DevExpress.XtraTreeList.LineStyle.Dark;
          tl.SelectImageList = this.imageCollection1;
          tl.Size = new System.Drawing.Size(314, 78);
          tl.TabIndex = 7;
          tl.TreeLevelWidth = 16;
          //注册事件
          tl.CustomDrawNodeImages += Tl_CustomDrawNodeImages;//注册绘制图片
          tl.DoubleClick += Tl_DoubleClick;//双击菜单
          tl.MouseUp += Tl_MouseUp;//
          return tl;
      }

至此使用navbar 创建完成，其中treelist 的双击菜单事件需要大家各自完成，最终实现的效果图如下