Using Tiles in a Bound Control

You can use C1Tiles in any ItemsControl such as a C1TileListBox or GridView control. Here's a markup example using C1FlipTiles in a bound ListBox control:

Markup	Copy Code
<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>

Markup

Copy Code

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

If you use C1Tile controls in the ListBox with VirtualizingStackPanel as ItemsPanel, set VirtualizingStackPanel.VirtualizationMode to Standard to avoid tile animations while scrolling the ListBox.