NavBarControl控件 2015-07-23 16:56 2人阅读 评论(0) 收藏

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