NavBarControl控件

NavBarControl控件
1. 新建一个windows窗体应用程序项目

2. 在工具箱中的Navigation& Layout选项卡下找到NavBarControl，直接拖到窗体中

图1
3. 选中控件，在属性窗口设置Dock属性，这里设置为left

4. 在属性面板中的ParntStyleName设置皮肤样式，根据需要选择皮肤样式

图2
效果如下

图3

5. 选中NavBarControl1，点击属性面板下方的Run Designer进行Group和Items的添加设置

图4
6. 添加Group：选中Group/Items/Links 点击NavBar Groups中的空白处然后点击Add Group便可添加Group，在右边的属性面板中修改Caption标题的值

图5
7.添加Items,点击NavBar Items 下的空白处，然后点击AddItem便可添加Item, 在右边的属性面板中修改Caption标题的值

图6
在Group中添加Item ，直接把左边的Item拖到相应的Group然后放开就可以啦

图7
完成初步设计的效果如图

图8
如果觉得下面的三个Group按钮占空间，你可以把他们隐藏到最下面，只要修改一个属性即可，在属性面板中找到NavigationPaneMaxVisibleGroups，默认值为-1，即显示全部，你可以修改为0，即一个都不显示

图9

图10
为Group按钮添加图标，设置图标显示方式，小图标还是大图标，默认显示小图标，然后根据设置添加相应图标图标

图11

图12
为Item按钮添加图标，首先设置图标的显示样式，默认为图标在左边文字在右边

你可以选择LargeIconsText图标在上方，文字在下方。

图13
选中样式后点击Item

图14

禁止拖动的属性

在属性面板中添加相应的图标

图15
得到的效果如下图

Default LargeIconsText
图16
属性到这里就基本设置完成了，下面为每一个Item添加事件，在这里直接对着Item双击是没有用的，我们只有选中Item 然后打开属性面板，

图17
双击便添加了该Item的单机事件

图18

接下来往右边添加一个XtraTabControl

图19
它的把它的xtraTabPage和边框都拖到窗体看不见的地方

效果如下图

图20
在属性面板中选中xtraTabPage标签，然后在上面添加控件

点击相应的Item显示对应的xtraTabPage ，基本原理就是点击相应的按钮选中相依的标签

如果使微软的TabControl这可以用tabControl1.SelectTab()方法来选中TabPage

private
voidnavBarItem1_LinkClicked(object sender,DevExpress.XtraNavBar.NavBarLinkEventArgs e)
{
xtraTabControl1.SelectedTabPage =xtraTabPage1;
}
private
voidnavBarItem2_LinkClicked(object sender,DevExpress.XtraNavBar.NavBarLinkEventArgs e)
{
xtraTabControl1.SelectedTabPage =
this.xtraTabPage2;
}

显示效果

图21

图22

NavBar的Group中添加按照自己组合的控件
在属性面板中选择你需要设计的Group，把GroupStyle的属性选择为ControlContainer
如果没有设置GroupStyle的属性选择为ControlContainer，那么往Group上添加控件是其他的Group都能看见这些控件，显然这不是我们想要的结果

图23
这是你会发现控件列表中多出了这个控件

这个时候你就可以往上面拖放控件

接着根据需要添加这些控件的事件和修改这些控件的属性

运行效果如下

在NavBarControl的Items不多的情况下可以使用XtraTabControl，如果Items太多，所有的信息都集中在同一个窗口，维护起来就比较困难。
现在NavBarControl的设计不变，但右边不是XtraTabControl，而是GroupControl或者PanelControl之类的容器，然后显示信息的窗体用XtraUserControl或者UserControl都可以。
然后再Item的LinkClicked事件中添加
#region NewStyles
private
void navBarItem1_LinkClicked(object sender, DevExpress.XtraNavBar.NavBarLinkEventArgs e) {
this.groupControl1.Controls.Clear();
GaugesMainDemo.Modules.NewStyles style =
newGaugesMainDemo.Modules.NewStyles();
style.Dock = DockStyle.Fill;
this.groupControl1.Controls.Add(style);
}
#endregion