Reports for WinForms | ComponentOne
Getting Started with Reports for WinForms / Getting Started with Printing and Previewing / Creating Tables / Creating a Table with Three Columns and Rows / Adding Two Images to Specific Cells of the Table
In This Topic
    Adding Two Images to Specific Cells of the Table
    In This Topic
    Show All
    Hide All

    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:

      To write code in Visual Basic

      Visual Basic
      Copy Code 
      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    
        Next    
    Next

    ' Generate the document.      
    Me.C1PrintDocument1.Body.Children.Add(table)    
    Me.C1PrintDocument1.Generate()   
End Sub

      To write code in C#

      C#
      Copy Code 
      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):

      To write code in Visual Basic

      Visual Basic
      Copy Code 
      ' 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)

      To write code in C#

      C#
      Copy Code 
      // 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:

      To write code in Visual Basic

      Visual Basic
      Copy Code 
      ' Set up image alignment.      
table.CellStyle.ImageAlign.StretchHorz = False    
table.CellStyle.ImageAlign.StretchVert = False    
table.CellStyle.ImageAlign.AlignHorz = C1.C1Preview.ImageAlignHorzEnum.Center

      To write code in C#

      C#
      Copy Code 
      // 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:

      To write code in Visual Basic

      Visual Basic
      Copy Code 
      Dim img1 As C1.C1Preview.RenderImage = New C1.C1Preview.RenderImage(Me.C1PrintDocument1)    
Dim img2 As C1.C1Preview.RenderImage = New C1.C1Preview.RenderImage(Me.C1PrintDocument1)

      To write code in C#

      C#
      Copy Code 
      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:

      To write code in Visual Basic

      Visual Basic
      Copy Code 
      img1.Image = Me.PictureBox1.Image    
img2.Image = Me.PictureBox2.Image

      To write code in C#

      C#
      Copy Code 
      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:

      To write code in Visual Basic

      Visual Basic
      Copy Code 
      table.Cells(1, 1).RenderObject = img1    
table.Cells(1, 2).RenderObject = img2

      To write code in C#

      C#
      Copy Code 
      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: