Using Tiles in a Bound Control

In This Topic

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

Markup

Copy Code

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

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.