How to: Create and Modify the Control's Small Image List

  • 2 minutes to read

The following sample code creates and modifies an image list that will serve as the source of small images for the control. The modified component is assigned to the NavBarControl.LargeImages property. The NavElement.SmallImageIndex property is used to assign images to items and a group. The NavBarGroup.UseSmallImage and NavBarGroup.GroupStyle properties are set to true to enable the display of small images.

The image below displays the control's look & feel before and after code execution:

Images - SmallIndex

using DevExpress.XtraNavBar;
// ...
// adjusting an image list
ImageList smallImageSource = new ImageList();
smallImageSource.ImageSize = new Size(16, 16);
smallImageSource.TransparentColor = Color.Magenta;
smallImageSource.Images.Add(Image.FromFile("E:\\Images\\Icons\\MSHelp.bmp"));
smallImageSource.Images.Add(Image.FromFile("E:\\Images\\Icons\\Index.bmp"));
smallImageSource.Images.Add(Image.FromFile("E:\\Images\\Icons\\BookClosed.bmp"));

// setting the image list as the source of small images
navBarControl1.SmallImages = smallImageSource;

// assigning a small image to a group caption
NavBarGroup currGroup = navBarControl1.Groups[1];
currGroup.SmallImageIndex = 0;
currGroup.UseSmallImage = true;

// assigning small images to items
currGroup.ItemLinks[0].Item.SmallImageIndex = 1;
currGroup.ItemLinks[1].Item.SmallImageIndex = 2;
currGroup.LinksUseSmallImage = true;