<Page
    x:Name="pageRoot"
    x:Class="PerfDiagHubXAML.SplitPage"
    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:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Loaded="pageRoot_Loaded">

	<!--
        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 ApplicationPageBackgroundThemeBrush}">
		<Grid.ChildrenTransitions>
			<TransitionCollection>
				<EntranceThemeTransition/>
			</TransitionCollection>
		</Grid.ChildrenTransitions>

		<Grid.ColumnDefinitions>
			<ColumnDefinition x:Name="primaryColumn" Width="420"/>
			<ColumnDefinition x:Name="secondaryColumn" Width="*"/>
		</Grid.ColumnDefinitions>

		<!-- Vertical scrolling item list -->
		<ListView
            x:Name="itemListView"
            TabIndex="1"
            Grid.Row="1"
            Margin="-10,-10,0,0"
            Padding="120,60,0,60"
            IsSwipeEnabled="False"
            SelectionChanged="ItemListView_SelectionChanged">
			<ListView.ItemTemplate>
				<DataTemplate>
					<Grid Margin="6">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto"/>
							<ColumnDefinition Width="*"/>
						</Grid.ColumnDefinitions>
						<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
							<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
						</Border>
						<StackPanel Grid.Column="1" Margin="10,0,0,0">
							<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
							<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
						</StackPanel>
					</Grid>
				</DataTemplate>
			</ListView.ItemTemplate>
			<ListView.ItemContainerStyle>
				<Style TargetType="FrameworkElement">
					<Setter Property="Margin" Value="0,0,0,10"/>
				</Style>
			</ListView.ItemContainerStyle>
		</ListView>

		<!-- Details for selected item -->
		<ScrollViewer
            x:Name="itemDetail"
            AutomationProperties.AutomationId="ItemDetailScrollViewer"
            Grid.Column="1"
            Grid.RowSpan="2"
            Padding="60,0,66,0"
            DataContext="{Binding SelectedItem, ElementName=itemListView}"
            HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
            ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Enabled"
            ScrollViewer.ZoomMode="Disabled">

			<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
				<Grid.RowDefinitions>
					<RowDefinition Height="Auto"/>
					<RowDefinition Height="Auto"/>
					<RowDefinition Height="*"/>
				</Grid.RowDefinitions>
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto"/>
					<ColumnDefinition Width="*"/>
				</Grid.ColumnDefinitions>

				<Image Source="{Binding ImagePath}" Grid.Row="1" Margin="0,0,20,0" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
				<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
					<Image x:Name="Processed" />
					<!--<TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}"/>
                    <TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Subtitle}" Style="{StaticResource SubtitleTextBlockStyle}"/>-->
				</StackPanel>
				<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding Content}" Style="{StaticResource BodyTextBlockStyle}"/>
			</Grid>
		</ScrollViewer>
		<VisualStateManager.VisualStateGroups>
			<!-- Visual states reflect the application's view state -->
			<VisualStateGroup x:Name="ViewStates">
				<VisualState x:Name="PrimaryView" />
				<VisualState x:Name="SinglePane">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
							<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="secondaryColumn" Storyboard.TargetProperty="Width">
							<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Visibility">
							<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Padding">
							<DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,60"/>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<!--
                    When an item is selected and only one pane is shown the details display requires more extensive changes:
                     * Hide the master list and the column it was in
                     * Move item details down a row to make room for the title
                     * Move the title directly above the details
                     * Adjust padding for details
                 -->
				<VisualState x:Name="SinglePane_Detail">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
							<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
							<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.Row)">
							<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.RowSpan)">
							<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailGrid" Storyboard.TargetProperty="Margin">
							<DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,60"/>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Padding">
							<DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,0"/>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
	</Grid>
</Page>
