<Page
    x:Name="pageRoot" Loaded="OnLoaded"
    x:Class="TileSamples.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.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button x:Name="retry" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="18"
                Content="{Binding Source={StaticResource TileSamplesLocalization}, Path=Retry_Content}" Grid.Row="0" Click="OnLoaded" Visibility="Collapsed"/>

        <SplitView Grid.Row="1" x:Name="splitView" IsPaneOpen="True" PaneClosed="splitView_PaneClosed"
                   DisplayMode="Overlay" OpenPaneLength="170"  >
            <SplitView.Pane>
                <!-- 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 x:Name="listBox" ItemsSource="{Binding}" BorderThickness="0" >
                     <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="c1tile:C1TileService.PointerDownAnimation" Value="True"/>
                        </Style>
                    </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <c1tile:C1FlipTile Height="140" Width="140" Header="{Binding Title}" BorderThickness="0"
                                Content="{Binding}" 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" />
                                            <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>
            </SplitView.Pane>
            <SplitView.Content>
                <Grid >
                    <Border x:Name="previewBorder"  BorderThickness="0" 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>
                    <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" VerticalAlignment="Top" HorizontalAlignment="Left" 
                            Background="#FFF8C3D9" Visibility="Collapsed" Click="HamburgerButton_Click"/>
                </Grid>
            </SplitView.Content>
        </SplitView>
        <Grid x:Name="loading" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" Grid.ColumnSpan="2">
            <StackPanel VerticalAlignment="Center">
                <TextBlock Text="{Binding Source={StaticResource TileSamplesLocalization}, Path=FlickrData_Text}" FontSize="20" TextAlignment="Center"/>
                <c1:C1ProgressBar IsIndeterminate="True" IndeterminateForeground="#FF2C383D" Height="4"/>
            </StackPanel>
        </Grid>
        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's window size -->
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>

                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="splitView.OpenPaneLength" Value="170" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
