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