﻿<UserControl x:Class="WinStore.UX.Controls.HamburgerControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="using:WinStore.UX.Controls"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             d:DesignHeight="300"
             d:DesignWidth="120"
             mc:Ignorable="d">

  <UserControl.Resources>
    <DataTemplate x:Key="NavItemTemplate">
      <local:HamburgerNavItemView />
    </DataTemplate>
    <Style x:Key="CancelTextCaretStyle" TargetType="TextBlock">
      <Setter Property="Text" Value="&#xE015;" />
    </Style>

    <Style x:Key="CancelTextCaretUpStyle" TargetType="TextBlock">
      <Setter Property="Text" Value="&#xE098;" />
    </Style>

    <Style x:Key="HamburgerListViewStyle" TargetType="ListView" BasedOn="{StaticResource VerticalListViewBaseStyle}">
      <Setter Property="IsTabStop" Value="False"/>
      <Setter Property="TabNavigation" Value="Once"/>
      <Setter Property="IsSwipeEnabled" Value="True"/>
      <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
      <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
      <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
      <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
      <Setter Property="ItemContainerTransitions">
        <Setter.Value>
          <TransitionCollection>
            <AddDeleteThemeTransition/>
            <ContentThemeTransition/>
            <ReorderThemeTransition/>
            <EntranceThemeTransition IsStaggeringEnabled="False"/>
          </TransitionCollection>
        </Setter.Value>
      </Setter>
      <Setter Property="ItemsPanel">
        <Setter.Value>
          <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Vertical"/>
          </ItemsPanelTemplate>
        </Setter.Value>
      </Setter>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListView">
            <Border Background="{TemplateBinding Background}">
              <ScrollViewer x:Name="ScrollViewer" Padding="0"
                            AutomationProperties.AccessibilityView="Raw"
                            BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                            IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                            IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                            IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                            IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                            IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                            TabNavigation="{TemplateBinding TabNavigation}"
                            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                            ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                <ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}"
                                FooterTemplate="{TemplateBinding FooterTemplate}"
                                Footer="{TemplateBinding Footer}"
                                HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                Header="{TemplateBinding Header}"
                                HeaderTransitions="{TemplateBinding HeaderTransitions}"/>
              </ScrollViewer>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <Style x:Key="HamburgerItemStyle" TargetType="ListViewItem" BasedOn="{StaticResource DefaultListViewBaseItemContainerStyle}">
      <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
      <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
      <Setter Property="Background" Value="Transparent"/>
      <Setter Property="TabNavigation" Value="Local"/>
      <Setter Property="IsHoldingEnabled" Value="True"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListViewItem">
            <Border x:Name="OuterContainer">
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal"/>
                  <VisualState x:Name="PointerOver">
                    <Storyboard>
                      <DoubleAnimation Storyboard.TargetName="PointerOverBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HamburgerHoverForegroundBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Pressed">
                  </VisualState>
                  <VisualState x:Name="PointerOverPressed">
                    <Storyboard>
                      <DoubleAnimation Storyboard.TargetName="PointerOverBorder"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HamburgerHoverForegroundBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Disabled">
                    <Storyboard>
                      <DoubleAnimation Storyboard.TargetName="contentPresenter"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                  <VisualState x:Name="Focused">
                    <Storyboard>
                      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual" />
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Unfocused"/>
                  <VisualState x:Name="PointerFocused"/>
                </VisualStateGroup>

                <VisualStateGroup x:Name="DataVirtualizationStates">
                  <VisualState x:Name="DataAvailable"/>
                  <VisualState x:Name="DataPlaceholder">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock"
                                                                   Storyboard.TargetProperty="Visibility"
                                                                   Duration="0">
                        <DiscreteObjectKeyFrame KeyTime="0">
                          <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                          </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect"
                                                                   Storyboard.TargetProperty="Visibility"
                                                                   Duration="0">
                        <DiscreteObjectKeyFrame KeyTime="0">
                          <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                          </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Grid x:Name="ContentContainer">
                <Rectangle x:Name="PointerOverBorder" IsHitTestVisible="False" Opacity="0" Fill="{ThemeResource HamburgerHoverBrush}" />
                <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" StrokeThickness="2" Stroke="{ThemeResource ListViewItemFocusBorderThemeBrush}" />
                <Border x:Name="ContentBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                  <Grid>
                    <ContentPresenter x:Name="contentPresenter"
                                                    ContentTransitions="{TemplateBinding ContentTransitions}"
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                    Margin="{TemplateBinding Padding}" />
                    <!-- The 'Xg' text simulates the amount of space one line of text will occupy.
                                    In the DataPlaceholder state, the Content is not loaded yet so we
                                    approximate the size of the item using placeholder text. -->
                    <TextBlock x:Name="PlaceholderTextBlock"
                                            Visibility="Collapsed"
                                            Text="Xg"
                                            Foreground="{x:Null}"
                                            Margin="{TemplateBinding Padding}"
                                            IsHitTestVisible="False"
                                            AutomationProperties.AccessibilityView="Raw"/>
                    <Rectangle x:Name="PlaceholderRect"
                                            Visibility="Collapsed"
                                            Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"/>
                  </Grid>
                </Border>
              </Grid>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

  </UserControl.Resources>

    <Grid Background="{ThemeResource HamburgerBackgroundBrush}" Width="256" HorizontalAlignment="Left">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Border BorderBrush="{ThemeResource HamburgerBorderBrush}" BorderThickness="1" Grid.RowSpan="2"/>
        <ScrollViewer HorizontalScrollMode="Disabled" VerticalScrollMode="Auto" VerticalScrollBarVisibility="Auto">
            <StackPanel>
                <ListView x:ConnectionId='5' x:Name="_navItemListView"
                                                                                                 
                            IsItemClickEnabled="True"
                                                                   
                            ItemContainerStyle="{StaticResource HamburgerItemStyle}"
                            Style="{StaticResource HamburgerListViewStyle}"
                            ItemTemplate="{StaticResource NavItemTemplate}"/>
                <Rectangle  Height="1"
                            Margin="12"
                            Fill="{ThemeResource BodyBackgroundStroke}"/>
                <ListView x:ConnectionId='6' x:Name="_navOtherItemsListView"
					        IsItemClickEnabled="True"
                            ItemContainerStyle="{StaticResource HamburgerItemStyle}"
                            Style="{StaticResource HamburgerListViewStyle}">

                    <Button x:ConnectionId='7' x:Name="_settingsButton"
					        BorderThickness="0"
                            Height="48"
					                                    
					        x:Uid="SettingsButtonLabel"
                            Style="{StaticResource HamburgerButtonStyle}"
					        AutomationProperties.AutomationId="HamburgerSettingsButton" />

                    <Button x:ConnectionId='8' x:Name="_downloadsButton"
                            BorderThickness="0"
                            Height="48"
                                                           
                            Visibility="Collapsed"
                            x:Uid="DownloadSceneButton"
                            Style="{StaticResource HamburgerButtonStyle}"
                            AutomationProperties.AutomationId="HamburgerDownloadsButton" />

                    <Button x:ConnectionId='9' x:Name="_myLibraryButton"
                            BorderThickness="0"
                            Height="48"
                                                           
                            x:Uid="MyLibraryButton"
                            Style="{StaticResource HamburgerButtonStyle}"
                            AutomationProperties.AutomationId="MyLibraryButton" />

                    <HyperlinkButton x:ConnectionId='10'
                            x:Name="PurchasedFlyoutButton"
                            AutomationProperties.AutomationId="PurchasedFlyoutButton"
                            NavigateUri="http://go.microsoft.com/fwlink/?LinkId=524302"
                            HorizontalAlignment="Left"
                            Foreground="{ThemeResource HamburgerForegroundBrush}"
                            Height="48"
                            Margin="12,0,0,0"
                            Visibility="Collapsed"
                                                         
                            x:Uid="PurchasedButton" />
                </ListView>
                
            </StackPanel>
        </ScrollViewer>
        <Rectangle  Height="1"
                    Grid.Row="1"
                    Margin="12,0,12,0"
                    Fill="{ThemeResource BodyBackgroundStroke}"/>
        <StackPanel x:ConnectionId='1' Name="_identityStackPanel"
                    Grid.Row="2"
                    AutomationProperties.AutomationId="IdentityStackPanel"
                    Orientation="Horizontal"
					Margin="12,12,0,16">
            <Ellipse x:ConnectionId='2' x:Name="_profilePicture"
                        Width="30"
                        Height="30"
                        Fill="{StaticResource AccountImageBrush}"
                        VerticalAlignment="Center"/>
            <Button x:ConnectionId='3' x:Name="_userButton"
						BorderThickness="0"
						                         >
            <TextBlock x:ConnectionId='4' x:Name="_userName"
					    VerticalAlignment="Center"
					    AutomationProperties.AutomationId="_userName"
					    Foreground="{ThemeResource HamburgerForegroundBrush}"
					    Style="{StaticResource SubtitleTextBlockStyle}"
					    TextTrimming="CharacterEllipsis" />
            </Button>
        </StackPanel>
    </Grid>
</UserControl>

