Step 1 of 3: Setting up the Tiles Application

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

In Visual Studio, select File | New | Project.
In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). Enter a Name for your project and click OK to create your project.

The MainPage.xaml page will open.

Add the following markup just after the <Page> tag and before the <Grid> tag:

Markup	Copy Code
<Page.Resources> <Style x:Key="listBoxItemStyle" TargetType="c1:C1ListBoxItem"> <Setter Property="c1tile:C1TileService.PointerDownAnimation" Value="True"/> </Style> <Style TargetType="c1tile: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="c1tile:C1Tile" BasedOn="{StaticResource baseTileStyle}"> </Style> <Style TargetType="c1tile:C1SlideTile" BasedOn="{StaticResource baseTileStyle}"> </Style> <Style TargetType="c1tile:C1FlipTile" BasedOn="{StaticResource baseTileStyle}"> </Style> </Page.Resources>

Markup

Copy Code

<Page.Resources>
        <Style x:Key="listBoxItemStyle" TargetType="c1:C1ListBoxItem">
            <Setter Property="c1tile:C1TileService.PointerDownAnimation" Value="True"/>
        </Style>
        <Style TargetType="c1tile: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="c1tile:C1Tile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
        <Style TargetType="c1tile:C1SlideTile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
        <Style TargetType="c1tile:C1FlipTile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
    </Page.Resources>

This markup adds page resources to style the appearance of the application.

Place the cursor between the <Grid> and </Grid> tags, navigate to the Toolbox, and double-click the C1TileListBox control to add it to the page. This will also add a reference to the C1.Xaml assembly.

Update the C1TileListBox markup so it looks like the following:

Markup	Copy Code
<c1:C1TileListBox ItemStyle="{StaticResource listBoxItemStyle}"> <c1:C1TileListBox.Items> </c1:C1TileListBox.Items> </c1:C1TileListBox>

In this step you created a Windows Store application. In the next step you'll add Tiles for WinRT controls to the application.