Adding Two Images to Specific Cells of the Table

ComponentOne Reports for WinForms Designer Edition: ComponentOne Reports for WinForms > Getting Started with Printing and Previewing > C1PrintDocument Quick Start > Creating Tables > Creating a Table with Three Columns and Rows > Adding Two Images to Specific Cells of the Table

This topic demonstrates how to add two different images to specific cells in an existing table by using the RenderImage class. It also shows how to align images in cells using the ImageAlignHorzEnum. Note that the sample below uses the empty 3 by 3 table which was built in Creating a Table with Three Columns and Rows and that you'll need to have two GIF or JPEG images on hand to complete the steps in this topic. Complete the following steps:

1. The following code should already exist in your source file:

• Visual Basic

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

' Make a table.

    Dim table As C1.C1Preview.RenderTable = New C1.C1Preview.RenderTable(Me.C1PrintDocument1)

    table.Style.GridLines.All = New C1.C1Preview.LineDef(Color.DarkGray)

    Dim r As Integer = 3

    Dim c As Integer = 3

Dim row As Integer

Dim col As Integer

    For row = 0 To r - 1 Step +1

For col = 0 To c - 1 Step +1

            Dim celltext As C1.C1Preview.RenderText = New C1.C1Preview.RenderText(Me.C1PrintDocument1)

' Add empty cells.

            celltext.Text = String.Format("", row, col)

            table.Cells(row, col).RenderObject = celltext

' Generate the document.

    Me.C1PrintDocument1.Body.Children.Add(table)

    Me.C1PrintDocument1.Generate()

End Sub

• C#

private void Form1_Load(object sender, System.EventArgs e)

// Make a table.

    C1.C1Preview.RenderTable table = new C1.C1Preview.RenderTable(this.c1PrintDocument1);

    table.Style.GridLines.All = new C1.C1Preview.LineDef(Color.DarkGray);

    const int r = 3;

    const int c = 3;

    for (int row = 0; row < r; ++row)

        for (int col = 0; col < c; ++col)

            C1.C1Preview.RenderText celltext = new C1.C1Preview.RenderText(this.c1PrintDocument1);

            celltext.Text = string.Format("", row, col);

// Add empty cells.

            table.Cells[row, col].RenderObject = celltext;

// Generate the document.

    this.c1PrintDocument1.Body.Children.Add(table);

    this.c1PrintDocument1.Generate();

2. Add the following code after the line adding the rows (the new code will fix the center cell's size in the table):

• Visual Basic

' Fix the center cell's size.

table.Rows(1).Height = New C1.C1Preview.Unit(5, C1.C1Preview.UnitTypeEnum.Cm)

table.Cols(1).Width = New C1.C1Preview.Unit(8, C1.C1Preview.UnitTypeEnum.Cm)

• C#

// Fix the center cell's size.

table.Rows[1].Height = new C1.C1Preview.Unit(5, C1.C1Preview.UnitTypeEnum.Cm);

table.Cols[1].Width = new C1.C1Preview.Unit(8, C1.C1Preview.UnitTypeEnum.Cm);

3. Create two JPEG or GIF images or use images that already exist.

4. Add two PictureBox controls onto your form. Set their Image properties to the two images created in the previous step. Also, make the two picture boxes invisible (set Visible to False) so that they won't clutter the form (those controls are used only as storage for the images. The images will be rendered into the C1PrintDocument).

5. Use the TableCell.CellStyle property to modify the base styles for the cells' content. In this sample we will modify the ImageAlign property for the cells. Enter the following code to set up the image alignment:

• Visual Basic

' Set up image alignment.

table.CellStyle.ImageAlign.StretchHorz = False

table.CellStyle.ImageAlign.StretchVert = False

table.CellStyle.ImageAlign.AlignHorz = C1.C1Preview.ImageAlignHorzEnum.Center

• C#

// Set up image alignment.

table.CellStyle.ImageAlign.StretchHorz = false;

table.CellStyle.ImageAlign.StretchVert = false;

table.CellStyle.ImageAlign.AlignHorz = C1.C1Preview.ImageAlignHorzEnum.Center;

6. In C1PrintDocument, images are rendered using the RenderImage class (which subclasses the RenderObject). Create two new RenderImage objects for the two images as follows:

• Visual Basic

Dim img1 As C1.C1Preview.RenderImage = New C1.C1Preview.RenderImage(Me.C1PrintDocument1)

Dim img2 As C1.C1Preview.RenderImage = New C1.C1Preview.RenderImage(Me.C1PrintDocument1)

• C#

C1.C1Preview.RenderImage img1 = new C1.C1Preview.RenderImage(this.c1PrintDocument1);

C1.C1Preview.RenderImage img2 = new C1.C1Preview.RenderImage(this.c1PrintDocument1);

7. Now, set the RenderImage's Image properties to the images stored in the picture boxes:

• Visual Basic

img1.Image = Me.PictureBox1.Image

img2.Image = Me.PictureBox2.Image

• C#

img1.Image = this.pictureBox1.Image;

img2.Image = this.pictureBox2.Image;

8. Assign the RenderImage objects to the RenderObject properties of the cells so that the images will render in those cells:

• Visual Basic

table.Cells(1, 1).RenderObject = img1

table.Cells(1, 2).RenderObject = img2

• C#

table.Cells[1, 1].RenderObject = img1;

table.Cells[1, 2].RenderObject = img2;

Note: The top left cell of the table is at row 0, column 0.

Run the program and observe the following:

Your table should look similar to the table below: