手順2：アプリケーションへのタイルの追加

前の手順では、WPF アプリケーションを作成しました。この手順では、Tiles for WPF/Silverlight コントロールを追加します。次の手順に従います。

<ListBox.Items></ListBox.Items> タグの間にカーソルを置き、ツールボックスに移動し、C1Tile コントロールをダブルクリックしてページに追加します。

C1Tile マークアップを更新します。次のようになります。

XAML	コードのコピー
<c1:C1Tile Content="1" Header="C1Tile" HeaderPadding="12" Padding="0" HeaderBackground="#22000000" HorizontalHeaderAlignment="Stretch" />

C1Tile マークアップの直後に次のマークアップを追加します。

XAML	コードのコピー
<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>

XAML

コードのコピー

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

このマークアップは、ContentTemplate および BackContentTemplate とともに C1SlideTile コントロールを追加します。ContentTemplate は、コントロールの初期コンテンツと外観を決定します。BackContentTemplate は、コントロールが変化するときに（C1SlideTile コントロールの場合は、１つのテンプレートから別のテンプレートにスライドするときに）、コントロールのコンテンツと外観を決定します。

C1SlideTile マークアップの直後に次のマークアップを追加します。

XAML	コードのコピー
<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" />

XAML

コードのコピー

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

このマークアップは C1SlideTile コントロールを追加します。

この手順では、アプリケーションに Tiles for WPF/Silverlight コントロールを追加しました。次の手順では、アプリケーションを実行し、実行時にアプリケーションがどのように表示されるかを確認します。