Customize the Properties Window in the Report Designer

• Mar 29, 2021
• 2 minutes to read

This topic describes how to customize the Property Window’s tabbed view in the End-User Report Designer.

Tip

Online Example: How to customize the Properties Window in the WPF End-User Report Designer

Move a Property to Another Tab

Handle the static XtraReport.FilterComponentProperties event to access a property and apply the PropertyGridTab attribute to it. Pass the name of the property’s target tab as the attribute’s constructor parameter.

The following code snippet demonstrates how to move the PaperKind property to the Appearance tab.

C#

using System;
using System.Windows;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using DevExpress.XtraReports.Localization;
using DevExpress.XtraReports.UI;
using DevExpress.XtraReports.UserDesigner;
// ...

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();
        XtraReport.FilterComponentProperties += XtraReport_FilterComponentProperties;
        designer.OpenDocument(new XtraReport());
    }

    void XtraReport_FilterComponentProperties(object sender, FilterComponentPropertiesEventArgs e) {
        var paperKindDescriptor = e.Properties["PaperKind"] as PropertyDescriptor;
        if(paperKindDescriptor != null) {
            var attributes = new List<Attribute>(paperKindDescriptor.Attributes.Cast<Attribute>().Where(att => !(att is PropertyGridTabAttribute)));
            attributes.Add(new PropertyGridTabAttribute(ReportStringId.UD_PropertyGrid_TabAppearance));
            e.Properties["PaperKind"] = TypeDescriptor.CreateProperty(
                paperKindDescriptor.ComponentType,
                paperKindDescriptor,
                attributes.ToArray());
        }
    }
}

If you pass a new tab name as the PropertyGridTab attribute’s constructor parameter and apply this attribute to a property, the Properties Window creates the new tab and adds this property to it. The following code snippet demonstrates this:

C#

using DevExpress.XtraReports.UI;
using DevExpress.XtraReports.UserDesigner;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Windows;

namespace CustomizePropertyGridCategories {
    public partial class MainWindow : Window {

        public MainWindow() {
            InitializeComponent();
            XtraReport.FilterComponentProperties += XtraReport_FilterComponentProperties;
            designer.OpenDocument(new XtraReport());
        }

        void XtraReport_FilterComponentProperties(object sender, FilterComponentPropertiesEventArgs e) {
            var paperKindDescriptor = e.Properties["PaperKind"] as PropertyDescriptor;
            if(paperKindDescriptor != null) {
                var attributes = new List<Attribute>(paperKindDescriptor.Attributes.Cast<Attribute>().Where(att => !(att is PropertyGridTabAttribute)));
                attributes.Add(new PropertyGridTabAttribute("My tab"));
                e.Properties["PaperKind"] = TypeDescriptor.CreateProperty(
                    paperKindDescriptor.ComponentType,
                    paperKindDescriptor,
                    attributes.ToArray());
            }
        }
    }
}

Provide a Custom Tab Icon

Open the App.xaml file and specify your custom icons in the Application.Resources section.

The code snippet below demonstrates how to provide an icon for the My tab tab and replace the icon for the Appearance tab.

XAML

<Application x:Class="CustomizePropertyGridCategories.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
             xmlns:dxrudt="http://schemas.devexpress.com/winfx/2008/xaml/reports/userdesigner/themekeys"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <dx:SvgImageSource x:Key="{dxrudt:PropertyGridCategoryIconThemeKey 'My tab'}"
                            Uri="Images/MyTab.svg" />
        <dx:SvgImageSource x:Key="{dxrudt:PropertyGridCategoryIconThemeKey {x:Static dxrudt:DefaultPropertyGridCategoryNames.Appearance}}"
                            Uri="Images/Appearance.svg" />
    </Application.Resources>
</Application>