ContentTemplate と BackContentTemplate

ContentTemplate と BackContentTemplate を使用すると、Tiles for WPF/Silverlight コントロールの外観をカスタマイズすることができます。タイルに最初に表示するコンテンツを ContentTemplate に置き、別のコンテンツにスライドまたはフリップされたときに表示するコンテンツを BackContentTemplate に置きます。

たとえば、次のマークアップは、ContentTemplate と BackContentTemplate を C1SlideTile コントロールに追加します。

XAML	コードのコピー
<c1tile:C1SlideTile Content="2" HeaderPadding="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" Header="C1SlideTile"> <c1tile:C1Tile.ContentTemplate> <DataTemplate> <Border Background="#FFBC1C48" > <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> </DataTemplate> </c1tile:C1Tile.ContentTemplate> <c1tile: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> </c1tile:C1Tile.BackContentTemplate> </c1tile:C1SlideTile>

XAML

コードのコピー

<c1tile:C1SlideTile Content="2" HeaderPadding="12" HorizontalContentAlignment="Stretch" 

VerticalContentAlignment="Stretch" Padding="0" Header="C1SlideTile">
    <c1tile:C1Tile.ContentTemplate>
        <DataTemplate>
            <Border Background="#FFBC1C48" >
                <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Border>
        </DataTemplate>
    </c1tile:C1Tile.ContentTemplate>
    <c1tile: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>
    </c1tile:C1Tile.BackContentTemplate>
</c1tile:C1SlideTile>

実行すると、最初は ContentTemplate が次のように表示されます。

もう一方のコンテンツテンプレートに変化すると、コントロールには次の BackContentTemplate が表示されます。