Customize Icons
- 4 minutes to read
The Document Viewer and Report Designer use vector icons to help users distinguish report controls and toolbar items. Vector icons ensure an application’s consistent look and feel with different skins and on different DPI settings.
The Report Designer‘s Ribbon toolbar uses the Office 2019 Colorful theme:
The Report Designer‘s Ribbon toolbar uses the Office 2019 Black theme:
You can replace icons with raster or vector (SVG) images, although we recommend that you use vector images.
Tip
See the following topic for information on how to customize icons in the Field List: Use Custom Icons for Field List Items.
Customize Toolbar Icons
The Bar Manager contains the Document Viewer‘s toolbar commands (Bar Items) and allows you to specify a new image for a bar item.
The following example shows how to change the Open toolbar command’s icon in the Document Viewer:
using DevExpress.XtraReports.UI;
using DevExpress.XtraPrinting;
using DevExpress.XtraBars;
using System.IO;
//...
ReportPrintTool tool = new ReportPrintTool(new XtraReport1());
BarItem barItem = tool.PreviewForm.PrintBarManager.GetBarItemByCommand(PrintingSystemCommand.Open);
FileStream stream = File.Open(@"icons\CustomFileOpen.svg", FileMode.Open);
barItem.ImageOptions.SvgImage = new DevExpress.Utils.Svg.SvgImage(stream);
tool.ShowPreview();
The Design Bar Manager contains the Report Designer‘s toolbar commands (Bar Items) and allows you to specify a new image for a bar item.
The following example shows how to change the Open toolbar command’s icon in the Report Designer:
using DevExpress.XtraReports.UI;
using DevExpress.XtraPrinting;
using DevExpress.XtraBars;
using System.IO;
//...
ReportDesignTool tool = new ReportDesignTool(new XtraReport1());
BarItem[] barItems = ((XRDesignForm)tool.DesignForm).DesignBarManager.GetBarItemsByReportCommand(ReportCommand.OpenFile);
FileStream stream = File.Open(@"icons\CustomFileOpen.svg", FileMode.Open);
barItems[0].ImageOptions.SvgImage = new DevExpress.Utils.Svg.SvgImage(stream);
tool.ShowDesigner();
The Ribbon Report Designer does not have the GetBarItemsByReportCommand method to retrieve bar items. Iterate toolbar items instead to locate the necessary item and specify a new image for this item.
The following example shows how to change the Open toolbar command’s icon in the Ribbon Report Designer:
using DevExpress.XtraReports.UI;
using DevExpress.XtraPrinting;
using DevExpress.XtraBars;
using System.IO;
//...
ReportDesignTool tool = new ReportDesignTool(new XtraReport1());
foreach (BarItem barItem in ((XRDesignRibbonForm)tool.DesignRibbonForm).DesignRibbonController.RibbonControl.Items) {
CommandBarItem commandBarItem = barItem as CommandBarItem;
if ((commandBarItem != null) && (commandBarItem.Command == DevExpress.XtraReports.UserDesigner.ReportCommand.OpenFile)) {
FileStream stream = File.Open(@"icons\CustomFileOpen.svg", FileMode.Open);
barItem.ImageOptions.SvgImage = new DevExpress.Utils.Svg.SvgImage(stream);
}
}
tool.ShowRibbonDesigner();
Refer to the following topics for information on how to add or remove toolbar items:
- Add Items to the Report Designer's Standard Toolbar.
- Add Items to the Report Designer's Ribbon Toolbar.
Customize Control Icons
To customize a control’s icon, handle the DesignPanelLoaded event and specify a new image for a control.
The following example shows how to change the Label control’s icon in the Report Designer:
using DevExpress.XtraReports.UI;
using DevExpress.XtraPrinting;
using DevExpress.XtraBars;
using DevExpress.XtraReports.UserDesigner;
using DevExpress.XtraReports.UserDesigner.Native;
using System.Drawing.Design;
using DevExpress.Utils.Svg;
//...
ReportDesignTool tool = new ReportDesignTool(new XtraReport1());
tool.DesignForm.DesignMdiController.DesignPanelLoaded += DesignMdiController_DesignPanelLoaded;
tool.ShowDesigner();
//...
private void DesignMdiController_DesignPanelLoaded(object sender, DesignerLoadedEventArgs e) {
XRToolboxService toolboxService = (XRToolboxService)e.DesignerHost.GetService(typeof(IToolboxService));
SvgImage svgImage = SvgImage.FromFile(@"icons\CustomLabel.svg");
toolboxService.AddToolBoxSvgImage(typeof(XRLabel), svgImage);
}
Refer to the following topic for information on how to add a custom control to the Toolbox: Add a Custom Control to the End-User Report Designer Toolbox.