# Step 1 of 3: Setting up the Tiles Application

## Content



In this step you'll begin in Visual Studio to create an application using **Tiles for WPF and Silverlight**. In this step you'll create an application and add a **C1TileListBox** to contain the **C1Tiles** controls. To begin, complete the following steps:

1.  In Visual Studio, select **File | New | Project**.
2.  In the **New Project** dialog box, expand a language in the left pane, under the language select **Windows**, and in the templates list select **WPF Application** or **Silverlight Application**. Enter a **Name** and click **OK** to create your project. The MainPage.xaml page will open.
3.  Right-click the project in the Solution Explorer window and select **Add Reference**.
4.  In the **Add Reference** dialog box, locate and select the **C1.WPF.dll** or **C1.Silverlight.dll** and **C1.WPF.Tile.dll** or **C1.Silverlight.Tile.dll** assemblies and click **OK** to add references to your project.
5.  Add the XAML namespace to the Window (WPF) or UserControl (Silverlight) tag with the following markup:
    
    `xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"`
    
    This is a unified namespace that will enable you to work with most **ComponentOne WPF and Silverlight** controls without adding multiple namespaces. The Window or UserControl tag will now appear similar to the following:
    
    ```WPF
    <Window xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1WPFTileCS022813.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">
    ```
    
    ```SILVERLIGHT
    <UserControl xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1WPFTileCS022813.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">
    ```
    
6.  Add the following markup just after the `<Window>` tag and before the `<Grid>` tag:
    
    ```WPF
    <Window.Resources>
        <Style x:Key="listBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="c1:C1TileService.PointerDownAnimation" Value="True"/>
                <Setter Property="Padding" Value="5" />
        </Style>
        <Style TargetType="c1:C1Tile" x:Key="baseTileStyle">
            <Setter Property="Background" Value="#FFC410" />
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="80"/>
            <Setter Property="HeaderForeground" Value="White"/>
            <Setter Property="HeaderFontSize" Value="12"/>
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Width" Value="280" />
            <Setter Property="Height" Value="200" />
        </Style>
        <Style TargetType="c1:C1Tile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
        <Style TargetType="c1:C1SlideTile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
    </Window.Resources>
    ```
    
    ```SILVERLIGHT
    <UserControl.Resources>
            <Style x:Key="listBoxItemStyle" TargetType="c1:C1ListBoxItem">
                <Setter Property="c1:C1TileService.PointerDownAnimation" Value="True"/>
            </Style>
            <Style TargetType="c1:C1Tile" x:Key="baseTileStyle">
                <Setter Property="Background" Value="#FFC410" />
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="FontSize" Value="80"/>
                <Setter Property="HeaderForeground" Value="White"/>
                <Setter Property="HeaderFontSize" Value="12"/>
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="Width" Value="280" />
                <Setter Property="Height" Value="200" />
            </Style>
            <Style TargetType="c1:C1Tile" BasedOn="{StaticResource baseTileStyle}">
            </Style>
            <Style TargetType="c1:C1SlideTile" BasedOn="{StaticResource baseTileStyle}">
            </Style>
            <Style TargetType="c1:C1FlipTile" BasedOn="{StaticResource baseTileStyle}">
            </Style>
        </UserControl.Resources>
    ```
    
    This markup adds resources to style the appearance of the application.
    
7.  Place the cursor between the `<Grid>` and `</Grid>` tags, navigate to the Toolbox, and double-click the **ListBox** control to add it to the page.
8.  Update the **ListBox** markup so it looks like the following:
    
    ```xml
    <ListBox ItemContainerStyle="{StaticResource listBoxItemStyle}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                        <c1:C1WrapPanel/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.Items>
        </ListBox.Items>
    </ListBox>
    ```
    

In this step you created a WPF application. In the next step you'll add **Tiles for WPF and Silverlight** controls to the application.

## See Also

[Step 2 of 3: Adding Tiles to the Application](/componentone/docs/wpf/online-tiles/C1TilesQuickStart/Step2)