<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="C1Calendar_Demo.ItemDetailPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:C1Calendar_Demo"
    xmlns:data="using:C1Calendar_Demo.Data"
    xmlns:common="using:C1Calendar_Demo.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

   <Grid Style="{StaticResource LayoutRootStyle}">

        <Grid.RowDefinitions>
            <RowDefinition Height="112"/>
            <RowDefinition Height="80"/>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <!-- Back button and page title -->
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Text="C1Calendar_Demo" Style="{StaticResource PageHeaderTextStyle}" Grid.Column="1" IsHitTestVisible="false"/>
        </Grid>

        <FlipView 
            x:Name="flipView" SelectionChanged="flipView_SelectionChanged"
            AutomationProperties.AutomationId="ItemsFlipView"
            AutomationProperties.Name="Item Details"
            TabIndex="1"
            Grid.Row="1" Grid.RowSpan="2"
            Margin="0"
            ItemsSource="{Binding AllItems}">
           <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <!-- Sample title and description -->
                        <TextBlock Margin="120 0 40 0" TextWrapping="WrapWholeWords" >
                            <Run FontSize="26.667" FontWeight="Light" Text="{Binding Title}"/>
                            <LineBreak/>
                            <Run FontSize="16" FontWeight="SemiBold" Text="{Binding Subtitle}" />
                        </TextBlock>
                        <!-- don't load sample pages into FlipView item, as FlipView loads some invisible items as well.
                             Load content into frame, placed over the FlipView -->
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
        
       <!--Show sample content in the frame -->
        <Frame x:Name="frame" Margin="80,0,80,0" Grid.Row="2" 
               HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

        <!-- Footer -->
        <Image VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="120,20" Grid.Row="3" Source="/Assets/c1logo.png" Width="245" Height="41"/>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The back button respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
