How to: Access the Navigation Control

• Aug 20, 2024
• 4 minutes to read

This example shows how to access and customize the navigation control. Since customizations affect only the UI and do not depend on the current View or data, you need to create a Window Controller. For more information on the navigation system, refer to the following topic: Navigation System.

WinForms Controller

Add a new Window Controller to the WinForms application project (MySolution.Win). Override the Controller’s protected OnActivated method, subscribe to the ActionBase.CustomizeControl event, and customize the navigation control in the event handler:

C#

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
        }
    }
    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 in old templates and new templates with UseLightStyle set to false
        }
    }
    protected override void OnDeactivated() {
        Frame.GetController<ShowNavigationItemController>().ShowNavigationItemAction.CustomizeControl -= 
            ShowNavigationItemAction_CustomizeControl;
        base.OnDeactivated();
    }
}

ASP.NET Web Forms Controller

Add a new Window Controller to the ASP.NET Web Forms module project and override its protected OnActivated method to access the current Controller.Frame. Subscribe to the ActionBase.CustomizeControl event and customize the navigation control in the event handler:

C#

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;
    }
}

The CustomizeControl event does not fire if the navigation optimization is enabled (the WebApplication.OptimizationSettings.EnableNavigationControlDelayedCreation property value is true), because the Navigation Control is not recreated through the callback.

ASP.NET Core Blazor Controller

In XAF Blazor applications, you can use DxTreeViewAdapter or DxAccordionAdapter to customize the navigation control based on the selected navigation style. The both adapters expose the actual underlying component (DxTreeView or DxAccordion) and their component models.

The following example demonstrates how to access the navigation component adapter and use it to expand all navigation items and hide the filter panel when the navigation menu is shown for the first time:

File:
MySolution.Blazor.Server\Controllers\BlazorCustomizeNavigationController.cs

using DevExpress.Blazor;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Blazor.Components;
using DevExpress.ExpressApp.Blazor.Templates.Navigation;
using DevExpress.ExpressApp.Blazor.Templates.Navigation.ActionControls;
using DevExpress.ExpressApp.SystemModule;

public class BlazorCustomizeNavigationController : WindowController {
    protected override void OnActivated() {
        base.OnActivated();
        Frame.GetController<ShowNavigationItemController>().ShowNavigationItemAction
             .CustomizeControl += ShowNavigationItemAction_CustomizeControl;
    }

    protected override void OnDeactivated() {
        base.OnDeactivated();
        Frame.GetController<ShowNavigationItemController>().ShowNavigationItemAction
             .CustomizeControl -= ShowNavigationItemAction_CustomizeControl;
    }

    private void ShowNavigationItemAction_CustomizeControl(object? sender, CustomizeControlEventArgs e) {
        var navigationComponentAdapter = (e.Control as ShowNavigationItemActionControl)?.NavigationComponentAdapter;
        if(navigationComponentAdapter is DxTreeViewAdapter treeViewAdapter) {
            treeViewAdapter.ComponentModel.ShowFilterPanel = false;
            treeViewAdapter.ComponentCaptured += TreeViewAdapter_ComponentCaptured;
        }
        else if(navigationComponentAdapter is DxAccordionAdapter accordionAdapter) {
            accordionAdapter.ComponentModel.ShowFilterPanel = false;
            accordionAdapter.ComponentCaptured += AccordionAdapter_ComponentCaptured;
        }
    }

    private void TreeViewAdapter_ComponentCaptured(object? sender, ComponentCapturedEventArgs<DxTreeView> e) {
        e.Component.ExpandAll();
    }

    private void AccordionAdapter_ComponentCaptured(object? sender, ComponentCapturedEventArgs<DxAccordion> e) {
        e.Component.ExpandAll();
    }
}