How to: Assign Images to Group Captions and Contained Links

Jan 10, 2025

This example assigns a large image to a group caption and small images to contained links. The NavElement.ImageOptions property gives access to SmallImage and LargeImage properties that specify images. The NavBarGroup.GroupCaptionUseImage property is set to Large to display a large image within the group caption. The NavBarGroup.GroupStyle property is set to SmallIconsList to display small images within links.

The following image shows a NavBarControl before and after sample code execution.

C#
VB.NET

csharp

using DevExpress.XtraNavBar;
// ...
NavBarGroup helpGroup = navBarControl1.Groups[1];
helpGroup.ImageOptions.LargeImage = Image.FromFile("E:\\Images\\Icons\\MSHelpLarge.bmp");      

NavBarItem indexItem = helpGroup.ItemLinks[0].Item;
indexItem.ImageOptions.SmallImage = Image.FromFile("E:\\Images\\Icons\\index.bmp");

NavBarItem contentsItem = helpGroup.ItemLinks[1].Item;
contentsItem.ImageOptions.SmallImage = Image.FromFile("E:\\Images\\Icons\\bookClosed.bmp");

helpGroup.GroupCaptionUseImage = NavBarImage.Small;
helpGroup.GroupStyle = NavBarGroupStyle.SmallIconsList;

Imports DevExpress.XtraNavBar
' ...
Private helpGroup As NavBarGroup = navBarControl1.Groups(1)
helpGroup.ImageOptions.LargeImage = Image.FromFile("E:\Images\Icons\MSHelpLarge.bmp")

Dim indexItem As NavBarItem = helpGroup.ItemLinks(0).Item
indexItem.ImageOptions.SmallImage = Image.FromFile("E:\Images\Icons\index.bmp")

Dim contentsItem As NavBarItem = helpGroup.ItemLinks(1).Item
contentsItem.ImageOptions.SmallImage = Image.FromFile("E:\Images\Icons\bookClosed.bmp")

helpGroup.GroupCaptionUseImage = NavBarImage.Small
helpGroup.GroupStyle = NavBarGroupStyle.SmallIconsList