<Page
    x:Name="pageRoot"
    x:Class="ControlExplorer.HomePage"
    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 Favorites}"
                d:Source="{Binding Controls, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
            <CollectionViewSource
                x:Name="newFeaturesViewSource"
                Source="{Binding NewFeatures}" />
        </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 Background="{ThemeResource ControlExplorerBackgroundThemeBrush}">
        <!--Background="{StaticResource ApplicationPageBackgroundThemeBrush}"-->
        <!--<Grid.RowDefinitions>
            <RowDefinition Height="90"/>
            <RowDefinition Height="66"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="245"/>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="20"/>
        </Grid.ColumnDefinitions>-->
        <!-- Header -->
        
        <!-- MainMenu -->
        <!--<Border Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Background="White">
            <TextBlock Text="home" VerticalAlignment="Center" Margin="22 0 0 0" FontFamily="Segoe WP" FontWeight="Light" FontSize="34" Foreground="#FFFFFFFF"/>
        </Border>-->
        <Border Background="{ThemeResource ControlExplorerLightStripeThemeBrush}" Height="70" VerticalAlignment="Top" Margin="0 90 0 0">
            <Border HorizontalAlignment="Left" Background="{ThemeResource ControlExplorerDarkStripeThemeBrush}" Height="70" Width="265"/>
        </Border>


        <!-- Body -->
        <!--<Border Background="#FFF2F2F2" Margin="0 155 0 0" Grid.Column="0" Grid.ColumnSpan="4"/>-->
 
        <!-- Horizontal scrolling grid used in most view states -->
        <!--<ScrollViewer
            x:Name="itemGridScrollViewer"about
            AutomationProperties.AutomationId="GridScrollViewer"
            Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"
            Margin="19 15 0 0" Padding="0 0 0 -15"
            Style="{StaticResource HorizontalScrollViewerStyle}">-->
        <Hub SectionHeaderClick="Hub_SectionHeaderClick" Margin="-20 -47 0 0" Background="Transparent" >
            <Hub.Header>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 -5 0 0">
                    <Image Source="/Resources/images/logo_Studio_WRT_0215.png" Height="70"/>
                    <!--<TextBlock Text="Studio for WinRT XAML" VerticalAlignment="Center" Margin="12 5 0 0" FontFamily="Segoe WP" FontWeight="Light" FontSize="48" Foreground="{ThemeResource ControlExplorerMainTitleThemeBrush}"/>-->
                </StackPanel>
            </Hub.Header>
            <HubSection VerticalContentAlignment="Stretch">
                <HubSection.Header>
                    <!--<Border Background="{ThemeResource ControlExplorerDarkStripeThemeBrush}" Height="70" Width="265" Margin="-20 -27 0 0" >
                        <TextBlock Text="About" RequestedTheme="Dark" Foreground="{ThemeResource ControlExplorerHubSectionHeaderThemeBrush}" Margin="20 17 0 0"/>
                    </Border>-->
                    <Border Height="70" Width="265" Margin="-20 -27 0 0" >
                        <TextBlock Text="About" RequestedTheme="Dark" Foreground="{ThemeResource ControlExplorerHubSectionHeaderThemeBrush}" Margin="20 17 0 0"/>
                    </Border>
                </HubSection.Header>
                <DataTemplate>
                    <!-- Left Panel -->
                    <Border Margin="0 25 0 0" Width="260" VerticalAlignment="Stretch">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="2015 v3" Foreground="Gray" FontSize="20" FontFamily="Segoe WP" FontWeight="Light" />

                            <TextBlock Text="UI and Data Visualization Controls for Windows Apps" Grid.Row="1" FontFamily="Segoe WP" FontWeight="SemiBold" FontSize="20" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}" TextWrapping="Wrap"/>
                            <TextBlock Margin="0 30" Grid.Row="2" FontFamily="Segoe WP" FontWeight="Light" FontSize="18" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}" TextWrapping="Wrap">
                    Get UI controls for data visualization, document viewing, text editing, and more inside ComponentOne Studio® WinRT Edition. 
                    <LineBreak/><LineBreak/>Designed for modern user interfaces and touch-first user experiences, the unique functionality of these controls gives you the power to build better and more compelling Windows Store apps.
                            </TextBlock>
                            <TextBlock Grid.Row="3"><Hyperlink NavigateUri="http://www.componentone.com/SuperProducts/StudioWinRTXAML/" FontSize="15" Foreground="{ThemeResource ControlExplorerHyperlinkThemeBrush}" FontWeight="Bold">Download C1 Studio WinRT Edition</Hyperlink></TextBlock>
                        </Grid>
                    </Border>
                </DataTemplate>
            </HubSection>
            <HubSection>
                <HubSection.Header>
                    <Border Height="70" Width="265" Margin="-20 -27 0 0" >
                        <TextBlock Text="What's New" RequestedTheme="Dark" Foreground="{ThemeResource ControlExplorerHubSectionHeaderThemeBrush}" Margin="20 17 0 0"/>
                    </Border>
                </HubSection.Header>
                <DataTemplate>
                    <local:C1GridView ItemsSource="{Binding Source={StaticResource newFeaturesViewSource}}" 
                                      x:Name="newFeaturesGridView"
                                      SelectionMode="None"
                                      IsItemClickEnabled="True"
                                      Margin="0 25 0 0"
                                      Padding="0"
                                      ItemClick="newFeaturesGridView_ItemClick">
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical" ItemWidth="170" ItemHeight="170" MaximumRowsOrColumns="3"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                <Setter Property="Margin" Value="0 0 15 15" />
                            </Style>
                        </GridView.ItemContainerStyle>
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Border BorderBrush="#FF2C383D" BorderThickness="2">
                                    <Grid>
                                        <!--<Grid.Background>
                                            <ImageBrush Stretch="Fill" ImageSource="{Binding ImageSource}"/>
                                        </Grid.Background>-->
                                        <Image Source="{Binding ImageSource}" Stretch="UniformToFill" />
                                        <Border VerticalAlignment="Bottom" Background="#FF2C383D">
                                            <TextBlock Text="{Binding Title}" Foreground="White" FontFamily="Segoe WP" FontSize="18" VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Margin="2"/>
                                        </Border>
                                    </Grid>
                                </Border>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                    </local:C1GridView>
                </DataTemplate>
            </HubSection>
            <HubSection x:Name="ControlsHub" Header="Controls" IsHeaderInteractive="True" >
                <HubSection.Resources>
                    <Style TargetType="HubSection">
                        <Setter Property="HorizontalAlignment" Value="Left"/>
                        <Setter Property="VerticalAlignment" Value="Stretch"/>
                        <Setter Property="HorizontalContentAlignment" Value="Left"/>
                        <Setter Property="VerticalContentAlignment" Value="Top"/>
                        <Setter Property="Padding" Value="40,40,40,44"/>
                        <Setter Property="IsTabStop" Value="False"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="HubSection">
                                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                        <Border.Resources>
                                            <ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
                                                <Grid Background="Transparent">
                                                    <VisualStateManager.VisualStateGroups>
                                                        <VisualStateGroup x:Name="CommonStates">
                                                            <VisualState x:Name="Normal"/>
                                                            <VisualState x:Name="PointerOver">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPointerOverForegroundThemeBrush}"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPointerOverForegroundThemeBrush}"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="Pressed">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPressedForegroundThemeBrush}"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPressedForegroundThemeBrush}"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="Disabled">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                        </VisualStateGroup>
                                                        <VisualStateGroup x:Name="FocusStates">
                                                            <VisualState x:Name="Focused">
                                                                <Storyboard>
                                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="Unfocused"/>
                                                            <VisualState x:Name="PointerFocused"/>
                                                        </VisualStateGroup>
                                                        <VisualStateGroup x:Name="IsHeaderInteractiveStates">
                                                            <VisualState x:Name="HeaderInteractive">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="HeaderNonInteractive"/>
                                                        </VisualStateGroup>
                                                        <VisualStateGroup x:Name="FlowDirectionStates">
                                                            <VisualState x:Name="LeftToRight"/>
                                                            <VisualState x:Name="RightToLeft">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="IsHeaderInteractiveMarker">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="  &#xE26C;"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                        </VisualStateGroup>
                                                    </VisualStateManager.VisualStateGroups>
                                                    <StackPanel Orientation="Horizontal">
                                                        <ContentPresenter x:Name="ContentPresenter" FontWeight="SemiLight" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" OpticalMarginAlignment="TrimSideBearings" TextLineBounds="Tight" VerticalAlignment="Center"/>
                                                        <TextBlock x:Name="IsHeaderInteractiveMarker" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" OpticalMarginAlignment="TrimSideBearings" TextLineBounds="Tight" Text=" &#xE26B;" Visibility="Collapsed" VerticalAlignment="Center"/>
                                                    </StackPanel>
                                                    <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Margin="-5" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                                                    <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Margin="-5" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                                                </Grid>
                                            </ControlTemplate>
                                        </Border.Resources>
                                        <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="*"/>
                                            </Grid.RowDefinitions>
                                            <Rectangle x:Name="HubHeaderPlaceholder" Grid.Row="0"/>
                                            <Button x:Name="HeaderButton" Foreground="{ThemeResource ControlExplorerIconThemeBrush}" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}" FontSize="{ThemeResource HubSectionHeaderThemeFontSize}" Margin="{ThemeResource HubSectionHeaderThemeMargin}" Grid.Row="1" Template="{StaticResource HeaderButtonTemplate}"/>
                                            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Row="2"/>
                                        </Grid>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </HubSection.Resources>
                <DataTemplate>
        <GridView 
            Margin="0 49 0 0" Padding="0" 
            RequestedTheme="Dark"
                x:Name="itemGridView"
                AutomationProperties.AutomationId="ItemsGridView"
                AutomationProperties.Name="Items"
                ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
               ItemTemplate="{StaticResource Standard165x165ItemTemplate}"
                SelectionMode="None"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick">
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
                                <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
                                <Setter Property="Background" Value="Transparent"/>
                                <Setter Property="TabNavigation" Value="Local"/>
                                <Setter Property="IsHoldingEnabled" Value="True"/>
                                <Setter Property="Margin" Value="0 0 15 15" />
                            </Style>
                        </GridView.ItemContainerStyle>
            <!-- MaxHeight="560"-->
            <!--<GridView.ItemContainerStyleSelector>
                <local:MyStyleSelector ItemContainerStyle="{StaticResource GridViewItemStyle1}"/>
            </GridView.ItemContainerStyleSelector>-->
        </GridView>
                </DataTemplate>
            </HubSection>
        </Hub>
        <!--</ScrollViewer>-->
        <!-- Back button and page title -->
        <!--<Grid>
            <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" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>-->



        <!-- Vertical scrolling list only used when snapped -->
        <!-- <ScrollViewer
            x:Name="itemListScrollViewer"
            AutomationProperties.AutomationId="ListScrollViewer"
            Grid.Row="1"
            Padding="0,-10,0,0"
            Visibility="Collapsed"
            Style="{StaticResource VerticalScrollViewerStyle}">

            <ListView
                x:Name="itemListView"
                AutomationProperties.AutomationId="ItemsListView"
                AutomationProperties.Name="Items"
                Margin="10,0,0,60"
                ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                ItemTemplate="{StaticResource Standard80WithIconItemTemplate}"
                SelectionMode="None"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick">
                <ListView.ItemContainerStyleSelector>
                    <local:MyStyleSelector />
                </ListView.ItemContainerStyleSelector>
            </ListView>
        </ScrollViewer>-->
        <!-- Footer -->
        <!--<Image Grid.Row="3" Grid.Column="1" Margin="0 40 0 0" HorizontalAlignment="Left" VerticalAlignment="Top"  Source="/Resources/images/c1logo.png" Width="245" Height="41"/>-->
        <StackPanel Orientation="Horizontal" Margin="20 20 20 20" VerticalAlignment="Bottom" HorizontalAlignment="Right">
            <TextBlock Text="Component"  FontFamily="Segoe WP" FontWeight="Light" FontSize="18" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}"/>
            <TextBlock Text="One" FontFamily="Segoe WP" FontWeight="ExtraBold" FontSize="18" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}"/>
            <TextBlock Text="a division of GrapeCity" FontFamily="Segoe WP" FontWeight="SemiBold" FontSize="12" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}" Margin="4 5 0 0"/>
            <!--<TextBlock Text="| © Copyright 2013, all Right Reserved" FontFamily="Segoe WP" FontWeight="Light" FontSize="10" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}" Margin="4 7 5 0"/>-->
        </StackPanel>
      
      <!-- -->
        <VisualStateManager.VisualStateGroups>

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

                <!-- The entire page 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>-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,0,86,56"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <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>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListScrollViewer" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridScrollViewer" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
