Tutorial 2 - Assign Images
- 2 minutes to read
This topic explains how to assign icons to groups and items in the NavBar-based application created in the previous tutorial.
Place a TImageList component on the form and add two 16x16 icons to the image list:
Assign the image list to the NavBar control’s OptionsImage.SmallImages property.
Place another TImageList component on the form and change its Width and Height property values to 32. Add five 32x32 icons to the image list and assign it to the NavBar control’s OptionsImage.LargeImages property.
Click the green selector box in the “Products” item. The box turns red and shows the item’s properties in the Object Inspector. Assign 0 to the SmallImageIndex property to use the first image. Assign 1 to the same property of the “Employees” item.
Change the NavBar control’s ActiveGroupIndex property to 1 to make the “Sales Info” group active and display its items.
To assign 32x32 icons to items of the “Sales Info” group, set its LinksUseSmallImages property to False. Set the LargeImageIndex property of “Orders”, “Customers”, and “Opportunities” to 0, 1, and 2, respectively.
Select the “Sales Info” group and set its LargeImageIndex property to 4.
Select the “Company Info” group and set its UseSmallImages property to False. Set the group’s LargeImageIndex property to 3.
Run the application.
Now you can add additional functionality to this application. Select the “Products” item and handle its OnClick event to implement an action in response to a click on this item.
For instance, you can display a panel with UI elements for this item and hide other panels.
var
AVisiblePanel: TPanel;
//...
procedure MakeVisible(APanel: TPanel);
begin
if(AVisiblePanel <> APanel) then
begin
if(AVisiblePanel <> nil) then
AVisiblePanel.Visible := False;
APanel.Visible := True;
AVisiblePanel := APanel;
end;
end;
procedure TForm3.ProductsClick(Sender: TObject);
begin
MakeVisible(pnlProducts);
end;
Handle the OnClick event for the other four items and call the MakeVisible procedure for their panels. Set the NavBar control’s OptionsBehavior.Common.AllowSelectLinks property to True to highlight the selected item.
Run the application.
