﻿<pm:LayoutControl
    x:Class="WinStore.UX.Controls.TileListPanel"
    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:local="using:WinStore.UX.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pm="using:WinStore.UX.PresentationManifest"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:ConnectionId='1' x:Name="ReflowStates">
                <VisualState x:ConnectionId='5' x:Name="Wide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:ConnectionId='6' x:Name="MediumNarrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumNarrowMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <!--Side Margins-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_leftGutterColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginMediumNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_rightGutterColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginMediumNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                        <!--Top Margin-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_sectionTitle" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,27,0,6" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_viewAllButton" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,-1,9" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:ConnectionId='7' x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <!--Side Margins-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_leftGutterColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_rightGutterColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <!--Top Margin-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_sectionTitle" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,28,0,7" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_viewAllButton" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,11,9" />
                        </ObjectAnimationUsingKeyFrames>
                        <!--Bottom Margin-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_horizontalRule" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,23,0,0" />
                        </ObjectAnimationUsingKeyFrames>
                        <!--Title Font-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_sectionTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SubtitleTextBlockStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
			<VisualStateGroup x:ConnectionId='2' x:Name="WideTextStates">
				<VisualState x:ConnectionId='3' x:Name="NormalTextMode" />
				<VisualState x:ConnectionId='4' x:Name="WideTextMode">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_viewAllButton" Storyboard.TargetProperty="(Grid.Row)">
							<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:ConnectionId='8' x:Name="_leftGutterColumn" Width="{StaticResource AppMarginWideGridLength}" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition x:ConnectionId='9' x:Name="_rightGutterColumn" Width="{StaticResource AppMarginWideGridLength}" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" /><!--This is for the 'show all' text in accesibility mode. It's left empty normally-->
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBlock x:ConnectionId='10'
            x:Name="_sectionTitle"
            Grid.Column="1"
            Style="{StaticResource TitleTextBlockStyle}"
            AutomationProperties.AutomationId="SectionTitle"
            Foreground="{ThemeResource PrimaryForegroundBrush}"
            Margin="0,39,0,14" />
        <HyperlinkButton x:ConnectionId='11'
            x:Name="_viewAllButton"
            Grid.Column="1"
            AutomationProperties.AutomationId="SectionViewAllButton"
            x:Uid="ViewAllButton"
                                      
            Style="{StaticResource HyperlinkButtonStyle}"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            Margin="0,0,-1,18" />
        
        <local:HandledHorizontalScrollViewer x:ConnectionId='12'
            x:Name="_handledScroller"
            Grid.Column="1"
            Grid.Row="2"
            MaxHeight="400"
            IsItemClickEnabled="True" />
        
        <Rectangle x:ConnectionId='13' 
            x:Name="_horizontalRule"
            Grid.Column="1" 
            Grid.Row="3" 
            Height="1" 
            Margin="0,19,0,0" 
            Fill="{ThemeResource BodyBackgroundStroke}" />
    </Grid>
</pm:LayoutControl>

