# Step 2 of 3: Creating the Template with Elements

## Content



In the previous step you created a WinForms application and added the **C1TileControl** to your project.

To add a panel to your tile with image and text elements, complete the following steps:

### To add a template with elements to the Tile at design time:

1.  Right-click the default **Tile 1** and select **Edit Templates**. The **C1TileControl.Templates Collection Editor** appears.
2.  Click Add to add a new template to Tile1.
3.  Click on the ellipsis button next to **Elements** to open the **Template.Elements Collection Editor**. Select **Add** and click on the dropdown arrow to select the **PanelElement** and then the **TextElement**. This will add elements into the [TemplateCollection](/componentone/docs/win/online-tilecontrol/).
4.  Select PanelElement from the Members list and enter **9** next to the **ChildSpacing** property.
5.  Click on the ellipsis button next to Children so the **PanelElement.Children Collection Editor** appears. Select **Add** and click on the dropdown arrow to select the **ImageElement**. Add 4 **ImageElements** and 3 **TextElements**. This will add elements into the TemplateCollection.<br />![](https://cdn.mescius.io/document-site-files/images/9533f9b7-015c-42ba-9666-c32678ceddaf/imagesext/image12_1.png)
6.  Select the first **[0\] ImageElement** from the **Members** list and set its properties to the following:
    *   **ImageSelector** property to **UnboundSymbol**. This will make the symbol that you select act as an image for the specified Tile.
    *   **Symbol** property to **LeftToRight**. This will make the LeftToRight image appear on the specified Tile.
    *   **SymbolSize** property to **Image64x64**. This will change the default symbol size from **32x32** to **64x64**
    *   **FixedHeight** to **70**. This will set the height of the contents in the panel to 70 pixels.
7.  Select the second **[1\]ImageElement** from the **Members** list and set its properties to the following:
    *   **ForeColor** property to **255, 192, 255**
    *   **ForeColorSelector** property to **Unbound**
    *   **ImageSelector** property to **UnboundSymbol**
    *   **Symbol** property to **CircleWithPlus**
8.  Select the third **[2\]ImageElement** from the **Members** list and set its properties to the following:
    *   **ForeColor** property to **255, 192, 255**
    *   **ForeColorSelector** property to **Unbound**
    *   **ImageSelector** property to **UnboundSymbol**
    *   **Symbol** property to **CircleWithMinus**
    *   **Alignment** property to **TopCenter**. This will align the symbol to the TopCenter of the Panel.
9.  Select the fourth **[3\]ImageElement** from the **Members** list and set its properties to the following:
    *   **ForeColor** property to **255, 224, 192**
    *   **ForeColorSelector** property to **Unbound**
    *   **ImageSelector** property to **UnboundSymbol**
    *   **Symbol** property to **CircleWithMultiply**
    *   **Alignment** property to **BottomCenter**
10.  Select the fifth **[4\]TextElement** from the **Members** list and set its properties to the following:
    *   **ForeColor** property to **192, 192, 255**
    *   **ForeColorSelector** property to **Unbound**
    *   **Text** property to **Top**
    *   **TextSelector** to **Unbound**
    *   **Alignment** to **TopCenter**
11.  Select the sixth **[5\]TextElement** from the **Members** list and set its properties to the following:
    *   **BackColorSelector** property to **Unbound**
    *   **ForeColor** property to **255**, **224, 192**
    *   **ForeColorSelector** property to **Unbound**
    *   **Text** property to **Bottom**
    *   **TextSelector** property to **Unbound**. This will make the new text Bottom appear rather than the default text.
    *   **Alignment** property to **BottomCenter**
    *   **DirectionVertical** property to **True**
12.  Select the seventh **[6\]TextElement** from the **Members** list and set its properties to the following:
    *   **BackColorSelector** property to **Unbound**
    *   **ForeColor** property to **255**, **192**, **255**
    *   **ForeColorSelector** property to **Unbound**
    *   **Text** property to **Middle**
    *   **TextSelector** property to **Unbound**
13.  Click **OK** to save and close the **PanelElement.Children Collection Editor**
14.  In the **Template.Elements Collection Editor** select the [1\] TextElement from the Members list.
15.  Select the second **[1\]TextElement** from the **Members** list and set its properties to the following:
    *   **Alignment** property to **BottomCenter**
    *   **Margin** property to **0, 0, 0, 5**
16.  Click **OK** to save and close the **Template.Elements Collection Editor**
17.  Click **OK** to save and close the **C1TileControl.Templates Collection Editor**

### Run and observe the following:

Tile1 will appear the same since the template that we created, Template1, has not been applied to the Tiles **Template** property.

In the next step you will learn how to assign the new template to the specified tile as well as modify a few of the Tiles properties using the **C1TileControl Tasks** menu.