The requested page is not available for the requested platform. You are viewing the content for Default platform.

Add a Custom Control to the Report Designer Toolbox

  • 4 min 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.
using System.ComponentModel;
using System.Drawing;
using DevExpress.Utils.Serializing;
using DevExpress.XtraPrinting;
using DevExpress.XtraReports.UI;

namespace ReportDesigner_AddingCustomControl {
    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)
                this.maxVal = value;

        [DefaultValue(0), Bindable(true), XtraSerializableProperty]
        public float Position {
            get { return this.pos; }
            set {
                if (value < 0 || value > maxVal)
                this.pos = value;
        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),
See Also