連結コントロールでのタイルの使用

C1TileListBox や GridView コントロールなどの任意の ItemsControl で C1Tile を使用できます。連結 ListBox コントロールで C1FlipTile を使用するマークアップの例を以下に示します。

XAML	コードのコピー
<ListBox ItemsSource="{Binding}" x:Name="listBox" > <ListBox.ItemsPanel> <ItemsPanelTemplate> <c1:C1WrapPanel Background="YellowGreen"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemContainerStyle> <Style TargetType="ListBoxItem"> <Setter Property="c1tile:C1TileService.PointerDownAnimation" Value="True"/> </Style> </ListBox.ItemContainerStyle> <ListBox.ItemTemplate> <DataTemplate> <c1tile:C1FlipTile Height="200" Width="200" Header="{Binding Title}" Content="{Binding}" Background="DarkGreen" HeaderBackground="#88000000" HeaderFontSize="18" Command="{Binding TileCommand, ElementName=pageRoot}" HeaderPadding="2" Padding="0" HeaderForeground="White" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}"> <c1tile:C1Tile.ContentTemplate> <DataTemplate> <Grid> <TextBlock Text="{Binding Author}" Foreground="White" VerticalAlignment="Top" Margin="4,2,0,2"/> <Image Source="{Binding Thumbnail}" Stretch="UniformToFill" Margin="1, 24, 24, 1"/> </Grid> </DataTemplate> </c1tile:C1Tile.ContentTemplate> <c1tile:C1Tile.AlternateContentTemplate> <DataTemplate> <Grid> <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/> </Grid> </DataTemplate> </c1tile:C1Tile.AlternateContentTemplate> </c1tile:C1FlipTile> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

XAML

コードのコピー

<ListBox ItemsSource="{Binding}" x:Name="listBox" >
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <c1:C1WrapPanel Background="YellowGreen"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="c1tile:C1TileService.PointerDownAnimation" Value="True"/>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <c1tile:C1FlipTile Height="200" Width="200" Header="{Binding Title}" Content="{Binding}" 
             Background="DarkGreen" HeaderBackground="#88000000" HeaderFontSize="18" 
             Command="{Binding TileCommand, ElementName=pageRoot}" HeaderPadding="2" Padding="0" 
             HeaderForeground="White" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}">
                <c1tile:C1Tile.ContentTemplate>
                    <DataTemplate>
                        <Grid>
                            <TextBlock Text="{Binding Author}" Foreground="White" VerticalAlignment="Top" Margin="4,2,0,2"/>
                            <Image Source="{Binding Thumbnail}" Stretch="UniformToFill" Margin="1, 24, 24, 1"/>
                        </Grid>
                    </DataTemplate>
                </c1tile:C1Tile.ContentTemplate>
                <c1tile:C1Tile.AlternateContentTemplate>
                    <DataTemplate>
                        <Grid>
                            <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/>
                        </Grid>
                    </DataTemplate>
                </c1tile:C1Tile.AlternateContentTemplate>
            </c1tile:C1FlipTile>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

メモ： VirtualizingStackPanel を ItemsPanel として使用し、ListBox で C1Tile コントロールを使用する場合は、 VirtualizingStackPanel.VirtualizationMode を Standard に設定して、ListBox のスクロール中にタイルアニメーションが発生しないようにしてください。