Add a Custom Control to the Report Designer Toolbox

• Aug 10, 2018
• 4 minutes to read

In specific cases, you need to expand a set of standard report controls available in the Report Designer‘s Toolbox with a custom one. This document demonstrates how to create a custom control and register it in the toolbox.

To add a custom control to the Designer’s toolbox, do the following.

1. Create a new WPF application with the Report Designer or open an existing application.

2. Create a new custom control by deriving it from an existing report control or from the base XRControl class. To serialize the custom control’s properties, mark them with the XtraSerializableProperty attribute. This example demonstrates how to create and use the custom Progress Bar control.

   For more information and examples on creating custom controls, see the Create Custom Controls, Create a Custom Progress Bar Control and Create a Custom Numeric Label documents.

3. To provide a custom control icon that will be displayed in the Report Designer’s toolbox, create the required image file (32x32 pixels) and add it to the project (e.g., the progress.png file in this example).
4. Register the created custom control in the Report Designer’s toolbox using the ReportDesigner.RegisterControl<T> method. Pass a function returning an appropriate diagram item to the method as the first parameter. Obtain the control icon and pass it as the second method parameter.

Tip

Online Example: WPF End-User Report Designer - How to register a custom control in the Designer’s toolbox

XRProgressBar.cs

using System.ComponentModel;
using System.Drawing;
using DevExpress.Utils.Serializing;
using DevExpress.XtraPrinting;
using DevExpress.XtraReports.UI;

namespace ReportDesigner_AddingCustomControl {
    [ToolboxItem(true)]
    public class XRProgressBar : XRControl {
        private float pos = 0;
        private float maxVal = 100;

        [DefaultValue(100), XtraSerializableProperty]
        public float MaxValue {
            get { return this.maxVal; }
            set {
                if (value <= 0)
                    return;
                this.maxVal = value;
            }
        }

        [DefaultValue(0), Bindable(true), XtraSerializableProperty]
        public float Position {
            get { return this.pos; }
            set {
                if (value < 0 || value > maxVal)
                    return;
                this.pos = value;
            }
        }
        [Browsable(false)]
        public override string Text {
            get { return base.Text; }
            set { base.Text = value; }
        }

        public XRProgressBar() {
            this.ForeColor = SystemColors.Highlight;
        }

        protected override VisualBrick CreateBrick(VisualBrick[] childrenBricks) {
            return new PanelBrick(this);
        }

        protected override void PutStateToBrick(VisualBrick brick, PrintingSystemBase ps) {
            base.PutStateToBrick(brick, ps);
            PanelBrick panel = (PanelBrick)brick;
            VisualBrick progressBar = new VisualBrick(this);
            progressBar.Sides = BorderSide.None;
            progressBar.BackColor = panel.Style.ForeColor;
            progressBar.Rect = new RectangleF(0, 0, panel.Rect.Width * (Position / MaxValue),
                panel.Rect.Height);
            panel.Bricks.Add(progressBar);
        }
    }
}

MainWindow.xaml

<Window xmlns:dxrud="http://schemas.devexpress.com/winfx/2008/xaml/reports/userdesigner"  x:Class="ReportDesigner_AddingCustomControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
    <dxrud:ReportDesigner x:Name="reportDesigner"/>
</Window>

MainWindow.xaml.cs

using System.Windows;
using System.Windows.Media.Imaging;
using DevExpress.Utils;
using DevExpress.Xpf.Reports.UserDesigner;
using DevExpress.Xpf.Reports.UserDesigner.XRDiagram;
using DevExpress.XtraReports.UI;
// ...

namespace ReportDesigner_AddingCustomControl {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();

            var icon = BitmapFrame.Create(AssemblyHelper.GetResourceUri(GetType().Assembly, "progress.png"));
            ReportDesigner.RegisterControl<XRProgressBar>(() => new DefaultXRControlDiagramItem(), icon);
        }

        private void Window_Loaded(object sender, RoutedEventArgs e) {
            reportDesigner.OpenDocument(new XtraReport());
        }
    }
}

MainWindow.xaml.vb

Imports System.Windows
Imports System.Windows.Media.Imaging
Imports DevExpress.Utils
Imports DevExpress.Xpf.Reports.UserDesigner
Imports DevExpress.Xpf.Reports.UserDesigner.XRDiagram
Imports DevExpress.XtraReports.UI
' ...

Namespace ReportDesigner_AddingCustomControl
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()

            Dim icon_Renamed = BitmapFrame.Create(AssemblyHelper.GetResourceUri(Me.GetType().Assembly, "progress.png"))
            DevExpress.Xpf.Reports.UserDesigner.ReportDesigner.RegisterControl(Of XRProgressBar)(Function() New DefaultXRControlDiagramItem(), icon_Renamed)
        End Sub

        Private Sub Window_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
            reportDesigner.OpenDocument(New XtraReport())
        End Sub
    End Class
End Namespace

XRProgressBar.vb

Imports System.ComponentModel
Imports System.Drawing
Imports DevExpress.Utils.Serializing
Imports DevExpress.XtraPrinting
Imports DevExpress.XtraReports.UI

Namespace ReportDesigner_AddingCustomControl
    <ToolboxItem(True)> _
    Public Class XRProgressBar
        Inherits XRControl

        Private pos As Single = 0
        Private maxVal As Single = 100

        <DefaultValue(100), XtraSerializableProperty> _
        Public Property MaxValue() As Single
            Get
                Return Me.maxVal
            End Get
            Set(ByVal value As Single)
                If value <= 0 Then
                    Return
                End If
                Me.maxVal = value
            End Set
        End Property

        <DefaultValue(0), Bindable(True), XtraSerializableProperty> _
        Public Property Position() As Single
            Get
                Return Me.pos
            End Get
            Set(ByVal value As Single)
                If value < 0 OrElse value > maxVal Then
                    Return
                End If
                Me.pos = value
            End Set
        End Property
        <Browsable(False)> _
        Public Overrides Property Text() As String
            Get
                Return MyBase.Text
            End Get
            Set(ByVal value As String)
                MyBase.Text = value
            End Set
        End Property

        Public Sub New()
            Me.ForeColor = SystemColors.Highlight
        End Sub

        Protected Overrides Function CreateBrick(ByVal childrenBricks() As VisualBrick) As VisualBrick
            Return New PanelBrick(Me)
        End Function

        Protected Overrides Sub PutStateToBrick(ByVal brick As VisualBrick, ByVal ps As PrintingSystemBase)
            MyBase.PutStateToBrick(brick, ps)
            Dim panel As PanelBrick = CType(brick, PanelBrick)
            Dim progressBar As New VisualBrick(Me)
            progressBar.Sides = BorderSide.None
            progressBar.BackColor = panel.Style.ForeColor
            progressBar.Rect = New RectangleF(0, 0, panel.Rect.Width * (Position / MaxValue), panel.Rect.Height)
            panel.Bricks.Add(progressBar)
        End Sub
    End Class
End Namespace