<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"
    xmlns:c1="using:C1.Xaml"
    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="Auto"/>
            <RowDefinition Height="66"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--Header-->
        <StackPanel Margin="20 0 0 10" Orientation="Horizontal" VerticalAlignment="Center">
            <Image x:Name="logo" Source="/Assets/uwpLogo_64.png" Width="64" Height="64"/>
            <TextBlock x:Name="logoText" Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=LogoText_Text}" VerticalAlignment="Center" Margin="12 5 0 0" FontFamily="Segoe WP" FontWeight="Light" FontSize="48" Foreground="{ThemeResource ControlExplorerMainTitleThemeBrush}"/>
        </StackPanel>
        <!-- page title -->
        <Grid x:Name="tilePanel" Grid.Row="1" Background="{ThemeResource ControlExplorerLightStripeThemeBrush}">
            <TextBlock x:Name="pageTitle" Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=PageTitle_Text}" Style="{StaticResource HeaderTextBlockStyle}" 
                        IsHitTestVisible="false" TextWrapping="NoWrap"  Margin="40 15 0 0" FontFamily="Segoe WP" FontWeight="Light" FontSize="30" Foreground="{ThemeResource ControlExplorerLightForegroundThemeBrush}"/>
        </Grid>

        <GridView x:Name="itemGridView" RequestedTheme="Dark"
                  Grid.Row="2"
                  AutomationProperties.AutomationId="ItemsGridView"
                  AutomationProperties.Name="Items"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                  SelectionMode="None"
                  IsItemClickEnabled="True"
                  Style="{StaticResource wideLayoutGridView}"
                  ItemClick="ItemView_ItemClick">
        </GridView>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="540"/>
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="itemGridView.Style" Value="{StaticResource narrowLayoutGridView}"></Setter>
                        <Setter Target="itemGridView.(Grid.Row)" Value="1" />
                        <Setter Target="itemGridView.(Grid.RowSpan)" Value="2" />
                        <Setter Target="logo.Width" Value="42" />
                        <Setter Target="logo.Height" Value="42" />
                        <Setter Target="logoText.FontSize" Value="20" />
                        <Setter Target="tilePanel.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>

