Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

  • 2 minutes to read

This example creates and modifies an image list that will serve as a source of small images for the control. The image list is assigned to the NavBarControl.LargeImages property. The NavElement.ImageOptions property is used to assign images to items and a group. NavBarGroup.GroupCaptionUseImage and NavBarGroup.GroupStyle properties enable display of small images.

The following image shows the control’s look & feel before and after code execution:

Images - SmallIndex

using DevExpress.XtraNavBar;
// ...
// Create 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"));

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

// Assign a small image to a group caption
NavBarGroup currGroup = navBarControl1.Groups[1];
currGroup.ImageOptions.SmallImageIndex = 0;
currGroup.GroupCaptionUseImage = NavBarImage.Small;

// Assign small images to items
currGroup.ItemLinks[0].Item.ImageOptions.SmallImageIndex = 1;
currGroup.ItemLinks[1].Item.ImageOptions.SmallImageIndex = 2;
currGroup.GroupStyle = NavBarGroupStyle.SmallIconsList;