ComponentOne TileControl for WinForms
Data Binding Overview / Databinding Tutorial - Creating a Complex Databound TileControl / Step 7 of 8: Modifying C1TileControl’s Default Template
In This Topic
    Step 7 of 8: Modifying C1TileControl’s Default Template
    In This Topic

    In this step you will modify the default template for the C1TileControl.

    1.  In the Solution Explorer right-click on the project name and select Add New Folder.
    2. Copy the flags.png from the Databound sample project located in C:\Users\username\Documents\ComponentOne Samples\WinForms Edition\C1TileControl\Samples\Resources to your local project.
    3.  Rename the folder Resources and add the flags.png image from the folder.
    4.   In the Solution Explorer click on the Show All Files button.
    5. Right-click on the Resources folder and select the image and select Include In Project.
    6. In C1TileControl’s Properties Window expand the DefaultTemplate node and click on the ellipsis button next to the Templates property.
    7. Click on the ellipsis button next to the Elements property. The Template.Elements Collection Editor appears.
    8. Click on the ellipsis button next to the Children property.
    9. Remove the ImageElement from the Members list.
    10. Select the TextElement from the Members list and set its FontBold to True.
    11. Click OK to save and close the PanelElement.Children Collection Editor.
    12. Click on the dropdown arrow next to the Add item and select TextElement.
    13. Select the TextElement and set the ForeColorSelector to Unbound.
    14. Set the ForeColor to 255, 192, 192.
    15. Set the TextSelector to Text1 and Alignment to BottomLeft.
    16. This will set the text for each country name to appear bottom left of each Tile.
    17.  In the Template.Elements Collection Editor click on the dropdown arrow next to the Add button and select ImageElement.
    18. Click on the ellipsis button next to Image. The Select Resource dialog box appears.
    19. Click on the Import button and browse to the Resources folder in your project and select the flags.png.

     

     

    1. Click OK to save and close the Select Resource dialog box.
    2.  In the Template.Elements Collection Editor set the ImageSelector to Unbound.
    3. Set the ImageRows to 17 and Alignment to BottomRight.
    4. Click OK to save and close the Template.Elements Collection Editor.