# Alternating the Text View by a Timer

## Content

To alternate the text view by a timer, complete the following:

### Add the First Template

1. Right-click the Tile control and select **Edit Templates**. The **C1TileControl.Templates Collection Editor** appears.
2. Click **Add** twice to add two templates to the [C1TileControl](/componentone/docs/win/online-tilecontrol/).
3. Select **template1** and click on th ellipsis button next to the **Elements collection**. The **Template.Elements** collection editor appears.
4. Select the **PanelElement** from the **Add** dropdown listbox.
    ![](https://cdn.mescius.io/document-site-files/images/9533f9b7-015c-42ba-9666-c32678ceddaf/imagesext/image9_5.png)
5. Set the PanelElements properties to the following:
    * Alignment property to **TopLeft**.
    * ChildSpacing property to **0**. This will decrease the default spacing between the child elements from 5 pixels to 0 pixels.
    * Orientation property to **Vertical**.
6. Click on the ellipsis button next to the **Children** property.
7. Add two **TextElements** to the **PanelElement**.
8. Select the second text element, **[1] TextElement** and set its **TextSelector** property to **Text1**. This will assign the value of the Text1 property to this template.
9. Click **OK** to save and close the **PanelElement.Children Collection Editor** and click **OK** to save and close the **Template.Elements Collection Editor**.

### Add the Second Template

10. Select **template2** in the **C1TileControl.Templates Collection Editor**.
11. Click on the Ellipsis button next to the **Elements Collection**. The **Template.Elements Collection Editor** appears.
12. Click the dropdown arrow next to the **Add** button to add a **PanelElement**.
13. Set the **[0]Panel Element** properties to the following:
    * Alignment property to **TopLeft**.
    * ChildSpacing property to **0**.
    * Orientation property to **Vertical**.
14. Click the ellipsis button next to the **Children (Collection)** property and add two **TextElements**.
15. Select the first text element, **[0] TextElement** and set its **TextSelector** property to **Text1**.
16. Select the second text element, **[1] TextElement** and set its **TextSelector** property to **Text2**.
17. Click **OK** to save and close the **PanelElement.Children Collection Editor** and click **OK** to save and close the **Template.Elements Collection Editor**.
18. Right-click on Tile1 and select **Edit Groups**. The **C1TileControl.Groups Collection Editor appears**.
19. Click on the ellipsis button next to the **Tiles Collection**.
20. Select tile1 and set its properties to the following:
    * Template property to template1. The settings for template1 are applied to Tile1.
    * Text1property to **Detailed description of the Tile**.
    * Text2 property to **More information and details of the Tile behavior.**
21. Click **OK** to save and close the **Group.Tiles Collection Editor**.

Tile1 should appear like the following:

<br>
![](https://cdn.mescius.io/document-site-files/images/9533f9b7-015c-42ba-9666-c32678ceddaf/imagesext/image9_6.png)

### Add a Timer to alternate the template views for Tile1.

22. Double-click on the WindowsForm **Timer** control to add it to your component tray.
23. Set the timer1 **Interval** property to **3000** and the **Enabled** property **True**.
24. Right-click on the TileControl and select **View Code**.
25. Add the following code to your project to create an animation that alternates the text views of each template:
    To write code in Visual Basic

```vbnet
Public Partial Class Form1
   Inherits Form
   Private _tile1Flipped As Boolean
 
   Public Sub New()
          InitializeComponent()
   End Sub
 
   Private Sub timer1_Tick(sender As Object, e As EventArgs)
          Dim a As Boolean = _tile1Flipped
          tile1.Template = If(a, template1, template2)
          _tile1Flipped = Not a
   End Sub
End Class
```

To write code in C#

```csharp
public partial class Form1 : Form
    {
        bool _tile1Flipped;
 
        public Form1()
        {
            InitializeComponent();
        }
 
        private void timer1_Tick(object sender, EventArgs e)
        {
            bool a = _tile1Flipped;
            tile1.Template = a ? template1 : template2;
            _tile1Flipped = !a;
        }
    }
```

26. In **Design view**, assign the **timer\_Tick** event handler to **timer1**.
    ![](https://cdn.mescius.io/document-site-files/images/9533f9b7-015c-42ba-9666-c32678ceddaf/imagesext/image9_7.png)

![](https://developer.mescius.com/componentone/docs/win/online-tilecontrol/ImagesExt/image9_2.png)**This topic illustrates the following:**
The Tile alternates templates based upon a timer. The first template is displayed for a few seconds and then the second template for the tile appears in place of the first.
![](https://developer.mescius.com/componentone/docs/win/online-tilecontrol/ImagesExt/image9_8.png)