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

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

マークアップ	コードのコピー
<ListBox x:Name="listBox" ItemsSource="{Binding}"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <Xaml:C1WrapPanel Background="YellowGreen"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemContainerStyle> <Style TargetType="ListBoxItem"> <Setter Property="Tile:C1TileService.PointerDownAnimation" Value="True"/> </Style> </ListBox.ItemContainerStyle> <ListBox.ItemTemplate> <DataTemplate> <Tile: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}}"> <Tile: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> </Tile:C1Tile.ContentTemplate> <Tile:C1Tile.BackContentTemplate> <DataTemplate> <Grid> <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/> </Grid> </DataTemplate> </Tile:C1Tile.BackContentTemplate> </Tile:C1FlipTile> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

マークアップ

コードのコピー

<ListBox x:Name="listBox" ItemsSource="{Binding}">
    <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Xaml:C1WrapPanel
    Background="YellowGreen"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter
    Property="Tile:C1TileService.PointerDownAnimation" Value="True"/>
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Tile: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}}">
                      <Tile: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>
                      </Tile:C1Tile.ContentTemplate>
                      <Tile:C1Tile.BackContentTemplate>
                        <DataTemplate>
                                <Grid>
                                <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/>
                            </Grid>
                        </DataTemplate>
                     </Tile:C1Tile.BackContentTemplate>
                </Tile:C1FlipTile>
             </DataTemplate>
          </ListBox.ItemTemplate>
       </ListBox>

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