ComponentOne Preview Classic for WinForms: Preview Classic for WinForms Quick Start > Creating Shapes in C1PrintDocument > Creating an Organizational Chart Diagram Inside a Table

Creating an Organizational Chart Diagram Inside a Table

Creating an organizational chart diagram inside a table demonstrates how to create a hierarchical diagram consisting of boxed texts connected by straight lines. This topic shows how to use the  RenderTable, and C1DocStyle classes. It also shows how to use the  RenderDirectLine and RenderDirectText methods.

1.   Create a new Windows Forms application. Drag and drop a C1PrintPreview control onto your form. Drag and drop a C1PrintDocument component onto your form – it will appear in the components' tray below the form. The preview will have the default name c1PrintPreview1, the document c1PrintDocument1. Set the value of the Document property of c1PrintPreview1 control to c1PrintDocument1, so that the preview will show the document when the application runs. Change C1.C1PrintDocument.Unit.DefaultUnit property from inches to pixels. Double click on the form to create a handler for the Form_Load event. In the event handler, add a call to the GenerateDoc method (which will be created in the next step), that method will do the actual generation.

2.   In the GenerateDoc procedure, create a new C1.C1PrintDocument.RenderTable object and assign it to a variable. Set the page height of the header to 20 pixels, and declare two variables, a and b, to hold the width and height of the page body area. Render the table into the block method.

      Visual Basic

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

    GenerateDoc()

End Sub

 

Private Sub GenerateDoc()

    Me.C1PrintDocument1.PageHeader.Height = 20

    Me.C1PrintDocument1.StartDoc()

    Dim Table1 = New C1.C1PrintDocument.RenderTable(Me.C1PrintDocument1)

    Me.C1PrintDocument1.RenderBlock(Table1)

    Diagram(Table1.ActualContentHeight + Me.C1PrintDocument1.PageHeader.Height + 40)

    Me.C1PrintDocument1.EndDoc()

End Sub

      C#

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

{

    GenerateDoc();

}

private void GenerateDoc()

{

   this.c1PrintDocument1. PageHeader.Height = 20;

   this.c1PrintDocument1.StartDoc();

   C1.C1PrintDocument.RenderTable Table1 = new C1.C1PrintDocument.RenderTable(this.c1PrintDocument1);

   this.c1PrintDocument1.RenderBlock(Table1);

   Diagram(Table1.ActualContentHeight + this.c1PrintDocument1.PageHeader.Height + 40);

   this.c1PrintDocument1.EndDoc();

}

3.   Create a procedure for the diagram. The diagram procedure will create a diagram that consists of several rectangles with text in the center. It will also create vertical and horizontal lines.

      Visual Basic

Private Sub Diagram(ByVal vertpos As Double)

    Dim w0, w1, w2, w3, w4, w5 As Double

    w0 = Me.C1PrintDocument1.BodyAreaSize.Width

    w1 = Me.C1PrintDocument1.BodyAreaSize.Width / 3

    w2 = Me.C1PrintDocument1.BodyAreaSize.Width / 2

    w3 = Me.C1PrintDocument1.BodyAreaSize.Width / 10

    w4 = Me.C1PrintDocument1.BodyAreaSize.Width / 5

    w5 = w4 - w3 / 3

      C#

private void Diagram(Double vertpos)

{

    double w0, w1, w2, w3, w4, w5;

    w0 = this.c1PrintDocument1.BodyAreaSize.Width;

    w1 = this.c1PrintDocument1.BodyAreaSize.Width / 3;

    w2 = this.c1PrintDocument1.BodyAreaSize.Width / 2;

    w3 = this.c1PrintDocument1.BodyAreaSize.Width / 10;

    w4 = this.c1PrintDocument1.BodyAreaSize.Width / 5;

    w5 = w4 - w3 / 3 ;

4.   Set up and create styles for the rectangles. Declare the variable for the new C1DocStyle and add it to the document. In the new style set up a brown border around the rectangular lines. In order to set a border, you need to create a new LineDef for the style. Also, in the new style, TabStyle2, set up the back color, spacing, font, and the text alignment. The code below demonstrates how to do this:

      Visual Basic

    ' Create a style for the rectangles.

    Dim TabStyle2 As New C1.C1PrintDocument.C1DocStyle(Me.C1PrintDocument1)

    TabStyle2.Borders.All = New C1.C1PrintDocument.LineDef(Color.Chocolate, 1)

    TabStyle2.BackColor = Color.PeachPuff

    TabStyle2.Spacing.All = 2

    TabStyle2.Font = New Font("Tahoma", 14)

    TabStyle2.TextAlignHorz = C1.C1PrintDocument.AlignHorzEnum.Center

   TabStyle2.TextAlignVert = C1.C1PrintDocument.AlignVertEnum.Center

      C#

    // Create a style for the rectangles.

    C1DocStyle TabStyle2 = new C1.C1PrintDocument.C1DocStyle(this.c1PrintDocument1);

    TabStyle2.Borders.All = new C1.C1PrintDocument.LineDef(Color.Chocolate, 1);

    TabStyle2.BackColor = Color.PeachPuff;

    TabStyle2.Spacing.All = 2;

    TabStyle2.Font = new Font("Tahoma", 14);

    TabStyle2.TextAlignHorz = C1.C1PrintDocument.AlignHorzEnum.Center;

    TabStyle2.TextAlignVert = C1.C1PrintDocument.AlignVertEnum.Center;

5.   Set up and create styles for the lines. Assign the variable, LineStyle, to the C1DocStyle class. All you need to do is declare the variable as a new C1DocStyle and add it to your document. Assign the LineStyle variable to the LineDef class that is available in C1PrintDocument. The LineDef class will define the line you draw in your document. You can use the ShapeLine property that is available in the C1DocStyle class to get or set the line used to draw shapes. Specify the color and the width point of the line in the LineDef class. The default line and width point are black and .5 points wide, respectively. Use the code below to create a new style for the lines:

      Visual Basic

    Dim LineStyle As New C1.C1PrintDocument.C1DocStyle(Me.C1PrintDocument1)

    LineStyle.ShapeLine = New C1.C1PrintDocument.LineDef(Color.DarkTurquoise, 1)

      C#

    C1DocStyle LineStyle = new C1.C1PrintDocument.C1DocStyle(this.c1PrintDocument1);

    LineStyle.ShapeLine = new C1.C1PrintDocument.LineDef(Color.DarkTurquoise, 1);

6.   Use the RenderDirectText method to create the rectangle with text inside it. We will use the following 6 parameters: w1(x-coordinate of the top left corner of the text box), vertpos(the y coordinate of the top left corner of the text box), text, w1(the width of the rectangle), height(in this example, the height of the rectangle is 40 pixels), and TabStyle2(the style we will use when rendering our rectangles).

      Visual Basic

    Me.C1PrintDocument1.RenderDirectText(w1, vertpos -39, "C1PrintDocument", w1, 40, TabStyle2)

      C#

    this.c1PrintDocument1.RenderDirectText(w1, vertpos -39, "C1PrintDocument", w1, 40, TabStyle2);

7.   Create the vertical line that will begin at the middle of the bottom line of the rectangle and it will be positioned 30 units below the y-axis. Use the RenderDirectLine method from the C1PrintDocument class to render the line. Use the LineStyle variable you created earlier to add the style to the line.

      Visual Basic

    Me.C1PrintDocument1.RenderDirectLine(w2, vertpos, w2, vertpos + 30, LineStyle)

    vertpos = vertpos + 30

    Me.C1PrintDocument1.RenderDirectLine(w3, vertpos, w0 - w3, vertpos, LineStyle)

      C#

    this.c1PrintDocument1.RenderDirectLine(w2, vertpos, w2, vertpos + 30, LineStyle);

    vertpos = vertpos + 30;

    this.c1PrintDocument1.RenderDirectLine(w3, vertpos, w0 - w3, vertpos, LineStyle);

8.   Create a for loop to generate five vertical lines for each of the rectangles that we will be creating. The vertical position of the rectangular objects will appear 29 pixels below the horizontal line (this was the second line we drew in step 7).

      Visual Basic

    Dim i As Integer

 

    ' The for loop generates five vertical lines.

    For i = 0 To 4

        Me.C1PrintDocument1.RenderDirectLine(w3 + i * w4, vertpos, w3 + i * w4, vertpos + 30, LineStyle)

    Next

    vertpos = vertpos + 29

      C#

    // The for loop generates five vertical lines.

    for(int i = 0; i<= 4; ++i)

        this.c1PrintDocument1.RenderDirectLine(w3 + i * w4, vertpos, w3 + i * w4, vertpos + 30, LineStyle);

    vertpos = vertpos + 29;

9.   We will assign a new font style for the text inside the five rectangles that we'll create. The font type is Tahoma and it is 10 points in size. We use the following six parameters for the RenderDirectText method: w3 which is the x coordinate of the top left corner of the text box, vertpos which is the y coordinate, the text within the text box, w5 which is the width of the text box, height of the text box (in this example the height is 40 pixels), and TabStyle2 which is the style used when rendering the line.

      Visual Basic

    TabStyle2.Font = New Font("Tahoma", 10)

    Me.C1PrintDocument1.RenderDirectText(w3 / 6, vertpos, "Key classes", w5, 40, TabStyle2)

    Me.C1PrintDocument1.RenderDirectText(w3 / 6 + w4, vertpos, "Render objects", w5, 40, TabStyle2)

    Me.C1PrintDocument1.RenderDirectText(w3 / 6 + w4 * 2, vertpos, "Table classes", w5, 40, TabStyle2)

    Me.C1PrintDocument1.RenderDirectText(w3 / 6 + w4 * 3, vertpos, "Layout classes", w5, 40, TabStyle2)

    Me.C1PrintDocument1.RenderDirectText(w3 / 6 + w4 * 4, vertpos, "Helper classes", w5, 40, TabStyle2)

End Sub

      C#

    TabStyle2.Font = new Font("Tahoma", 10);

    this.c1PrintDocument1.RenderDirectText(w3 / 6, vertpos, "Key classes", w5, 40, TabStyle2);

    this.c1PrintDocument1.RenderDirectText(w3 / 6 + w4, vertpos, "Render objects", w5, 40, TabStyle2);

    this.c1PrintDocument1.RenderDirectText(w3 / 6 + w4 * 2, vertpos, "Table classes", w5, 40, TabStyle2);

    this.c1PrintDocument1.RenderDirectText(w3 / 6 + w4 * 3, vertpos, "Layout classes", w5, 40, TabStyle2);

    this.c1PrintDocument1.RenderDirectText(w3 / 6 + w4 * 4, vertpos, "Helper classes", w5, 40, TabStyle2);

}

Run the progam and observe the following:

Your diagram should look like the one below at run time.

 


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.