この手順では、最初に Visual Studio で Tiles for UWP を使用するアプリケーションを作成します。この手順では、Windows ストアアプリケーションを作成し、C1TileListBox を追加し、Tiles for UWP コントロールを挿入します。それには、次の手順に従います。

1. Visual Studio で、［ファイル］→［新規作成］→［プロジェクト］を選択します。
2. ［新しいプロジェクト］ダイアログボックスで、左ペインの言語を展開し、言語の下で［Windows ストア］を選択し、テンプレートリストで［新しいアプリケーション (XAML)］を選択します。プロジェクトの名前を入力し、［OK］をクリックしてプロジェクトを作成します。
   MainPage.xaml ページが表示されます。
3. <Page> タグの直後で <Grid> タグの前に、次のマークアップを追加します。
   

   XAML でマークアップの書き方

   マークアップ

   コードのコピー

   <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>

   このマークアップは、アプリケーションの外観をスタイル設定するためのページリソースを追加します。

4. <Grid> タグと </Grid> タグの間にカーソルを置き、ツールボックスに移動し、C1TileListBox コントロールをダブルクリックしてページに追加します。これにより、C1.Xaml アセンブリへの参照も追加されます。
5. C1TileListBox マークアップを更新します。次のようになります。
   

   マークアップ	コードのコピー
   <Xaml:C1TileListBox ItemStyle="{StaticResource listBoxItemStyle}"> <Xaml:C1TileListBox.Items> </Xaml:C1TileListBox.Items> </Xaml:C1TileListBox>

この手順では、Windows ストアアプリケーションを作成しました。次の手順では、このアプリケーションに Tiles for UWP コントロールを追加します。