TAdvNavBar Tutorial: Tips, Tricks, and Best Practices

Mastering TAdvNavBar: A Complete Component Guide Delphi and C++Builder developers frequently require highly customizable, professional navigation interfaces that mimic Microsoft Outlook’s iconic navigation pane. The TMS Software VCL UI Pack provides the ideal solution for this with TAdvNavBar. This comprehensive guide covers everything from basic structural setup to advanced runtime manipulation and visual customization. Understanding the Core Structure

The TAdvNavBar component operates on a strict hierarchical model. Visual and functional separation relies on three primary elements:

The Control (TAdvNavBar): The main container managing the entire user interface, sizing, and global display styles.

Panels (TAdvNavBarPanel): The content areas that activate and display when a specific navigation item is selected. These act like standard control containers (similar to a TPanel or TPage).

Items (TAdvNavBarItem): The selectable buttons or links housed at the bottom of the navigation bar or within the overflow menu.

Each TAdvNavBarPanel is explicitly linked to a corresponding TAdvNavBarItem. When a user clicks an item, the component automatically brings its associated panel to the front. Designing the Layout at Design-Time

Setting up the component inside the RAD Studio IDE requires a specific sequence of steps to ensure proper parent-child relationships between controls. Step 1: Initial Component Placement Drop a TAdvNavBar from the tool palette onto your form. Set its Align property to alLeft or alRight.

Adjust the Width property (typically between 200 and 300 pixels) to accommodate your navigation text. Step 2: Creating Navigation Pairs Right-click the TAdvNavBar component on the form designer.

Select Add Panel from the context menu. This action automatically creates a new TAdvNavBarPanel and a paired TAdvNavBarItem.

Look at the Object Inspector with the main component selected. The Panels and Items collections will both show an incremented count. Step 3: Populating the Content Panels

Because TAdvNavBarPanel descends from TCustomControl, it serves as a surface for other VCL controls.

Select the specific panel you want to design by clicking its tab or selecting it via the Object Inspector.

Drop controls like TAdvOfficePage, TTreeView, TListBox, or speed buttons directly onto the active panel surface.

Set the child control’s Align property to alClient to ensure it resizes dynamically when the navigation bar width changes. Managing Components via Code at Runtime

Dynamic applications often require modifying navigation options based on user permissions or application states. The following examples demonstrate how to manipulate TAdvNavBar using Delphi code. Dynamically Adding a Navigation Page

To add a new navigation section at runtime, you must create both the item and the panel, then explicitly link them together.

procedure TForm1.AddNewNavigationSection; var NewItem: TAdvNavBarItem; NewPanel: TAdvNavBarPanel; NewButton: TButton; begin // 1. Create and configure the Item (the button at the bottom) NewItem := TAdvNavBarItem(AdvNavBar1.Items.Add); NewItem.Caption := ‘Reports’; NewItem.ImageIndex := 2; // Assumes an image list is connected // 2. Create and configure the Panel (the container surface) NewPanel := TAdvNavBarPanel.Create(Self); NewPanel.Parent := AdvNavBar1; NewPanel.Caption := ‘Reports View’; // 3. Establish the mutual link NewPanel.Item := NewItem; NewItem.Panel := NewPanel; // 4. Add UI elements inside the newly created panel NewButton := TButton.Create(Self); NewButton.Parent := NewPanel; NewButton.Caption := ‘Run Financial Report’; NewButton.Left := 20; NewButton.Top := 20; end; Use code with caution. Switching Active Panels Programmatically

You can force the user interface to navigate to a specific section by changing the ActiveItem or ActivePanel properties:

// Approach 1: Switch using the item index AdvNavBar1.ActiveItemIndex := 0; // Approach 2: Switch using the specific panel reference AdvNavBar1.ActivePanel := AdvNavBarPanel2; Use code with caution. Customizing Visual Styles and Themes

TAdvNavBar offers extensive design flexibility, allowing it to blend seamlessly into modern application styles. Using Built-in Styles

The easiest way to change the entire look of the component is through the Style property. This property hooks into the global TMS styling frameworks. Locate the Style property in the Object Inspector.

Select options such as nsOffice2016White, nsOffice2019White, or nsWindows10 to immediately update gradients, borders, and font colors across all panels and items. Configuring Images and Icons

To provide high-quality visual indicators for your navigation sections:

Assign a standard TImageList or TVirtualImageList (for High-DPI support) to the Images property of TAdvNavBar.

For each individual TAdvNavBarItem, set the ImageIndex property to display the desired icon next to the text caption. Handling the Collapse/Expand Behavior

Like Outlook, TAdvNavBar can collapse into a narrow icon-only strip to maximize workspace screen real estate.

Toggle via UI: Users can click the small arrow splitter button at the top or bottom of the component.

Toggle via Code: Change the boolean state of the Collapsed property: AdvNavBar1.Collapsed := not AdvNavBar1.Collapsed; Use code with caution. Event Handling and Best Practices

To make your navigation functional, write event handlers that respond to user layout adjustments and selection changes. Essential Events to Monitor

OnItemClick: Fires immediately when a user clicks a navigation item. Use this to lazy-load database data onto the corresponding panel only when it becomes visible.

OnCollapse / OnExpand: Fires when the component changes its layout state. Use these to adjust surrounding form layouts or hide/show complementary panels. Performance Tip: Lazy Loading Panel Content

Populating every single panel with heavy database-driven controls during FormCreate can slow down application startup. Instead, keep panels empty initially and populate them when needed: Use code with caution.

If you want to dive deeper into specific visual anomalies or handle specialized layouts with TAdvNavBar, let me know! I can provide tailored tips if you share your target Delphi version, whether your application requires High-DPI support, or if you are using specific TMS Styles.