Customize Icons

• Aug 18, 2023
• 2 minutes to read

The Document Preview 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 themes and on different DPI settings.

• The Report Designer‘s Ribbon toolbar uses the Office 2019 White 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.

Customize Toolbar Icons

The UpdateAction class allows you to customize properties of a toolbar item (BarButtonItem).

The following example shows how to change the Open toolbar command’s icon in the Document Preview:

XAML

<dxp:DocumentPreviewControl HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top">
    <dxp:DocumentPreviewControl.CommandProvider>
        <dxp:DocumentCommandProvider>
            <dxp:DocumentCommandProvider.RibbonActions>
                <dxb:UpdateAction ElementName="{x:Static dxpbars:DefaultPreviewBarItemNames.Open}" Property="{x:Static dxb:BarItem.LargeGlyphProperty}" Value="{dx:SvgImageSource Uri='CustomFileOpen.svg'}" />
            </dxp:DocumentCommandProvider.RibbonActions>
        </dxp:DocumentCommandProvider>
    </dxp:DocumentPreviewControl.CommandProvider>    
</dxp:DocumentPreviewControl>

The following example shows how to change the Open toolbar command’s icon in the Report Designer:

XAML

<dxrud:ReportDesigner x:Name="designer">
    <dxrud:ReportDesigner.RibbonCustomizationActions>
        <dxdo:UpdateAction ElementName="{x:Static dxrud:DefaultBarItemNames.Open}" Property="{x:Static dxdo:BarItem.LargeGlyphProperty}" Value="{dx:SvgImageSource Uri='CustomFileOpen.svg'}" />
    </dxrud:ReportDesigner.RibbonCustomizationActions>
</dxrud:ReportDesigner>

Refer to the following topic for information on how to add or remove toolbar items: Customize the Report Designer Toolbar.

Customize Control Icons

To customize a control’s icon, call the RegisterControl<T>(ImageSource) typed method where T is the control that should have a customized icon.

The following example shows how to change the Label control’s icon in the Report Designer:

C#

using System.Windows.Media;
using DevExpress.Xpf.Core.Native;
using DevExpress.Xpf.Reports.UserDesigner;
using DevExpress.XtraReports.UI;

//...

public MainWindow() {
    InitializeComponent();
    ImageSource icon = WpfSvgRenderer.CreateImageSource(new Uri(@"CustomLabel.svg"));
    ReportDesigner.RegisterControl<XRLabel>(icon);
}

VB.NET

Imports System.Windows.Media
Imports DevExpress.Xpf.Core.Native
Imports DevExpress.Xpf.Reports.UserDesigner
Imports DevExpress.XtraReports.UI

'...

Public Sub New()
    InitializeComponent()
    Dim icon As ImageSource = WpfSvgRenderer.CreateImageSource(New Uri("CustomLabel.svg"))
    Report

Refer to the following topic for information on how to add a custom control to the Toolbox: Add a Custom Control to the Report Designer Toolbox.