Skip to main content

Linking Groups and Items

  • 3 minutes to read

In order to display an item within a particular NavBar group, you need to create a link for the item. Links belong to a group and represent references to particular items. All links owned by a specific NavBar group can be accessed using the NavBarGroup.Links collection.

Each link is represented by a TdxNavBarItemLink object. It provides the item being referred via its Item property.

You can easily create links for items at design time with the help of the Component editor. Double-click a NavBar control or select the ExpressNavBar Editor… option from the control’s context menu. This opens the Component editor. The following image shows the Component editor with the Link designer activated.

The Link designer provides two panels. The right panel lists all available items. The left panel displays groups and links created. You can create a link for a specific item by dragging it from the Items panel onto the Group and links panel. Dropping an item within a specific group creates a link referring to this item.

Let us consider an example of creating groups, items and links at runtime. Three items (Inbox, Outbox and News) and two groups (Local and News) are added to the dxNavBar1 control.

To display the Inbox and Outbox items within the Local group, two links are created by the group’s CreateLink method. Similarly, the link for the News item is created within the News group. In addition, this code assigns a AdvExplorerBarView view to the NavBar control and specifies the external image lists from which groups and items obtain their images (the LargeImageIndex and SmallImageIndex properties of NavBar items and groups).

with dxNavBar1 do
  begin
   //Create items
    with Items.Add do
    begin
      Caption := 'Inbox';
      LargeImageIndex := 3;
      SmallImageIndex := 3;
      //...
    end;
    with Items.Add do
    begin
      Caption := 'Outbox';
      LargeImageIndex := 7;
      SmallImageIndex := 7;
      //...
    end;
    with Items.Add do
    begin
      caption := 'News';
      LargeImageIndex := 5;
      SmallImageIndex := 5;
      //...
    end;
    //Create groups
    with Groups.Add do
    begin
      Caption := 'Local';
      LargeImageIndex := 4;
      SmallImageIndex := 4;
      LinksUseSmallImages := True;
      UseSmallImages := False;
      //Create links for Inbox and Outbox items
      CreateLink(Items[0]);
      CreateLink(Items[1]);
    end;
    with Groups.Add do
    begin
      Caption := 'News';
      LargeImageIndex := 6;
      SmallImageIndex := 6;
      LinksUseSmallImages := False;
      UseSmallImages := True;
      //Create a link for the News item
      CreateLink(Items[2]);
    end;
    //Set the AdvExplorerBarView view
    View := dxNavBarViewsFactory.GetIDFromName('AdvExplorerBarView');
    //Assign image lists
    LargeImages := LargeImageList;
    SmallImages := SmallImageList;
  end;

The following screenshot shows results of the above code: