#### Step 1: Create a Header

In this step you will create a header that will display the report type, the operator name, the part name, and a company image.

1. Before you begin, use the Properties Pane and ensure that the template's mainCanvas is set to a PageOrientation of Portrait.

2. Click the GridControl icon from the Controls toolbar on the left side of the canvas. Position it at the top left of the margin lines. Its properties appear in the Properties Pane.

3. Set these properties to position and size the control. Set Left to 30, Top to 30, Width to 350.00 and Height to 100.00.

4. Define two columns. Click the ... button for ColumnDefinitions property. From the Collection Editor dialog box, click Add Item twice. This will add two columns shown as [1]ColumnDefinition and [2]ColumnDefinition into the dialog box and into the control.

Collection Editor showing the two added columns

5. Click Close to close the Collection Editor.

6. Define two rows. Click the ... button for RowDefinitions property. From the Collection Editor dialog box, click Add Item twice. This will add two rows shown as [1]RowDefinition and [2]RowDefinition into the dialog box and into the control.

7. Click Close to close the Collection Editor. The control now has three columns and three rows.

8. Select the GridControl0 on the canvas and double-click on it to activate the control.

GridControl activated

9. Click on the top cell in the left-most column and type, "Report Type:".

10. Click on the middle cell in the left-most column and type, "Part Name:".

11. Click on the bottom cell in the left-most column and type, "Operator:".

12. Select the entire left-most column and right-click on it. The Grid Property dialog box appears.

13. Click Background Color and choose a light-green color (#FFF4FDF6) and then click OK.

14. Click the Font button:

15. Using the Font Chooser, change the Font to Arial, the Font weight to Bold, and Font size to 18.

16. Click OK to close the Font Chooser.

17. Now delete the right-most column, since we won't be needing that. Click on the ... button for ColumnDefinitions, and select [2]ColumnDefinitions and click Delete Item and then Close.

18. Change the thickness of the inside grid lines. Set InsideFrame to Thick. The GridControl should look like this:

Final Gridcontrol

19. Now we're going to add a company logo to our header. Click the ImageControl icon and drag a box to the right of the GridControl on the canvas. Drag the image control so that its left edge touches the right edge of the grid control. Expand the right edge so that it reaches the edge of the canvas.

20. Click and select GridControl0. Then hold down the CTRL key, and click on ImageControl0 so that they're both selected. The ImageControl0 should be selected second.

21. Click the Same Height icon from the main toolbar. If working with only two objects, this makes the last selected object the same height as the first selected object. So, your image control should now be the same height as your grid control.

22. Click the Align Bottom icon from the main toolbar. This aligns the bottom edges of the two controls.

23. Now using the ... button for the image control's Source property, choose an image of your choice for your logo.

24. Next we're going to add a border around ImageControl0 on the main canvas. Click the RectangleControl icon and drag a box around the image control. Drag the edges so that it lines up with GrildControl0 and surrounds the image.

25. Change BorderThickness to 1.50,1.50,1.50,1.50. This increases the border thickness by 50% for each of the four sides on the rectangle control.

26. Use drop down list next to the BorderBrush property and set the border color to black.

Your header structure is now done and should look something like this:

A Finished Header

In this step you have added three different controls and have modified properties for each to create your template's header structure. In the process you have learned some basics about adding controls and modifying properties.

In the next step you will learn how to add expressions onto your template.

Next Step