How to: Access the Navigation Control
- 5 minutes to read
This example shows how to access and customize the navigation control. Since customizations will affect only the user interface and will not depend on the current View or data, a Window Controller needs to be created. For detailed information on the navigation system, refer to the Navigation System topic.
Tip
A complete sample project is available in the DevExpress Code Examples database at https://supportcenter.devexpress.com/ticket/details/e240/how-to-change-navigation-control-appearance.
WinForms Controller
Add a new Window Controller to the WinForms module project and override its protected OnActivated method, subscribe to the ActionBase.CustomizeControl event and perform the required customizations in the event handler.
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.SystemModule;
using DevExpress.XtraBars.Navigation;
using DevExpress.XtraNavBar;
using DevExpress.XtraTreeList;
// ...
public class WinCustomizeNavigationController : WindowController {
public WinCustomizeNavigationController() {
TargetWindowType = WindowType.Main;
}
protected override void OnActivated() {
base.OnActivated();
Frame.GetController<ShowNavigationItemController>().ShowNavigationItemAction.CustomizeControl +=
ShowNavigationItemAction_CustomizeControl;
}
private TreeList GetEmbeddedTreeList(NavBarGroupControlContainer container) {
if(container != null && container.Controls.Count == 1) {
return container.Controls[0] as TreeList;
}
return null;
}
private void CustomizeEmbeddedTreeList(NavGroupCollection groups) {
foreach(NavBarGroup group in groups) {
TreeList treeList = GetEmbeddedTreeList(group.ControlContainer);
// Customize TreeList in old templates and new templates with UseLightStyle set to false
}
}
private void ShowNavigationItemAction_CustomizeControl(object sender, CustomizeControlEventArgs e) {
if(e.Control is AccordionControl) {
// Customize AccordionControl
}
else if(e.Control is NavBarControl) {
// Customize NavBarControl
CustomizeEmbeddedTreeList(((NavBarControl)e.Control).Groups);
}
else if(e.Control is TreeList) {
// Customize TreeList
}
}
protected override void OnDeactivated() {
Frame.GetController<ShowNavigationItemController>().ShowNavigationItemAction.CustomizeControl -=
ShowNavigationItemAction_CustomizeControl;
base.OnDeactivated();
}
}
ASP.NET Controller
Add a new Window Controller to the ASP.NET module project and override its protected OnActivated method to access the current Controller.Frame. Subscribe to the ActionBase.CustomizeControl event and perform the required customizations in the event handler.
Note
The CustomizeControl event cannot be raised if the navigation optimization is enabled (the WebApplication.OptimizationSettings.EnableNavigationControlDelayedCreation property is set to true), because the Navigation Control is not recreated through the callback.
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.SystemModule;
using DevExpress.ExpressApp.Web.Templates.ActionContainers;
using DevExpress.Web;
//...
public class WebCustomizeNavBarController : WindowController {
public WebCustomizeNavBarController() {
TargetWindowType = WindowType.Main;
}
protected override void OnActivated() {
base.OnActivated();
Frame.GetController<ShowNavigationItemController>().ShowNavigationItemAction.CustomizeControl +=
ShowNavigationItemAction_CustomizeControl;
}
private void ShowNavigationItemAction_CustomizeControl(object sender,
CustomizeControlEventArgs e) {
ASPxNavBar navBar = e.Control as ASPxNavBar;
if(navBar != null) {
// Customize the main ASPxNavBar control.
navBar.EnableAnimation = true;
foreach(NavBarGroup group in navBar.Groups) {
foreach(NavBarItem item in group.Items) {
if(item is NavBarTreeViewItem) {
ASPxTreeView innerTreeView = ((NavBarTreeViewItem)item).TreeViewNavigationControl.Control;
// Customize the inner ASPxTreeView control inside the navigation group.
innerTreeView.ShowExpandButtons = false;
}
}
}
}
else {
ASPxTreeView mainTreeView = e.Control as ASPxTreeView;
if(mainTreeView != null) {
// Customize the main ASPxTreeView control.
mainTreeView.ShowExpandButtons = false;
}
}
}
protected override void OnDeactivated() {
base.OnDeactivated();
Frame.GetController<ShowNavigationItemController>().ShowNavigationItemAction.CustomizeControl -=
ShowNavigationItemAction_CustomizeControl;
}
}
Mobile Controller
Add a new Window Controller to the Mobile module project and override its protected OnActivated method, subscribe to the ActionBase.CustomizeControl event and perform the required customizations in the event handler.
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Mobile.MobileModel;
using DevExpress.ExpressApp.SystemModule;
// ...
public class MobileCustomizeNavigationController : WindowController {
public MobileCustomizeNavigationController() {
TargetWindowType = WindowType.Main;
}
protected override void OnActivated() {
base.OnActivated();
Frame.GetController<ShowNavigationItemController>().ShowNavigationItemAction.CustomizeControl +=
ShowNavigationItemAction_CustomizeControl;
}
private void ShowNavigationItemAction_CustomizeControl(object sender,
CustomizeControlEventArgs e) {
Navigation navigation = e.Control as Navigation;
foreach (Command command in navigation.Items) {
// Customize navigation items
}
}
protected override void OnDeactivated() {
Frame.GetController<ShowNavigationItemController>().ShowNavigationItemAction.CustomizeControl -=
ShowNavigationItemAction_CustomizeControl;
base.OnDeactivated();
}
}