<UserControl x:Class="ControlExplorer.Controls.Tile.ListBoxSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.Xaml"
    xmlns:c1tile="using:C1.Xaml.Tile"
    mc:Ignorable="d" x:Name="pageRoot"
    d:DesignHeight="480" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot">
        <ListBox x:Name="listBox" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <c1:C1WrapPanel/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="c1tile:C1TileService.PointerDownAnimation" Value="True"/>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <c1tile:C1FlipTile Height="180" Width="180" Header="{Binding Title}" 
                                Content="{Binding}" Background="#1F66B1" HeaderBackground="#7F000000" 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 ImageSource}" Stretch="UniformToFill"/>
                                </Grid>
                            </DataTemplate>
                        </c1tile:C1Tile.ContentTemplate>
                        <c1tile:C1Tile.BackContentTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Image Source="{Binding ImageSource}" Stretch="UniformToFill"/>
                                </Grid>
                            </DataTemplate>
                        </c1tile:C1Tile.BackContentTemplate>
                    </c1tile:C1FlipTile>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </Grid>
</UserControl>
