ActiveReports 18 .NET Edition
Developers / Create Designer and Viewer Applications / End User Report Designer in WinForms Application / Use End-User Report Designer API / Customize the Design View
In This Topic
    Customize the Design View
    In This Topic

    Get a currently active tab

    By using Designer.ActiveTabChanged event, you can add a reaction to switching between the Script, Design, and Preview tabs. By using this event, you can get a currently active tab.

    The example code is as follows.

    C#
    Copy Code
    public partial class Form1 : Form
    {
      public Form1()
      {
        InitializeComponent();
        _designer = new Designer() { Dock = DockStyle.Fill };
        _designer.ActiveTabChanged += (sender, args) => {
            //Get the currently editing report name.
            var reportName = designer.Report switch {
                PageReport pageReport => pageReport.Report.Name,
                SectionReport sectionReport => sectionReport.Name,
                _ => "Report"
            };
            //Set the form title to reflect the current designer state
            this.Text = designer.ActiveTab switch {
                DesignerTab.Script => $"{reportName} - Script",
                DesignerTab.Preview => $"{reportName} - Preview",
                _ => $"{reportName} - Edit"
            };
        };
        Controls.Add(designer);
      }
    }
    

    Add or remove a grid on the Designer surface

    The Designer.DrawGrid property adds or removes the grid on the design surface. You can setup this property at the designer initialization or any time later.

    Note: You can control the grid visibility by using the buttons on the Tool Panel. You can deprecate it by using the Designer.ToolPanel property.

    The code example below demonstrates how you can add your own button to switch the grid off.

    Switch off the grid

    C#
    Copy Code
    void Button_OnClick(object sender, EventArgs e)
    {
        _designer.DrawGrid = false;
    }
    

    The code example below demonstrates how you can add your own button to switch the grid on.

    Switch on the grid 

    C#
    Copy Code
    void Button_OnClick(object sender, EventArgs e)
     {
         _designer.DrawGrid = true;
     }
    

    Switch between the grid types

    If the Designer.DrawGrid property is set to True, there are two  possible grid types - Lines or Dots. You can switch between them by using the Designer.GridMode property.

    This code example demonstrates how you can switch to the Dots grid mode.
    Switch on the Dots Grid Mode

    C#
    Copy Code
    _designer.GridMode = GridMode.Dots;
    

    Specify a number of grid dots or lines per unit

    Note: This is for Section Report designer only.

    The Designer.GridX and Designer.GridY properties specify how many dots (or lines) of grid per unit need to be drawn on the design surface. If you specify a similar code as in the example below, you will get the following result.
    Drid dots or lines per unit

    C#
    Copy Code
    _designer.GridX = 8;
    _designer.GridY = 2;
    

    Show or hide the Preview tab

    The Designer.EnablePreview property controls the visibility of the Preview tab on the Tool panel of the design surface.

    Show Preview tab

    C#
    Copy Code
    _designer.EnablePreview = true;
    

     Hide Preview tab

    C#
    Copy Code
    _designer.EnablePreview = false;
    

     

    Show or hide the Script tab

    The Designer.EnableScripting property controls the visibility of the Script tab on the Tool panel of the design surface.

    Show Script tab

    C#
    Copy Code
    _designer.EnableScripting = true;
    

    Hide Script tab

    C#
    Copy Code
    _designer.EnableScripting = false;
    

     

    Change the layout mode of items

    The Designer.LayoutMode property changes the items layout mode and is currently available for Section reports only.

    C#
    Copy Code
    private void ButtonSnapGrid_Click(object sender, EventArgs args)
    {
      _designer.LayoutMode = designer.LayoutMode ^ LayoutMode.SnapGrid;
    }
    private void ButtonSnapLines_Click(object sender, EventArgs args)
    {
      _designer.LayoutMode = designer.LayoutMode ^ LayoutMode.SnapLines;
    }
    

    Lock the position or size of report items

    The Designer.LockControls property makes it impossible to change the position or size of report items.

    The code example below opens the Windows Form with the designer with a pre-built report. You can change some properties of the existing controls but it is impossible to change the report layout.

    C#
    Copy Code
    class TweakSalesReportForm : Form
    {
      public TweakSalesReportForm()
      {
        var _designer = new Designer {Dock = DockStyle.Fill};
        var _propertyGrid = new PropertyGrid(){Dock = DockStyle.Right};
        _designer.LoadReport(new FileInfo("c:\\reports\\Sales.rdlx"));
        _designer.PropertyGrid = propertyGrid;
        _designer.LockControls = false;
        Controls.Add(designer);
        Contorls.Add(propertyGrid);
      }
    }
    

    Deprecate pages in a Page report

    With the Designer.PageReportDesignerActions property, you can deprecate some actions under pages in page reports.

    C#
    Copy Code
    //Deprecate new page creation.
    _designer.PageReportDesignerActions = PageReportDesignerActions.All ^ PageReportDesignerActions.AddPage
    

    Show or hide the Designer, Script, and Preview tabs

    The Designer.ReportTabsVisible property controls the visibility of the Designer, Script, and Preview tabs.

    Show or hide the Designer, Script, and Preview tabs

    C#
    Copy Code
    _designer.ReportTabsVisible = false;
    

     

    Show or hide the Tool panel

    The Designer.ReportTabsPanelVisible property specifies whether the Tool panel is visible.

    C#
    Copy Code
    _designer.ReportTabsPanelVisible = false;
    

    Specify a scrolling mode for the Viewer

    The Designer.ScrollingMode property specifies the scrolling mode for the embedded report Viewer.

    C#
    Copy Code
    _designer.ScrollingMode = ScrollingMode.Paged;
    

    Control the visibility of the Designer tools

    The Designer.ToolPanel property controls the visibility of some items in the Tool panel, which is located next to the Preview tab of the Design surface.

    Designer tools

    The code example below demonstrates how to remove the zoom slider.

    C#
    Copy Code
    _designer.ToolPanel = ToolPanelButton.All ^ ToolPanelButton.ZoomSlider;
    

    The Tool panel includes these items that you can remove:

    Show or hide the data source icon in the Detail section of Section report

    The Designer.ShowDataSourceIcon property is used for Section reports and allows to control the visibility of the data source icon in the Detail section.

    C#
    Copy Code
    public partial class Form1 : Form
    {
      Designer designer;
      public Form1()
      {
        InitializeComponent();
        _designer = new Designer() { Dock = DockStyle.Fill };
        _designer.NewReport(DesignerReportType.Section);
        _designer.ShowDataSourceIcon = false;
      }
    }
    

    Undo the latest operation

    You can call the Designer.Undo() method of the object returned by UndoManager property to undo the latest operation. Just add the button you want and assign the Click event handler like in this sample code.

    C#
    Copy Code
    private void UndoButton_Click(object sender, EventArgs args)
    {
      _designer.UndoManager.Undo();
    }
    

    Redo the undone operation

    To redo the undone operation, you can call the Designer.Redo() method of the object returned by UndoManager property. Just add the button you want and assign the Click event handler like in this sample code.

    C#
    Copy Code
    private void RedoButton_Click(object sender, EventArgs args)
    {
      _designer.UndoManager.Redo();
    }
    

    Specify zoom as scale factor

    The Designer.Zoom property specifies zoom as scale factor.

    C#
    Copy Code
    private void ResetZoom_Click(object sender, EventArgs e)
    {
      _designer.Zoom = 1;
    }
    

    Add the PropertyGrid to the Designer

    You can add the PropertyGrid component that allows you to set the properties of a selected report item.

    Use WinForms Designer

    1. From the ActiveReports 18 Toolbox, drag and drop the Designer component on the form.
    2. Drag and drop the PropertyGrid component from the All Windows Forms Toolbox group onto the surface of your form or the Designer component.
    3. Select the Designer component and from properties pane, set the PropertyGrid property to the name of the PropertyGrid component.

    Use code

    The code example below demonstrates adding the PropertyGrid component using the Designer.PropertyGrid property.

    C#
    Copy Code
    using GrapeCity.ActiveReports.Design;
    using GrapeCity.ActiveReports.Design.ReportExplorer;
    class MyForm : Form
    {
      MyForm()
      {
        var _designer = new Designer() { Dock = DockStyle.Fill };
        var _propertyGrid = new PropertyGrid { Dock = DockStyle.Right };
        _designer.PropertyGrid = _propertyGrid;
        Controls.Add(_designer);
        Controls.Add(_propertyGrid);
      }
    }