<Page
    x:Name="pageRoot"
    x:Class="ControlExplorer.SamplesPage"
    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 Samples}"
            />
    </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="74"/>
            <RowDefinition Height="66"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--Header-->
        <StackPanel Margin="20 0 0 6" Orientation="Horizontal" VerticalAlignment="Center">
            <Image x:Name="logo" Source="/Assets/uwpLogo_64.png" Width="64" Height="64"/>
            <TextBlock x:Name="logoText" x:Uid="/Resources/LogoText" 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" Style="{StaticResource HeaderTextBlockStyle}"
                        IsHitTestVisible="false" TextWrapping="NoWrap"  Margin="40 15 0 0" FontFamily="Segoe WP" FontWeight="Light" FontSize="30" Foreground="{ThemeResource ControlExplorerLightForegroundThemeBrush}">
                <TextBlock.Inlines>
                    <Run x:Uid="/Resources/All"></Run>
                    <Run Text="{Binding Path=Control.Name}"></Run>
                    <Run  x:Uid="/Resources/Samples"></Run>
                </TextBlock.Inlines>
            </TextBlock>
        </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"
                  ScrollViewer.HorizontalScrollBarVisibility= "Auto"
                  ScrollViewer.VerticalScrollBarVisibility="Disabled"
                  ScrollViewer.VerticalScrollMode="Disabled"
                  ScrollViewer.HorizontalScrollMode="Auto"
                  ItemClick="ItemView_ItemClick">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <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>
        </GridView>
        <!-- Vertical scrolling list only used when snapped -->
        <ListView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemListView"
            AutomationProperties.Name="Items"
            Grid.Row="1"
            Grid.RowSpan="2"
            Visibility="Collapsed"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            ItemTemplate="{StaticResource Standard80ItemTemplate}"
            SelectionMode="None"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick">
        </ListView>
        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's window size -->
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <common:DeviceTrigger Device="Desktop" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <common:DeviceTrigger Device="Phone" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="itemGridView.Visibility" Value="Collapsed" />
                        <Setter Target="itemListView.Visibility" Value="Visible" />
                        <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>
