<UserControl x:Class="ControlExplorer.TileListBoxSample"
    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"
    mc:Ignorable="d"
    xmlns:c1="using:C1.Xaml"
    d:DesignHeight="480" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot">
        <StackPanel x:Name="loading" VerticalAlignment="Center">
            <TextBlock Text="Retrieving data from YouTube..." TextAlignment="Center" Style="{ThemeResource BaseTextBlockStyle}"/>
            <c1:C1ProgressBar IsIndeterminate="True" IndeterminateForeground="#FF2C383D"/>
        </StackPanel>
        <Button x:Name="retry" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Retry" Visibility="Collapsed" Click="Retry_Click" />
        <c1:C1TileListBox x:Name="listBox" 
                          ItemsSource="{Binding}" 
                          ItemTapped="listBox_ItemTapped"
                          Background="Transparent"
                          Foreground="White"
                          Visibility="Collapsed"
                          HorizontalContentAlignment="Stretch"
                          VerticalContentAlignment="Stretch"
                          Padding="0 0 0 20">
            <c1:C1TileListBox.ItemStyle>
                <Style TargetType="c1:C1ListBoxItem">
                    <Setter Property="Margin" Value="1"/>
                    <Setter Property="BorderThickness" Value="2"/>
                </Style>
            </c1:C1TileListBox.ItemStyle>
            <c1:C1TileListBox.PreviewItemTemplate>
                <DataTemplate>
                    <Grid Background="{ThemeResource GridViewItemPlaceholderBackgroundThemeBrush}"
                          Width="120" Height="120">
                    </Grid>
                </DataTemplate>
            </c1:C1TileListBox.PreviewItemTemplate>
            <c1:C1TileListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Background="{ThemeResource GridViewItemPlaceholderBackgroundThemeBrush}" Width="120" Height="120">
                        <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/>
                        <TextBlock Text="{Binding Title}" Margin="4 0 0 4" VerticalAlignment="Bottom"/>
                    </Grid>
                </DataTemplate>
            </c1:C1TileListBox.ItemTemplate>
        </c1:C1TileListBox>
    </Grid>
</UserControl>
