# Step 2 of 3: Adding Tiles to the Application

## Content



In the previous step you created a WPF application; in this step you'll add **Tiles for WPF and Silverlight** controls. Complete the following steps:

1.  Place your cursor between the `<ListBox.Items></ListBox.Items>` tags, navigate to the Toolbox, and double-click the [C1Tile](/componentone/api/wpf/online-tiles/dotnet-framework-api/C1.WPF.Tile.4.6.2/C1.WPF.Tile.C1Tile.html) control to add it to the page.
2.  Update the **C1Tile** markup so it looks like the following:
    
    ```xml
    <c1:C1Tile Content="1" Header="C1Tile" HeaderPadding="12" Padding="0" HeaderBackground="#22000000" HorizontalHeaderAlignment="Stretch" />
    ```
    
    This markup adds header and content text, adds padding, changes the color of the header background, and the alignment of the header.
    
3.  Add the following markup just below the **C1Tile** markup:
    
    ```xml
    <c1:C1SlideTile Content="2" HeaderPadding="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" Header="C1SlideTile">
        <c1:C1Tile.ContentTemplate>
            <DataTemplate>
                <Border Background="#FFBC1C48" >
                    <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </Border>
            </DataTemplate>
        </c1:C1Tile.ContentTemplate>
        <c1:C1Tile.BackContentTemplate>
            <DataTemplate>
                <Border Background="#FF028541" >
                    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                        <TextBlock Text="{Binding}" Foreground="White" HorizontalAlignment="Center"/>
                        <TextBlock Text="Back Content Template" Margin="0 -10 0 0" FontSize="12" Foreground="White"  HorizontalAlignment="Center"/>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </c1:C1Tile.BackContentTemplate>
    </c1:C1SlideTile>
    ```
    
    Note that this markup adds a [C1SlideTile](/componentone/api/wpf/online-tiles/dotnet-framework-api/C1.WPF.Tile.4.6.2/C1.WPF.Tile.C1SlideTile.html) control with a **ContentTemplate** and a **BackContentTemplate**. The **ContentTemplate** determines the initial content and appearance of the control. The **BackContentTemplate** determines the content and appearance of the control once it transitions (in the case of the **C1SlideTile** control, it slides from one template to the other).
    
4.  Add the following markup just below the **C1SlideTile** markup:
    
    ```xml
    <c1:C1SlideTile Content="3" BackContent="Back Content 3" FontSize="36" Header="C1SlideTile" HeaderPadding="12" Padding="0"/>
    <c1:C1SlideTile Content="4" Header="C1SlideTile, SlideDirection = Right" HeaderPadding="12" Padding="0" SlideDirection="Right" HorizontalHeaderAlignment="Right"/>
    <c1:C1SlideTile Content="5" Header="C1SlideTile" />
    ```
    
    This markup adds additional **C1SlideTile** controls.
    

In this step you added **Tiles for WPF and Silverlight** controls to your application. In the next step you'll run the application so see how the application appears at run time.

## See Also

[Step 3 of 3: Running the Tiles Application](/componentone/docs/wpf/online-tiles/C1TilesQuickStart/Step3)