﻿<pm:LayoutControl
    x:Class="WinStore.UX.Controls.CollectionDetailsLayout"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pm="using:WinStore.UX.PresentationManifest"
    mc:Ignorable="d">
    
    <ScrollViewer Style="{StaticResource NavigationAwareScrollViewerStyle}" 
                  HorizontalScrollMode="Disabled" 
                  VerticalScrollBarVisibility="Auto" 
                  VerticalScrollMode="Auto">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:ConnectionId='1' x:Name="ReflowStates">
                <VisualState x:ConnectionId='2' x:Name="ExtraWide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource CollectionsExtraWideMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_imageColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="*" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:ConnectionId='3' x:Name="Wide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:ConnectionId='4' x:Name="MediumWide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource CollectionsMediumWideMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_gutter" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginMediumNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:ConnectionId='5' x:Name="Medium">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource CollectionsMediumMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_headerGrid" Storyboard.TargetProperty="Height">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="480" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_headerImage" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="840" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_title" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SubheaderTextBlockStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_description" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BodyTextBlockStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_textStackPanel" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="24,0,0,20" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_colorColumn" Storyboard.TargetProperty="MaxWidth">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="440" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_gutter" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginMediumNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:ConnectionId='6' x:Name="MediumNarrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumNarrowMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_headerGrid" Storyboard.TargetProperty="Height">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="240" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_headerImage" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="481" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_title" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TitleTextBlockStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_description" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BodyTextBlockStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_textStackPanel" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="24,0,0,20" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_textStackPanel" Storyboard.TargetProperty="MaxWidth">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="433" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_colorColumn" Storyboard.TargetProperty="MaxWidth">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="358" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_gutter" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginMediumNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:ConnectionId='7' x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_headerGrid" Storyboard.TargetProperty="Height">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="240" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_headerImage" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="320" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_title" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SubtitleTextBlockStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_description" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CaptionTextBlockStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_textStackPanel" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="12,0,0,9" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_textStackPanel" Storyboard.TargetProperty="MaxWidth">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="296" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_colorColumn" Storyboard.TargetProperty="MaxWidth">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="160" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_gutter" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid Margin="{Binding NavigationOffsetMargin, Source={StaticResource HamburgerHelper}}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:ConnectionId='8' x:Name="_gutter" Width="{StaticResource AppMarginWideGridLength}"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid x:ConnectionId='9' x:Name="_headerGrid" Grid.ColumnSpan="2" Visibility="Collapsed" Margin="0,0,0,31" Height="640">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:ConnectionId='14' x:Name="_colorColumn" MaxWidth="644"/>
                    <ColumnDefinition x:ConnectionId='15' x:Name="_imageColumn" Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Image x:ConnectionId='16' x:Name="_headerImage"
                           Stretch="UniformToFill"
                           Grid.Column="1"/>
                <Rectangle x:ConnectionId='17' x:Name="_heroImageOverlayFull"/>
                <Rectangle x:ConnectionId='18'
                        x:Name="_heroImageOverlayGradient"
                        Grid.Column="1"
                        HorizontalAlignment="Left"
                        Width="340">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="1,0.5" EndPoint="0,0.5" >
                            <GradientStop x:ConnectionId='22' x:Name="_gradientStopBrush" />
                            <GradientStop x:ConnectionId='23' x:Name="_gradientStartBrush" Offset="1"/>
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <StackPanel x:ConnectionId='19' x:Name="_textStackPanel"
                            Margin="48,0,0,42" 
                            VerticalAlignment="Bottom" 
                            Grid.ColumnSpan="2" 
                            MaxWidth="592" 
                            HorizontalAlignment="Left">
                    <TextBlock x:ConnectionId='20' x:Name="_title"
                                    AutomationProperties.AutomationId="CollectionsDetailsLayoutsTitleTextBlock"
                                    Style="{StaticResource HeaderTextBlockStyle}"
                                    HorizontalAlignment="Left"
                                    TextWrapping="WrapWholeWords"/>
                    <TextBlock x:ConnectionId='21' x:Name="_description"
                                   TextWrapping="WrapWholeWords"
                                   Style="{StaticResource TitleTextBlockStyle}" />
                </StackPanel>
            </Grid>
            <StackPanel x:ConnectionId='10' x:Name="_textStackPanelNoImage"
                            Margin="4,24,0,28" 
                            Grid.Column="1"
                            VerticalAlignment="Top" 
                            Grid.ColumnSpan="2" 
                            MaxWidth="592" 
                            Visibility="Collapsed"
                            HorizontalAlignment="Left">
                    <TextBlock x:ConnectionId='12' x:Name="_titleNoImage"
                                    AutomationProperties.AutomationId="CollectionsDetailsLayoutsTitleTextBlock"
                                    Style="{StaticResource SubheaderTextBlockStyle}"
                                    Foreground="{ThemeResource PrimaryForegroundBrush}"
                                    HorizontalAlignment="Left"
                                    TextWrapping="WrapWholeWords"/>
                    <TextBlock x:ConnectionId='13' x:Name="_descriptionNoImage"
                                   TextWrapping="WrapWholeWords"
                                   Style="{StaticResource BodyTextBlockStyle}" 
                                   Foreground="{ThemeResource SecondaryForegroundBrush}"/>
                </StackPanel>

            <GridView x:ConnectionId='11' 
                x:Name="_tileGrid"
                Grid.RowSpan="2"
                Grid.Column="1"
                Grid.Row="1"
                SelectionMode="None"
                ItemTemplate="{StaticResource collectionDetailTileTemplate}"
                                       
                IsItemClickEnabled="True"
                AutomationProperties.AutomationId="CollectionDetailsLayoutListView"
                Style="{StaticResource VerticalListViewBaseStyle}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </GridView>
        </Grid>
    </ScrollViewer>
    
</pm:LayoutControl>

