﻿<pm:LayoutControl
    x:Class="WinStore.UX.Controls.NavigationControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:WinStore.UX.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:datamodel="using:WinStore.DataModel"
    xmlns:local="using:WinStore.UX.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pm="using:WinStore.UX.PresentationManifest"
    d:DesignHeight="88"
    d:DesignWidth="500"
    mc:Ignorable="d">

    <pm:LayoutControl.Resources>

        <DataTemplate x:Key="NavItemTemplate">
			<local:NavItemView HorizontalAlignment="Center" VerticalAlignment="Center" Margin="12,0"/>
        </DataTemplate>
    </pm:LayoutControl.Resources>

    <Grid>
        <VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:ConnectionId='1' x:Name="ReflowStates">
				<VisualState x:ConnectionId='12' x:Name="Narrow">
					<!--Empty so we can go back to the default values.-->
				</VisualState>
				<VisualState x:ConnectionId='13' x:Name="Wide">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchSlot" Storyboard.TargetProperty="Margin">
							<DiscreteObjectKeyFrame KeyTime="0" Value="14,0,8,0" />
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
			<VisualStateGroup x:ConnectionId='2' x:Name="PopUpStates">
				<VisualState x:ConnectionId='10' x:Name="PopUpOpen">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_navItemListView" Storyboard.TargetProperty="IsEnabled">
							<DiscreteObjectKeyFrame KeyTime="0" Value="False" />
						</ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="_navItemListView" Storyboard.TargetProperty="Opacity">
							<DiscreteObjectKeyFrame KeyTime="0" Value="0.2" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_searchPopup" Storyboard.TargetProperty="Visibility">
							<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="_searchPopup" Storyboard.TargetProperty="IsOpen">
							<DiscreteObjectKeyFrame KeyTime="0" Value="True" />
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
                <VisualState x:ConnectionId='11' x:Name="PopUpClosed" />
			</VisualStateGroup>

            <VisualStateGroup x:ConnectionId='3' x:Name="VisualThemes">
                <VisualState x:ConnectionId='7' x:Name="Dark" />
                <VisualState x:ConnectionId='8' x:Name="Light" />
                <VisualState x:ConnectionId='9' x:Name="HighContrast">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="_userprofilePicture">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="27" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="_userprofilePicture">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="27" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="_userprofilePicture">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PrimaryForegroundBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeThickness" Storyboard.TargetName="_userprofilePicture">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="_profilePicture">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PrimaryForegroundBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeThickness" Storyboard.TargetName="_profilePicture">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:ConnectionId='4' x:Name="ProfilePictureStates">
                <VisualState x:ConnectionId='5' x:Name="HidePicture" />
                <VisualState x:ConnectionId='6' x:Name="ShowPicture">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="_userprofilePicture">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="_userProfileButtonGlyph">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Padding" Storyboard.TargetName="UserProfileButton">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="12,0,12,0" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <!--  Wide Layout  -->
        <Grid x:ConnectionId='14' x:Name="_wide" Visibility="Collapsed" Height="{StaticResource NavigationControlWideHeight}">
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition Height="8" />
                <RowDefinition Height="48" />
            </Grid.RowDefinitions>
            
            <Rectangle Grid.RowSpan="3" Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}" Opacity="{StaticResource NavigationBarOpacity}" />
            
            <!--  TODO: mlijanto: Standardize icon sizing through shared styles  -->
            <Button x:ConnectionId='22'
                x:Name="_navBackButton"
                AutomationProperties.AutomationId="BackButton"
                Width="40"
                Height="40"
                Margin="0"
                Background="{ThemeResource NavBackButtonBackgroundBrush}"
                BorderThickness="0"
                                           
                FontFamily="Segoe UI Symbol"
                FontSize="18"
                FontWeight="Normal"
                Foreground="{ThemeResource NavBackButtonForegroundBrush}"
                Padding="0"
                x:Uid="BackButton" />

            <Grid x:ConnectionId='23' x:Name="_navPane" AutomationProperties.AutomationId="NavigationPane" Grid.Row="2" >
                <Grid.ColumnDefinitions>
                    <!-- The code behind uses the width of these controls to reflow the Nav Pane as the window size changes. -->
                    <ColumnDefinition x:ConnectionId='24' x:Name="_leftMarginColumn" Width="12" />
                    <ColumnDefinition />
                    <ColumnDefinition x:ConnectionId='25' x:Name="_buttonPanelColumn" Width="Auto" />
                </Grid.ColumnDefinitions>

                <ListView x:ConnectionId='26'
                    x:Name="_navItemListView"
                    AutomationProperties.AutomationId="StoreTopLevelCategories"
                    Grid.Column="1"
                    x:Uid="NavItemsListView"
                                                                                       
                    IsItemClickEnabled="True"
                                                         
                    Margin="0,0,0,2"
					Style="{StaticResource NavigationListViewBaseStyle}"
                    ItemContainerStyle="{StaticResource NavItemContainerStyle}"
                    ItemTemplate="{StaticResource NavItemTemplate}" >
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsStackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ListView>


                <Popup x:ConnectionId='27' x:Name="_searchPopup"
                    AutomationProperties.AutomationId="SearchPopUp"
                    Grid.Column="1"
                    Grid.ColumnSpan="2"
                    Visibility="Collapsed"
					MinWidth="250"
					MaxWidth="400"
					HorizontalAlignment="Right"
					VerticalAlignment="Center"
					Margin="14,0,22,33"/>


                <Grid x:ConnectionId='28' x:Name="_buttonsGrid" AutomationProperties.AutomationId="ButtonsGrid" Grid.Column="2" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition x:ConnectionId='29' x:Name="_searchSlotColumn" Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <!--The Width="Auto" here is to override the value (48) set by the Style-->
                    <Button x:ConnectionId='30'
                        Width="Auto"
                        x:Name="_downloadSceneButton"
                        AutomationProperties.AutomationId="DownloadScenceButton"
                        Style="{StaticResource NavIconButtonStyle}"
                        MinWidth="48"
                        MaxWidth="68"
                                                          
                        x:Uid="DownloadSceneButtonGlyph"
                        Visibility="Collapsed">
                        <StackPanel Orientation="Horizontal">
                            <controls:StoreMdl2FontIcon GlyphName="Download" GlyphSize="Default" VerticalAlignment="Center" Margin="0,0,0,1" />
                            <TextBlock x:ConnectionId='49' x:Name="_downloadCountBlock" AutomationProperties.AutomationId="DownloadCountBlock" Style="{StaticResource BodyTextBlockStyle}" Margin="0,3,0,0" />
                        </StackPanel>
                    </Button>

                    <Grid Grid.Column="1">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Button x:ConnectionId='33'
                            x:Name="UserProfileButton"
                            AutomationProperties.AutomationId="UserProfileButton"
                            Style="{StaticResource NavIconButtonStyle}"
                                                           
                            x:Uid="UserProfileButton">
                            <Grid>
                                <controls:SegoeMvr2FontIcon x:ConnectionId='47' x:Name="_userProfileButtonGlyph" GlyphName="Contact" GlyphSize="Default" />
                            <Ellipse x:ConnectionId='48'
                                x:Name="_userprofilePicture"
                                    Visibility="Collapsed"
                                AutomationProperties.AutomationId="UserProfilePicture"
                                    Width="24"
                                    Height="24"
                                Fill="{StaticResource AccountImageBrush}"
                                FlowDirection="LeftToRight"
                                AutomationProperties.AccessibilityView="Raw"/>
                            </Grid>
                        </Button>
                        <Popup x:ConnectionId='34'
                            x:Name="_userProfilePopup"
                            AutomationProperties.AutomationId="UserProfilePopUp"
                            Grid.Row="1"
                            HorizontalAlignment="Right"
                            HorizontalOffset="-120"
                            VerticalOffset="-4"
                            IsLightDismissEnabled="True">
                            <Border Background="{ThemeResource ProfilePopupBackgroundBrush}" BorderBrush="{ThemeResource AppThemePrimaryBrush}" BorderThickness="1">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="20" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="24" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="24" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="24" />
                                    </Grid.ColumnDefinitions>

                                    <StackPanel x:ConnectionId='35'
                                        Name="_userDetailsListView"
                                        AutomationProperties.AutomationId="UserPopUpDetails"
                                        Grid.Column="1"
                                        Grid.Row="1">

                                        <StackPanel Orientation="Horizontal" Margin="0,4">
                                            <Ellipse x:ConnectionId='43'
                                                x:Name="_profilePicture"
                                                AutomationProperties.AutomationId="UserPopUpPicture"
                                                Visibility="Collapsed"
                                                Width="32"
                                                Height="32"
                                                Margin="0,0,12,0"
                                                Fill="{StaticResource AccountImageBrush}"
                                                FlowDirection="LeftToRight"
                                                AutomationProperties.AccessibilityView="Raw"/>
                                            <StackPanel x:ConnectionId='44' x:Name="_identityGrid" AutomationProperties.AutomationId="UserPopUpIdentity" Orientation="Vertical" Visibility="Collapsed">
                                                <TextBlock x:ConnectionId='45'
                                                    x:Name="_userName"
                                                    AutomationProperties.AutomationId="UserPopUpIdentityName"
                                                    Style="{StaticResource BodyTextBlockStyle}"
                                                    MaxWidth="200"
                                                    VerticalAlignment="Center"
                                                    Foreground="{ThemeResource NavItemForegroundBrush}"
                                                    TextTrimming="CharacterEllipsis" />
                                                <TextBlock x:ConnectionId='46'
                                                    x:Name="_userEmailAddress"
                                                    AutomationProperties.AutomationId="UserPopUpIdentityEmailAddress"
                                                    Style="{StaticResource CaptionTextBlockStyle}"
                                                    MaxWidth="200"
                                                    VerticalAlignment="Center"
                                                    Foreground="{ThemeResource SecondaryForegroundLightBrush}"
                                                                                               
                                                    TextTrimming="CharacterEllipsis"/>
                                            </StackPanel>
                                        </StackPanel>

                                        <HyperlinkButton x:ConnectionId='36'
                                            x:Name="_signInButton"
                                            AutomationProperties.AutomationId="SignInButton"
                                            Visibility="Collapsed"
                                                                      >
                                            <StackPanel Orientation="Horizontal" Background="Transparent">
                                                <controls:SegoeMvr2FontIcon 
                                                    GlyphName="Contact" 
                                                    GlyphSize="Default"
                                                    VerticalAlignment="Center"
                                                    Foreground="{ThemeResource NavItemForegroundBrush}" />
                                                <TextBlock x:ConnectionId='42'
													                          x:Name="_signInText"
                                                    Margin="5,0,0,0"
                                                    Style="{StaticResource CaptionTextBlockStyle}"
                                                    FontSize="{StaticResource BodyFontSize}"
                                                    Foreground="{ThemeResource NavItemForegroundBrush}"
                                                    TextWrapping="NoWrap"
                                                    x:Uid="SignInButton"/>
                                            </StackPanel>
                                        </HyperlinkButton>

                                        <Rectangle
                                            Margin="0,18"
                                            Height="1"
                                            Fill="{ThemeResource AppThemePrimaryBrush}"
                                            AutomationProperties.AccessibilityView="Raw"/>

                                        <HyperlinkButton x:ConnectionId='37'
                                            x:Name="_settingsButton"
                                            AutomationProperties.AutomationId="SettingsButton"
                                            Style="{StaticResource HyperlinkButtonStyle}"
                                            FontSize="{StaticResource BodyFontSize}"
                                            Foreground="{ThemeResource NavItemForegroundBrush}"        
                                                                        
                                            x:Uid="SettingsButtonLabel" />

                                        <HyperlinkButton x:ConnectionId='38'
                                            x:Name="PurchasedFlyoutButton"
                                            AutomationProperties.AutomationId="PurchasedFlyoutButton"
                                            NavigateUri="http://go.microsoft.com/fwlink/?LinkId=524302"
                                            Style="{StaticResource HyperlinkButtonStyle}"
                                            FontSize="{StaticResource BodyFontSize}"
                                            Foreground="{ThemeResource NavItemForegroundBrush}"
                                            Visibility="Collapsed"
                                            Margin="0,10,0,0"
                                            x:Uid="PurchasedButton" />

                                        <HyperlinkButton x:ConnectionId='39'
                                            x:Name="MyLibraryFlyoutButton"
                                            AutomationProperties.AutomationId="MyLibraryFlyoutButton"
                                            Style="{StaticResource HyperlinkButtonStyle}"
                                            FontSize="{StaticResource BodyFontSize}"
                                            Foreground="{ThemeResource NavItemForegroundBrush}"
                                            Margin="0,10,0,0"
                                                                   
                                            x:Uid="MyLibraryButton" />
                                        
                                        <HyperlinkButton x:ConnectionId='40'
                                              x:Name="DownloadFlyoutButton"
                                              AutomationProperties.AutomationId="DownloadFlyoutButton"
                                              Style="{StaticResource HyperlinkButtonStyle}"
                                              FontSize="{StaticResource BodyFontSize}"
                                            Foreground="{ThemeResource NavItemForegroundBrush}"
                                              Visibility="Collapsed"
                                              Margin="0,10,0,0"
                                                                                
                                              x:Uid="DownloadSceneButton" />

                                        <HyperlinkButton x:ConnectionId='41'
                                            x:Name="SignOutFlyoutButton"
                                            AutomationProperties.AutomationId="SignOutFlyoutButton"
                                            Style="{StaticResource HyperlinkButtonStyle}"
                                            FontSize="{StaticResource BodyFontSize}"
                                            Foreground="{ThemeResource NavItemForegroundBrush}"
                                            Margin="0,10,0,0"
                                            Visibility="Collapsed"
                                                                 
                                            x:Uid="SignOutFlyoutButton" />
                                    </StackPanel>
                                </Grid>
                            </Border>
                        </Popup>
                    </Grid>

                    <pm:Slot x:ConnectionId='31'
                        x:Name="SearchSlot"
                        Grid.Column="3"
                        MinWidth="250"
                        VerticalAlignment="Center"
                        IsTabStop="False"
						Margin="14,0,8,8"
                                                           />

                    <Button x:ConnectionId='32'
                        x:Name="NavSearchButton"
                        x:Uid="SearchButton"
                        Style="{StaticResource NavIconButtonStyle}"
                        Grid.Column="3"
                                                     
                        Visibility="Collapsed">
                        <controls:StoreMdl2FontIcon GlyphName="Search" GlyphSize="Default" />
                    </Button>
                </Grid>
            </Grid>
        </Grid>

        <!--  Narrow layout  -->
        <Grid x:ConnectionId='15' x:Name="_narrow" Height="{StaticResource NavigationControlNarrowHeight}" Visibility="Collapsed">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Rectangle Grid.ColumnSpan="4" Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}" Opacity="{StaticResource NavigationBarOpacity}" />
            
            <Button x:ConnectionId='17' x:Name="_hamburger" Style="{StaticResource NavIconButtonStyle}"                         x:Uid="HamburgerButtonLabel">
                <controls:StoreMdl2FontIcon GlyphName="GlobalNavButton" GlyphSize="Custom" FontSize="20" />
            </Button>

            <TextBlock x:ConnectionId='18'
                x:Name="_titleBar"
                AutomationProperties.AutomationId="HamburgerHomeTitle"
                Style="{ThemeResource SubtitleTextBlockStyle}"
                Grid.Column="1"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Foreground="{ThemeResource NavItemForegroundBrush}"
                TextTrimming="CharacterEllipsis" />

            <!--The Width="Auto" here is to override the value (48) set by the Style-->
            <Button x:ConnectionId='19'
                Width="Auto"
              x:Name="_downloadSceneButtonNarrow"
              AutomationProperties.AutomationId="DownloadScenceButtonNarrow"
              Style="{StaticResource NavIconButtonStyle}"
              Grid.Column="2"
                MinWidth="48"
                MaxWidth="68"
                                                
              x:Uid="DownloadSceneButtonGlyph"
              Visibility="Collapsed">
                <StackPanel Orientation="Horizontal">
                    <controls:StoreMdl2FontIcon GlyphName="Download" GlyphSize="Default" VerticalAlignment="Center" Margin="0,0,0,1" />
                    <TextBlock x:ConnectionId='21' x:Name="_downloadCountBlockNarrow" AutomationProperties.AutomationId="DownloadCountBlock" Style="{StaticResource BodyTextBlockStyle}" Margin="0,3,0,0" />
                </StackPanel>
            </Button>
            <Button x:ConnectionId='20'
                x:Name="_searchButton"
                Style="{StaticResource NavIconButtonStyle}"
                Grid.Column="3"
                                                   
                x:Uid="SearchButton">
                <controls:StoreMdl2FontIcon GlyphName="Search" GlyphSize="Default" />
            </Button>

        </Grid>
		<Grid x:ConnectionId='16' x:Name="_narrowSearch" Height="0"  />
    </Grid>
</pm:LayoutControl>

