<Page
    x:Name="pageRoot"
    x:Class="ControlExplorer.ControlsPage"
    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:ControlExplorer"
    xmlns:common="using:ControlExplorer.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 Items}"/>
    </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 Background="{ThemeResource ControlExplorerBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="90"/>
            <RowDefinition Height="66"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--Header-->
        <StackPanel Margin="20 0 0 0" Orientation="Horizontal" VerticalAlignment="Center">
            <Image Source="/Resources/images/winrtxamlLogo_64.png" Width="64" Height="64"/>
            <TextBlock Text="Studio WinRT Edition" VerticalAlignment="Center" Margin="12 5 0 0" FontFamily="Segoe WP" FontWeight="Light" FontSize="48" Foreground="{ThemeResource ControlExplorerMainTitleThemeBrush}"/>
        </StackPanel>
        <!-- Back button and page title -->
        <Grid Grid.Row="1" Background="{ThemeResource ControlExplorerLightStripeThemeBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="20 0 0 0" VerticalAlignment="Center" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" Foreground="{ThemeResource ControlExplorerLightForegroundThemeBrush}" 
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="All Controls" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap"  Margin="0 5 0 0" FontFamily="Segoe WP" FontWeight="Light" FontSize="30" Foreground="{ThemeResource ControlExplorerLightForegroundThemeBrush}"/>
        </Grid>

        <GridView x:Name="itemGridView" RequestedTheme="Dark"
                  Margin="0" 
                  Padding="40,40,40,44"
                  Grid.Row="2"
                  AutomationProperties.AutomationId="ItemsGridView"
                  AutomationProperties.Name="Items"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                  ItemTemplate="{StaticResource Standard165x165ItemTemplate}"
                  SelectionMode="None"
                  IsItemClickEnabled="True"
                  ItemClick="ItemView_ItemClick">
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
                    <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="TabNavigation" Value="Local"/>
                    <Setter Property="IsHoldingEnabled" Value="True"/>
                    <Setter Property="Margin" Value="0 0 15 15" />
                </Style>
            </GridView.ItemContainerStyle>
            <!-- MaxHeight="560"-->
            <!--<GridView.ItemContainerStyleSelector>
                <local:MyStyleSelector ItemContainerStyle="{StaticResource GridViewItemStyle1}"/>
            </GridView.ItemContainerStyleSelector>-->
        </GridView>

    </Grid>
</Page>
