Step 1 of 3: Setting up the Tiles Application

In This Topic

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

In Visual Studio, select File | New | Project.
Select Templates | Visual C# | Windows | Universal. From the templates list, select Blank App (Universal Windows). Enter a Name for your project and click OK to create your project.

The MainPage.xaml page will open.

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

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

Markup

Copy Code

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

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