<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="SparklineSamples.ItemPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SparklineSamples"
    xmlns:common="using:SparklineSamples.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>

        <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding AllItems}"
            ItemsPath="TopItems"
            />
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- Footer -->
        <Image x:Name="logo" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="120 20" Grid.Row="2" Source="/Assets/c1logo.png" Width="200" Height="34"/>

        <!-- Horizontal scrolling grid used in most view states -->
        <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Items"
            Grid.Row="1"
            Margin="0,-3,0,0"
            Padding="116,0,40,46"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
            SelectionMode="None"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick">
        </GridView>

        <!-- Vertical scrolling list only used when snapped -->
        <ListView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemListView"
            AutomationProperties.Name="Items"
            Grid.Row="1"
            Visibility="Collapsed"
            Margin="0,-10,0,0"
            Padding="10,0,0,60"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            ItemTemplate="{StaticResource Standard80ItemTemplate}"
            SelectionMode="None"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick">
        </ListView>

        <!-- Page title -->
        <StackPanel Margin="6" VerticalAlignment="Center" Orientation="Horizontal">
            <Grid Margin="10">
                <Image x:Name="uwpLogo" Source="/Assets/uwpLogo_64.png" Width="64" Height="64" />
            </Grid>
            <TextBlock x:Name="pageTitle" Text="{Binding AppName_Text, Source={StaticResource SparklineSamplesLocalization}}" Style="{ThemeResource TitleTextBlockStyle}" Margin="10" VerticalAlignment="Center"/>
        </StackPanel>

        <VisualStateManager.VisualStateGroups>

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

                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="itemGridView.Visibility" Value="Collapsed" />
                        <Setter Target="itemListView.Visibility" Value="Visible" />
                        <Setter Target="logo.Visibility" Value="Collapsed" />
                        <Setter Target="uwpLogo.Width" Value="40"/>
                        <Setter Target="uwpLogo.Height" Value="40"/>
                        <Setter Target="itemGridView.Padding" Value="10,0,0,0"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
