<Page
    x:Name="pageRoot" Loaded="OnLoaded"
    x:Class="TileSamples.Samples.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">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="380"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button x:Name="retry" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="18"
                Content="Retry" Grid.Row="0" Click="Retry_Click" Visibility="Collapsed"/>
         <!-- Note: if you use C1Tile controls in the ListBox with VirtualizingStackPanel as ItemsPanel, 
                 set VirtualizingStackPanel.VirtualizationMode="Standard" to avoid tile animations while scrolling the ListBox. -->
        <ListBox ItemsSource="{Binding}" Grid.Column="0" x:Name="listBox" BorderThickness="0" Grid.Row="1" >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <c1:C1WrapPanel Background="#4CA6DD"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="c1tile:C1TileService.PointerDownAnimation" Value="True"/>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <c1tile:C1FlipTile Height="160" Width="160" Header="{Binding Title}" BorderThickness="0"
                                Content="{Binding}" Background="#1F66B1" HeaderBackground="#7F000000" HeaderFontSize="14"
                                Command="{Binding TileCommand, ElementName=pageRoot}" HeaderPadding="5" Padding="0" HeaderForeground="White"
                                CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}">
                        <c1tile:C1Tile.ContentTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Image Source="{Binding ImageSource}" Stretch="UniformToFill" /> <!--Margin="1, 24, 24, 1"-->
                                    <TextBlock Text="{Binding Author}" Foreground="White" VerticalAlignment="Top" Margin="4,2,0,2"/>
                                </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>
        <Border x:Name="previewBorder" Background="#4CA6DD" BorderThickness="0"  Grid.Column="1" Grid.Row="1" Padding="10">
            <!-- image source will be set by the TileCommand after click on some tile -->
            <Image x:Name="Preview" Stretch="Uniform" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
            <!-- or use the next line instead to show selected item content via binding to the ListBox >-->
            <!-- <Image x:Name="Preview" Source="{Binding Path=SelectedItem.Content, ElementName=listBox}" Stretch="Uniform" Margin="2"/> -->
        </Border>
        <Grid x:Name="loading" Background="#4CA6DD" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" Grid.ColumnSpan="2">
            <StackPanel VerticalAlignment="Center">
                <TextBlock Text="Retrieving data from Flickr..." FontSize="20" TextAlignment="Center"/>
                <c1:C1ProgressBar IsIndeterminate="True" IndeterminateForeground="#FF2C383D" Height="4"/>
            </StackPanel>
        </Grid>
    </Grid>
</Page>
