<Page
    x:Class="StockPortfolio.HomePage" RequestedTheme="Light"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:StockPortfolio"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  
    xmlns:c1tile="using:C1.Xaml.Tile"
   
    xmlns:data="using:StockPortfolio.Data"
    mc:Ignorable="d">
    
    <Page.Resources>
        <ResourceDictionary>
            <local:TileTemplateSelector x:Key="TileContentSelector"/>
            <local:TileItemContainerStyleSelector x:Key="TileItemContainerStyleSelector"/>
            <Storyboard x:Name="SelectionTransition">
                <DoubleAnimation BeginTime="0:0:0.2" Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
            </Storyboard>
            <Storyboard x:Name="LoadTransition">
                <DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
            </Storyboard>
        </ResourceDictionary>
    </Page.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Border Background="#FF61b9d6" Width="340" HorizontalAlignment="Left"/>
        <Border Background="#FF485B79" VerticalAlignment="Top" Height="105"/>
        <Border Background="#FFEDEDED" Height="70" VerticalAlignment="Top" Margin="0 105 0 0">
            <Border HorizontalAlignment="Left" Background="#FF4190AA" Height="70" Width="340"/>
        </Border>
        

        <Hub x:Name="Hub" x:Uid="Hub"  Margin="-20 -45 0 0" Background="Transparent" >
            <Hub.Header>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 0 0 0">
                    <Path Data="M68.103897,83.638016 L88.415581,83.638016 C90.395195,83.638016 92,85.242813 92,87.222427 L92,88.417236 C92,90.396858 90.395195,92.001648 88.415581,92.001648 L68.103897,92.001648 C66.124275,92.001648 64.519478,90.396858 64.519478,88.417236 L64.519478,87.222427 C64.519478,85.242813 66.124275,83.638016 68.103897,83.638016 z M35.844158,83.638016 L56.155842,83.638016 C58.135464,83.638016 59.740257,85.242813 59.740257,87.222427 L59.740257,88.417236 C59.740257,90.396858 58.135464,92.001648 56.155842,92.001648 L35.844158,92.001648 C33.86454,92.001648 32.259743,90.396858 32.259743,88.417236 L32.259743,87.222427 C32.259743,85.242813 33.86454,83.638016 35.844158,83.638016 z M3.5844152,83.638016 L23.896103,83.638016 C25.875721,83.638016 27.480518,85.242813 27.480518,87.222427 L27.480518,88.417236 C27.480518,90.396851 25.875721,92.001648 23.896103,92.001648 L3.5844152,92.001648 C1.6047969,92.001648 -4.9705568E-07,90.396851 1.1368684E-13,88.417236 L1.1368684E-13,87.222427 C-4.9705568E-07,85.242813 1.6047969,83.638016 3.5844152,83.638016 z M68.103897,72.884766 L88.415581,72.884766 C90.395195,72.884766 92,74.489563 92,76.469177 L92,77.663986 C92,79.6436 90.395195,81.248405 88.415581,81.248398 L68.103897,81.248398 C66.124275,81.248405 64.519478,79.6436 64.519478,77.663986 L64.519478,76.469177 C64.519478,74.489563 66.124275,72.884766 68.103897,72.884766 z M35.844158,72.884766 L56.155842,72.884766 C58.135464,72.884766 59.740257,74.489563 59.740257,76.469177 L59.740257,77.663986 C59.740257,79.6436 58.135464,81.248405 56.155842,81.248405 L35.844158,81.248405 C33.86454,81.248405 32.259743,79.6436 32.259743,77.663986 L32.259743,76.469177 C32.259743,74.489563 33.86454,72.884766 35.844158,72.884766 z M3.5844152,72.884766 L23.896103,72.884766 C25.875721,72.884766 27.480518,74.489563 27.480518,76.469177 L27.480518,77.663986 C27.480518,79.6436 25.875721,81.248405 23.896103,81.248405 L3.5844152,81.248405 C1.6047972,81.248405 -2.5990755E-07,79.6436 1.1368684E-13,77.663986 L1.1368684E-13,76.469177 C-2.5990755E-07,74.489563 1.6047972,72.884766 3.5844152,72.884766 z M68.103897,62.131523 L88.415581,62.131523 C90.395195,62.131523 92,63.73632 92,65.715942 L92,66.910744 C92,68.890366 90.395195,70.495155 88.415581,70.495163 L68.103897,70.495163 C66.124275,70.495155 64.519478,68.890366 64.519478,66.910744 L64.519478,65.715942 C64.519478,63.73632 66.124275,62.131523 68.103897,62.131523 z M35.844158,62.131523 L56.155842,62.131523 C58.135464,62.131523 59.740257,63.73632 59.740257,65.715942 L59.740257,66.910744 C59.740257,68.890366 58.135464,70.495155 56.155842,70.495163 L35.844158,70.495163 C33.86454,70.495155 32.259743,68.890366 32.259743,66.910744 L32.259743,65.715942 C32.259743,63.73632 33.86454,62.131523 35.844158,62.131523 z M68.103897,51.378273 L88.415581,51.378273 C90.395195,51.378273 92,52.98307 92,54.962688 L92,56.157494 C92,58.137112 90.395195,59.741909 88.415581,59.741909 L68.103897,59.741909 C66.124275,59.741909 64.519478,58.137112 64.519478,56.157494 L64.519478,54.962688 C64.519478,52.98307 66.124275,51.378273 68.103897,51.378273 z M35.844158,51.378273 L56.155842,51.378273 C58.135464,51.378273 59.740257,52.98307 59.740257,54.962688 L59.740257,56.157494 C59.740257,58.137112 58.135464,59.741909 56.155842,59.741909 L35.844158,59.741909 C33.86454,59.741909 32.259743,58.137112 32.259743,56.157494 L32.259743,54.962688 C32.259743,52.98307 33.86454,51.378273 35.844158,51.378273 z M12.463983,47.649319 L15.004681,47.649319 L15.004681,49.242119 L15.094544,49.254524 C15.938168,49.384098 16.769829,49.656204 17.589531,50.070839 L16.391613,52.320259 C15.737559,51.825821 15.077838,51.578606 14.412445,51.578606 C14.091088,51.578606 13.803514,51.657684 13.549731,51.815845 C13.262204,51.995827 13.118442,52.23579 13.118442,52.535728 C13.118442,52.830151 13.307153,53.083694 13.684577,53.29636 C13.853647,53.394585 14.360688,53.56366 15.205696,53.803574 C16.264854,54.102753 17.019747,54.527065 17.470369,55.076515 C17.859131,55.544296 18.053511,56.145363 18.053511,56.879723 C18.053511,58.761795 17.19866,59.988426 15.48896,60.559616 C15.339925,60.609936 15.188078,60.653969 15.033418,60.691708 L15.004681,60.698402 L15.004681,62.386047 L12.463985,62.386047 L12.463985,60.775928 L12.375455,60.761623 C11.382701,60.591377 10.443697,60.203598 9.5584431,59.598286 L10.840717,57.267361 C11.742405,58.055202 12.624364,58.44912 13.486596,58.44912 C13.875442,58.44912 14.205149,58.361298 14.475718,58.185646 C14.791277,57.988091 14.949057,57.708191 14.949056,57.345932 C14.949057,57.016617 14.774405,56.742188 14.425099,56.522648 C14.165956,56.357948 13.729351,56.190529 13.115277,56.020397 C12.371678,55.808754 11.904095,55.66222 11.712527,55.580803 C11.408303,55.456005 11.149159,55.309475 10.935097,55.141209 C10.321024,54.652798 10.013988,53.914749 10.013988,52.927059 C10.013988,51.895905 10.331745,51.041164 10.967257,50.362839 C11.384841,49.914093 11.88072,49.591553 12.454897,49.395226 L12.463983,49.39225 z M13.740259,46.599052 C8.791214,46.599052 4.7792196,50.611046 4.7792206,55.560093 C4.7792196,60.50914 8.791214,64.521126 13.740259,64.521126 C18.689304,64.521126 22.701298,60.50914 22.701298,55.560093 C22.701298,50.611046 18.689304,46.599052 13.740259,46.599052 z M13.740259,41.819832 C21.328794,41.819832 27.480518,47.971558 27.480518,55.560093 C27.480518,63.148628 21.328794,69.300354 13.740259,69.300354 C6.1517234,69.300354 -2.5990755E-07,63.148628 1.1368684E-13,55.560093 C-2.5990755E-07,47.971558 6.1517234,41.819832 13.740259,41.819832 z M68.103897,40.625031 L88.415581,40.625031 C90.395195,40.625031 92,42.229828 92,44.209442 L92,45.404251 C92,47.383865 90.395195,48.988663 88.415581,48.988663 L68.103897,48.988663 C66.124275,48.988663 64.519478,47.383865 64.519478,45.404251 L64.519478,44.209442 C64.519478,42.229828 66.124275,40.625031 68.103897,40.625031 z M68.103897,29.871782 L88.415581,29.871782 C90.395195,29.871782 92,31.476582 92,33.4562 L92,34.651001 C92,36.630619 90.395195,38.23542 88.415581,38.23542 L68.103897,38.23542 C66.124275,38.23542 64.519478,36.630619 64.519478,34.651001 L64.519478,33.4562 C64.519478,31.476582 66.124275,29.871782 68.103897,29.871782 z M60.800514,0 L80.496674,3.4729099 L77.023659,23.169056 L71.827805,15.748609 L42.342659,36.394333 L41.532398,35.237156 L41.438747,35.302731 L33.958916,24.620422 L19.255308,34.916 L12.945984,25.905352 L36.60479,9.3392773 L36.695831,9.4692974 L36.751328,9.430439 L44.950382,21.1399 L65.518486,6.7379608 z" Fill="White" Height="55" Stretch="Uniform" />
                    <TextBlock Text="Stock Portfolio Manager" VerticalAlignment="Center" Margin="12 5 0 0" FontFamily="Segoe WP" FontWeight="Light" FontSize="48" Foreground="White"/>
                </StackPanel>
            </Hub.Header>
            <HubSection VerticalContentAlignment="Stretch">
                <HubSection.Header>
                    <TextBlock Text="About" RequestedTheme="Dark" Foreground="{ThemeResource ControlExplorerHubSectionHeaderThemeBrush}" />
                </HubSection.Header>
                <DataTemplate>
                    <!-- Left Panel -->
                    <local:AboutPage HeaderVisbility="Collapsed" Width="260">
                        <local:AboutPage.RenderTransform>
                            <CompositeTransform ScaleX="1.2" ScaleY="1.1"/>
                        </local:AboutPage.RenderTransform>
                    </local:AboutPage>
                </DataTemplate>
            </HubSection>
            <HubSection x:Uid="HubSection1"  >
                <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>
                <HubSection.Header>
                    <TextBlock Text="Function group" Foreground="#FF444444"/>
                </HubSection.Header>
                <DataTemplate>
                    <GridView ItemsSource="{Binding Groups}" Name="gridView" ItemContainerStyleSelector="{StaticResource TileItemContainerStyleSelector}"
                          IsItemClickEnabled="True"     ItemClick="gridView_ItemClick"    ItemTemplateSelector="{StaticResource TileContentSelector}"
                                SelectionMode="None" >
                        <GridView.RenderTransform>
                            <CompositeTransform ScaleX="1.5" ScaleY="1.5"/>
                        </GridView.RenderTransform>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"  ItemHeight="180" ItemWidth="180"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>

                    </GridView>
                </DataTemplate>
            </HubSection>

            <!--<HubSection x:Uid="HubSection2" Header="SECTION 2" Width="Auto"
                         DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
                <DataTemplate>
                    <GridView
                        Margin="0,9.5,0,0"
                        ItemsSource="{Binding Items}"
                        AutomationProperties.AutomationId="ItemGridView"
                        AutomationProperties.Name="Items In Group"
                        ItemTemplate="{StaticResource Standard200x180TileItemTemplate}"
                        SelectionMode="None"
                        IsItemClickEnabled="True"
                        ItemClick="ItemView_ItemClick"
                        ContinuumNavigationTransitionInfo.ExitElementContainer="True">
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </DataTemplate>
            </HubSection>

            <HubSection x:Uid="HubSection3" Header="SECTION 3"
                        DataContext="{Binding Groups[1]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
                <DataTemplate>
                    <ListView 
                        AutomationProperties.AutomationId="ItemListViewSection3"
                        AutomationProperties.Name="Items In Group"
                        SelectionMode="None"
                        IsItemClickEnabled="True"
                        ItemsSource="{Binding Items}"
                        ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"
                        ItemClick="ItemView_ItemClick"
                        ContinuumNavigationTransitionInfo.ExitElementContainer="True">
                    </ListView>
                </DataTemplate>
            </HubSection>-->

        </Hub>
        <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>
    </Grid>
    
</Page>