Customize Icons

Aug 18, 2023
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.

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 :

C#
VB.NET

csharp

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();

Imports DevExpress.XtraReports.UI
Imports DevExpress.XtraPrinting
Imports DevExpress.XtraBars
Imports System.IO

'...

Dim tool As New ReportPrintTool(New XtraReport1())
Dim barItem As BarItem = tool.PreviewForm.PrintBarManager.GetBarItemByCommand(PrintingSystemCommand.Open)
Dim stream As FileStream = 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 :

C#
VB.NET

csharp

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();

Imports DevExpress.XtraReports.UI
Imports DevExpress.XtraPrinting
Imports DevExpress.XtraBars
Imports System.IO

'...

Private tool As New ReportDesignTool(New XtraReport1())
Private barItems() As BarItem = CType(tool.DesignForm, XRDesignForm).DesignBarManager.GetBarItemsByReportCommand(ReportCommand.OpenFile)
Private stream As FileStream = File.Open("icons\CustomFileOpen.svg", FileMode.Open)
Private 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 :

C#
VB.NET

csharp

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();

Imports DevExpress.XtraReports.UI
Imports DevExpress.XtraPrinting
Imports DevExpress.XtraBars
Imports System.IO

'...

Private tool As New ReportDesignTool(New XtraReport1())
For Each barItem As BarItem In CType(tool.DesignRibbonForm, XRDesignRibbonForm).DesignRibbonController.RibbonControl.Items
    Dim commandBarItem As CommandBarItem = TryCast(barItem, CommandBarItem)
    If (commandBarItem IsNot Nothing) AndAlso (commandBarItem.Command = DevExpress.XtraReports.UserDesigner.ReportCommand.OpenFile) Then
        Dim stream As FileStream = File.Open("icons\CustomFileOpen.svg", FileMode.Open)
        barItem.ImageOptions.SvgImage = New DevExpress.Utils.Svg.SvgImage(stream)
    End If

Next barItem
tool.ShowRibbonDesigner()

Refer to the following topics for information on how to add or remove toolbar items:

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 :

C#
VB.NET

csharp

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);
}

Imports DevExpress.XtraReports.UI
Imports DevExpress.XtraPrinting
Imports DevExpress.XtraBars
Imports DevExpress.XtraReports.UserDesigner
Imports DevExpress.XtraReports.UserDesigner.Native
Imports System.Drawing.Design
Imports DevExpress.Utils.Svg

'...

Private tool As New ReportDesignTool(New XtraReport1())
Private tool.DesignForm.DesignMdiController.DesignPanelLoaded += AddressOf DesignMdiController_DesignPanelLoaded
tool.ShowDesigner()

'...

private void DesignMdiController_DesignPanelLoaded(Object sender, DesignerLoadedEventArgs e)
    Dim toolboxService As XRToolboxService = CType(e.DesignerHost.GetService(GetType(IToolboxService)), XRToolboxService)
    Dim svgImage As SvgImage = SvgImage.FromFile("icons\CustomLabel.svg")
    toolboxService.AddToolBoxSvgImage(GetType(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.