<Page
    x:Name="pageRoot"
    x:Class="ControlExplorer.ItemDetailPage"
    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:data="using:ControlExplorer.Data"
    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>
        <ResourceDictionary>
            <!-- Collection of items displayed by this page -->
            <CollectionViewSource
                x:Name="itemsViewSource"
                Source="{Binding Samples}"/>
            <Style x:Key="PageIconStyle" TargetType="ContentControl">
                <Setter Property="Width" Value="60"/>
                <Setter Property="Height" Value="60"/>
                <Setter Property="Margin" Value="10 20 0 0"/>
            </Style>
            <DataTemplate x:Key="smallHeader">
                <StackPanel Margin="20 0 0 0" >
                    <TextBlock Style="{ThemeResource BaseTextBlockStyle}" Text="{Binding Name}"/>
                </StackPanel>
            </DataTemplate>
            <Style x:Key="LogoStyle" TargetType="TextBlock">
                <Setter Property="FontFamily" Value="Segoe WP"/>
                <Setter Property="FontWeight" Value="Light"/>
                <Setter Property="FontSize" Value="48"/>
            </Style>
        </ResourceDictionary>
        </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  x:Name="SampleFrame"
        Background="{ThemeResource ControlExplorerBackgroundThemeBrush}"
        DataContext="{Binding SelectedItem, ElementName=flipView}">
        <Grid.RowDefinitions>
            <RowDefinition Height="74"/>
            <RowDefinition Height="66"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="20 0 0 10">
            <Image x:Name="logo" Source="/Resources/images/uwpLogo_64.png" Width="64" Height="64"/>
            <TextBlock x:Name="logoText" Style="{StaticResource LogoStyle}" Text="Studio UWP Edition" VerticalAlignment="Center" Margin="12 5 0 0" Foreground="{ThemeResource ControlExplorerMainTitleThemeBrush}"/>
        </StackPanel>
        <!-- Page tile -->
        <Grid Grid.Row="1" x:Name="mainMenu">
            <Border Background="{ThemeResource ControlExplorerLightStripeThemeBrush}">
                <StackPanel Orientation="Horizontal">
                    <ContentControl x:Name="pageIcon" Height="42" Width="42" Margin="30 0 0 0" VerticalAlignment="Center" ContentTemplate="{Binding Icon}" Style="{StaticResource PageIconStyle}" Foreground="{ThemeResource ControlExplorerLightForegroundThemeBrush}"/>
                    <TextBlock x:Name="pageTitle" Text="{Binding Name}" VerticalAlignment="Center" Margin="22 5 0 0" FontFamily="Segoe WP" FontWeight="Light" FontSize="30" Foreground="{ThemeResource ControlExplorerLightForegroundThemeBrush}"/>
                </StackPanel>
            </Border>
        </Grid>
        <!-- Body -->
        <Border  x:Name="backgroundElement" Background="{ThemeResource ControlExplorerBodyBackgroundThemeBrush}" Grid.Row="2"/>
        <!-- Details for selected item -->
        <Grid x:Name="itemDetail"
            Grid.Row="2">
            <Grid.RowDefinitions>
                <RowDefinition x:Name="row1" Height="48"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            <FlipView x:Name="flipView" 
                    AutomationProperties.AutomationId="ItemsFlipView"
                    AutomationProperties.Name="Item Details" 
                    TabIndex="1" Margin="0" Grid.RowSpan="2" SelectionChanged="flipView_SelectionChanged"
                    Foreground="{StaticResource ControlExplorerDarkForegroundThemeBrush}" 
                    ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Margin="20,0,0,0" x:Name="tb" SizeChanged="tb_SizeChanged" Text="{Binding Description}" Style="{ThemeResource SubtitleTextBlockStyle}" Foreground ="{StaticResource ControlExplorerDarkForegroundThemeBrush}"/>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
            <Frame x:Name="frame" Margin="32,0,32,0" Content="{Binding Sample}" DataContext="{Binding SelectedItem, ElementName=flipView}" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        </Grid>
        <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>
                        <Setter Target="logoText.Style" Value="{StaticResource LogoStyle}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <common:DeviceTrigger Device="Phone"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="logoText.Style" Value="{ThemeResource SubtitleTextBlockStyle}" />
                        <Setter Target="mainMenu.Visibility" Value="Collapsed" />
                        <Setter Target="itemDetail.(Grid.Row)" Value="1" />
                        <Setter Target="itemDetail.(Grid.RowSpan)" Value="2" />
                        <Setter Target="backgroundElement.(Grid.Row)" Value="1" />
                        <Setter Target="backgroundElement.(Grid.RowSpan)" Value="2" />
                        <Setter Target="flipView.ItemTemplate" Value="{StaticResource smallHeader}" />
                        <Setter Target="logo.Width" Value="40" />
                        <Setter Target="logo.Height" Value="40" />
                        <Setter Target="logoText.FontSize" Value="20" />
                        <Setter Target="row1.Height" Value="28" />
                        <Setter Target="frame.Margin" Value="0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" Visibility="Collapsed" />
    </Page.BottomAppBar>
</Page>
