ContentTemplate と BackContentTemplate

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

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

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

マークアップ	コードのコピー
<Tile:C1SlideTile Content="2" HeaderPadding="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" Header="C1SlideTile" Foreground="White" FontSize="80" HeaderForeground="White" HeaderFontSize="12" Width="280" Height="200"> <Tile:C1Tile.ContentTemplate> <DataTemplate> <Border Background="#FFBC1C48" > <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> </DataTemplate> </Tile:C1Tile.ContentTemplate> <Tile: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> </Tile:C1Tile.BackContentTemplate> </Tile:C1SlideTile>

マークアップ

コードのコピー

<Tile:C1SlideTile Content="2" HeaderPadding="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" 
Header="C1SlideTile" Foreground="White" FontSize="80" HeaderForeground="White" HeaderFontSize="12" Width="280" Height="200">
      <Tile:C1Tile.ContentTemplate>
                 <DataTemplate>
                     <Border Background="#FFBC1C48" >
                         <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                     </Border>
                 </DataTemplate>
             </Tile:C1Tile.ContentTemplate>
             <Tile: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>
             </Tile:C1Tile.BackContentTemplate>
         </Tile:C1SlideTile>

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