﻿<manifest:LayoutControl 
    x:Class="WinStore.UX.Controls.PDP.PageLayout"
    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:manifest="using:WinStore.UX.PresentationManifest"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:ConnectionId='1' x:Name="ReflowStates">
                <VisualState x:ConnectionId='2' x:Name="Wide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:ConnectionId='3' x:Name="MediumWide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumWideMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <!--Side Margins-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_leftMarginColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginMediumNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_rightMarginColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginMediumNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_gutterColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginMediumNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:ConnectionId='4' x:Name="MediumNarrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumNarrowMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <!--Side Margins-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_leftMarginColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginMediumNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_rightMarginColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginMediumNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                        <!-- Set Sidebar Panel Width 0 (do NOT set Visibility Collapsed) -->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_sidebarPanel" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_gutterColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:ConnectionId='5' x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <!--Side Margins-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_leftMarginColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_rightMarginColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppMarginNarrowGridLength}" />
                        </ObjectAnimationUsingKeyFrames>
                        <!-- Set Sidebar Panel Width 0 (do NOT set Visibility Collapsed) -->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_sidebarPanel" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_gutterColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <ScrollViewer x:ConnectionId='6' 
            HorizontalScrollBarVisibility="Disabled"
            VerticalScrollBarVisibility="Auto"
            ZoomMode="Disabled"
            Style="{StaticResource NavigationAwareScrollViewerStyle}"
                                                  >
            <Grid Margin="{Binding NavigationOffsetMargin, Source={StaticResource HamburgerHelper}}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:ConnectionId='20' x:Name="_leftMarginColumn" Width="{StaticResource AppMarginWideGridLength}" />
                    <ColumnDefinition />
                    <ColumnDefinition x:ConnectionId='21' x:Name="_gutterColumn" Width="{StaticResource AppMarginWideGridLength}" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition x:ConnectionId='22' x:Name="_rightMarginColumn" Width="{StaticResource AppMarginWideGridLength}" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                </Grid.RowDefinitions>

                <manifest:Slot x:ConnectionId='23' 
                    x:Name="_slot0" 
                    Grid.ColumnSpan="5" 
                    Margin="0,0,0,30"/>

                <StackPanel x:ConnectionId='24'
                    x:Name="_mainPanel"
                    Grid.Row="1"
                    Grid.Column="1" />

                <StackPanel x:ConnectionId='25' 
                    x:Name="_sidebarPanel"
                    Grid.Column="3"
                    Grid.Row="1"
                    Width="{StaticResource SmallAppTileWidth}" />
                
            </Grid>
        </ScrollViewer>
        <StackPanel x:ConnectionId='7' x:Name="_hiddenPanel" Visibility="Collapsed">
            <manifest:Slot x:ConnectionId='8' x:Name="_slot1" />
            <manifest:Slot x:ConnectionId='9' x:Name="_slot2" />
            <manifest:Slot x:ConnectionId='10' x:Name="_slot3" />
            <manifest:Slot x:ConnectionId='11' x:Name="_slot4" />
            <manifest:Slot x:ConnectionId='12' x:Name="_slot5" />
            <manifest:Slot x:ConnectionId='13' x:Name="_slot6" />
            <manifest:Slot x:ConnectionId='14' x:Name="_slot7" />
            <manifest:Slot x:ConnectionId='15' x:Name="_slot8" />
            <manifest:Slot x:ConnectionId='16' x:Name="_slot9" />
            <manifest:Slot x:ConnectionId='17' x:Name="_slot10" />
            <manifest:Slot x:ConnectionId='18' x:Name="_slot11" />
            <manifest:Slot x:ConnectionId='19' x:Name="_slot12" />
        </StackPanel>
    </Grid>
</manifest:LayoutControl>

