ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Concepts / Page Report/RDL Report Concepts / Layers / Tracing Layers
In This Topic
    Tracing Layers
    In This Topic

    In Page Reports and Rdl reports, you can trace the layout of a pre-printed form to a pixel perfect accuracy using Layers.

    This walkthrough illustrates how you can trace data fields accurately from a scanned image of a boarding pass. These steps show the results on a Page Report but are applicable to Rdl Reports also.

    Note: Right-click and save the image below in your project folder before starting the walkthrough.
    Tracing the Layers

    Tracing the Layers

    The walkthrough is split up into the following activities:

    When you complete this walkthrough you get a layout that looks similar to the following at design time and at run time.

    Design-Time Layout

    Tracing Layers at design time

    Tracing Layers at design time

    Run-Time Layout

    Tracing Layers at run time

    Tracing Layers at run time

    Adding an ActiveReport to a Visual Studio project

    1. In Visual Studio, create a new Windows Forms Application project.
    2. In the Solution Explorer window, right-click Form1, and rename it to MainForm.
    3. From the Project menu, select Add New Item.
    4. In the Add New Item dialog that appears, select ActiveReports 15 Page Report and in the Name field, rename the file to Boarding.
    5. Click the Add button to open a new Page Report in the designer.
    See Basic Concepts for information on adding different report layouts.

    Connecting the report to an XML data source

    1. From the Solution Explorer, open Boarding.rdlx created earlier.
    2. In the Report Explorer, right-click the Data Sources node and select Add Data Source or select Data Source from the Add button dropdown.
      Adding a DataSource
    3. In the Report Data Source Dialog that appears, select the General page and in the Name field, enter a name like CustomDS.
    4. In the Type drop down to select a data provider, choose Xml Provider.
    5. In the connection string section, add the following custom data to your project.
      Copy Code
       XmlData =
      <Flight ID="31">
            <PassengerName>Maria Anders</PassengerName>
      <Tracking>2322- 030-0074321</Tracking>
      <PassengerName>Ana Trujillo</PassengerName>
      <Tracking>2322- 030-0074343</Tracking>
      <PassengerName>Antonio Moreno</PassengerName>
      <Tracking>6722- 034-6784349</Tracking>
      <PassengerName>Christina Berglund</PassengerName>
      <Tracking>5678- 543-6784349</Tracking>
      <PassengerName>Thomas Hardy</PassengerName>
      <Tracking>9834- 413-6784569</Tracking>
    6. Click OK to close the dialog box.

    Adding a dataset

    1. In the Report Explorer, right-click the data source created in the previous step and select Add Data Set or select Data Set option from the Add button dropdown.
    2. In the DataSet Dialog that appears, select the General page and enter the name of the dataset as BoardingData.
    3. On the Query page, select Text under Command Type and enter the following XML path into the Query text box to access the data of each passenger.
    4. On the Fields page, enter the values from the table below to create fields for your report. Values for XML data fields must be a valid XPath expression.
      Field Name Type Value
      Tracking Database Field Tracking
      PassengerName Database Field PassengerName
      Seat Database Field Seat
    5. Click OK to close the dialog. Your data set and queried fields appear as nodes in the Report Explorer.

    See Adding a DataSet for more information on adding dataset to a data source.

    Creating a report layout on different layers

    1. In the LayerList window, click the Add a New Layer button icon to add a new Layer to the report. Notice that a default Layer is already added in the Layer List.
    2. Select Layer1 to make it the Active Layer, and from the Properties window, change the Layer Name to ImgLayer.
    3. In the Layer List window, check the Lock check-box to lock ImgLayer to make sure the image being traced is not modified or changed by mistake.
    4. In the Layer List window,click the Send To Back button to move ImgLayer behind the Default Layer.
    5. In the LayerList window, select Default to make it the Active Layer.
    6. From the Properties window, set the DesignerTransparency of the Default Layer to 0.5 to display the scanned image to be placed on ImgLayer in the background.
    7. From the toolbox, drag a List data region onto the design surface of the report.
    8. In the Properties window of the List data region set the following values.
      Property Name Values
      DataSetName BoardingData
      FixedSize Width: 6.27in
      Height: 3in
      Location Left: 0in
      Top: 0.125in
      Size Width: 6.27in
      Height: 2.87in
    9. In the Report Explorer window, right-click the Embedded Images node and select Add Embedded Image.
    10. In the Open dialog box that appears, browse to the project folder location and select the BoardingPass.jpg image you saved earlier.
    11. Click Open to embed the image in your project.
    12. From the Report Explorer, drag the embedded BoardingPass image onto the List data region and set the properties as described in the following table.
      Property Name Property Value
      LayerName ImgLayer
      Location 0in, 0.125in
      Size 6.27in, 2.875in
    13. From the Report Explorer, drag the following fields onto the List data region and set the following properties.
      Field Name Property Values

      LayerName: Default

      Location: 2.91in, 0.35in

      Size: 1.375in, 0.25in


      LayerName: Default

      Location: 0.15in, 0.9in

      Size: 1.37in, 0.25in


      LayerName: Default

      Location: 4.5in, 0.9in

      Size: 1.25in, 0.25in


      LayerName: Default

      Location: 0.15in, 2.19in

      Size: 1.5in, 0.25in


      LayerName: Default

      Location: 4.5in, 1.45in

      Size: 1in, 0.375in

      Font > FontSize: 22pt

    14. In the Layer List window, select the Default Layer and then the ImgLayer and change their TargetDevice property to Screen from the Properties window. See View, Export or Print Layers for more information.

    Viewing the report


    Go to Top
    See Also