NavigationView.xaml

<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:contract4Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,4)"
    xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives"
    xmlns:local="using:Microsoft.UI.Xaml.Controls"
    xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
    xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)"
    xmlns:primitiveContract7Present="using:Microsoft.UI.Xaml.Controls.Primitives?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)">

    <Style TargetType="local:NavigationView">
        <Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="CompactPaneLength" Value="{ThemeResource NavigationViewCompactPaneLength}" />
        <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:NavigationView">
                    <Grid x:Name="RootGrid">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="DisplayModeGroup">
                                <VisualState x:Name="Compact"/>

                                <VisualState x:Name="Expanded" />

                                <VisualState x:Name="Minimal">
                                    <VisualState.Setters>
                                        <Setter Target="HeaderContent.Margin" Value="{ThemeResource NavigationViewMinimalHeaderMargin}" />
                                        <Setter Target="NavigationViewBackButton.Style" Value="{ThemeResource NavigationBackButtonSmallStyle}" />
                                        <Setter Target="ContentGrid.BorderThickness" Value="{ThemeResource NavigationViewMinimalContentGridBorderThickness}" />
                                        <Setter Target="ContentGrid.CornerRadius" Value="{ThemeResource NavigationViewMinimalContentGridCornerRadius}" />
                                        <Setter Target="ContentGrid.Margin" Value="{ThemeResource NavigationViewMinimalContentMargin}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="TopNavigationMinimal">
                                    <VisualState.Setters>
                                        <Setter Target="ContentGrid.BorderThickness" Value="{ThemeResource TopNavigationViewContentGridBorderThickness}" />
                                        <Setter Target="ContentGrid.CornerRadius" Value="{ThemeResource TopNavigationViewContentGridCornerRadius}" />
                                        <Setter Target="ContentGrid.Margin" Value="{ThemeResource TopNavigationViewContentMargin}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="MinimalWithBackButton">
                                    <VisualState.Setters>
                                        <Setter Target="HeaderContent.Margin" Value="{ThemeResource NavigationViewMinimalHeaderMargin}" />
                                        <Setter Target="NavigationViewBackButton.Style" Value="{ThemeResource NavigationBackButtonSmallStyle}" />
                                        <Setter Target="ContentGrid.BorderThickness" Value="{ThemeResource NavigationViewMinimalContentGridBorderThickness}" />
                                        <Setter Target="ContentGrid.CornerRadius" Value="{ThemeResource NavigationViewMinimalContentGridCornerRadius}" />
                                        <Setter Target="ContentGrid.Margin" Value="{ThemeResource NavigationViewMinimalContentMargin}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="TogglePaneGroup">
                                <VisualState x:Name="TogglePaneButtonCollapsed" />
                                <VisualState x:Name="TogglePaneButtonVisible">
                                    <VisualState.Setters>
                                        <!-- Might not need this setter when all the margins/paddings will be adequately set. -->
                                        <!-- This MinHeight setter is only here to ensure that AutoSuggestBox doesn't draw over ToggleButton. -->
                                        <Setter Target="PaneContentGridToggleButtonRow.MinHeight" Value="{StaticResource NavigationViewPaneHeaderRowMinHeight}"/>
                                        <Setter Target="PaneTitlePresenter.Margin" Value="{ThemeResource NavigationViewItemInnerHeaderMargin}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="HeaderGroup">
                                <VisualState x:Name="HeaderVisible" />
                                <VisualState x:Name="HeaderCollapsed">
                                    <VisualState.Setters>
                                        <Setter Target="HeaderContent.Visibility" Value="Collapsed" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="AutoSuggestGroup">
                                <VisualState x:Name="AutoSuggestBoxVisible" />
                                <VisualState x:Name="AutoSuggestBoxCollapsed">
                                    <VisualState.Setters>
                                        <Setter Target="AutoSuggestArea.Visibility" Value="Collapsed" />
                                        <Setter Target="TopPaneAutoSuggestArea.Visibility" Value="Collapsed" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="PaneStateGroup">
                                <VisualState x:Name="NotClosedCompact" />
                                <VisualState x:Name="ClosedCompact">
                                    <VisualState.Setters>
                                        <Setter Target="PaneAutoSuggestBoxPresenter.Visibility" Value="Collapsed"/>
                                        <Setter Target="PaneAutoSuggestButton.Visibility" Value="Visible"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="PaneStateListSizeGroup">
                                <VisualState x:Name="ListSizeFull"/>
                                <VisualState x:Name="ListSizeCompact">
                                    <VisualState.Setters>
                                        <Setter Target="PaneContentGrid.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}"/>
                                        <Setter Target="ShadowCaster.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
                                        <Setter Target="PaneTitleTextBlock.Visibility" Value="Collapsed" />
                                        <Setter Target="PaneHeaderContentBorder.Visibility" Value="Collapsed" />
                                        <Setter Target="PaneCustomContentBorder.HorizontalAlignment" Value="Left"/>
                                        <Setter Target="FooterContentBorder.HorizontalAlignment" Value="Left"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="PaneOverlayGroup">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="PaneNotOverlaying" To="PaneOverlaying">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCasterTransform" Storyboard.TargetProperty="TranslateX">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding ElementName=RootSplitView, Path=TemplateSettings.NegativeOpenPaneLengthMinusCompactLength}" />
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.35" KeySpline="0.1,0.9 0.2,1.0" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="Opacity">
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.35" Value="1" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="HorizontalAlignment">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition From="PaneOverlaying" To="PaneNotOverlaying">
                                        <Storyboard x:Name="ShadowCasterEaseOutStoryboard">
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCasterTransform" Storyboard.TargetProperty="TranslateX">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.12" KeySpline="0.1,0.9 0.2,1.0" Value="{Binding ElementName=RootSplitView, Path=TemplateSettings.NegativeOpenPaneLengthMinusCompactLength}" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="Opacity">
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.12" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="HorizontalAlignment">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="PaneOverlaying" />
                                <VisualState x:Name="PaneNotOverlaying">
                                    <VisualState.Setters>
                                        <Setter Target="RootSplitView.BorderBrush" Value="Transparent" />
                                        <Setter Target="ShadowCaster.Opacity" Value="0" />
                                        <Setter Target="RootSplitView.PaneBackground" Value="{ThemeResource NavigationViewExpandedPaneBackground}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="TitleBarVisibilityGroup">
                                <VisualState x:Name="TitleBarVisible" />
                                <VisualState x:Name="TitleBarCollapsed">
                                    <VisualState.Setters>
                                        <Setter Target="PaneContentGrid.Margin" Value="0,32,0,0"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="OverflowLabelGroup">
                                <VisualState x:Name="OverflowButtonWithLabel" />
                                <VisualState x:Name="OverflowButtonNoLabel">
                                    <VisualState.Setters>
                                        <Setter Target="TopNavOverflowButton.Style" Value="{ThemeResource NavigationViewOverflowButtonNoLabelStyleWhenPaneOnTop}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="BackButtonGroup">
                                <VisualState x:Name="BackButtonVisible" />
                                <VisualState x:Name="BackButtonCollapsed">
                                    <VisualState.Setters>
                                        <Setter Target="BackButtonPlaceholderOnTopNav.Width" Value="0" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="PaneVisibilityGroup">
                                <VisualState x:Name="PaneVisible" />
                                <VisualState x:Name="PaneCollapsed">
                                    <VisualState.Setters>
                                        <!-- Note that RootSplitView.DisplayMode is set in code so we don't want to -->
                                        <!-- write it here and interfere. But these values work together to hide -->
                                        <!-- the left pane. -->
                                        <Setter Target="RootSplitView.CompactPaneLength" Value="0" />
                                        <Setter Target="ShadowCaster.Width" Value="0" />
                                        <Setter Target="PaneToggleButtonGrid.Visibility" Value="Collapsed" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="PaneSeparatorStates">
                                <VisualState x:Name="SeparatorCollapsed" />
                                <VisualState x:Name="SeparatorVisible">
                                    <VisualState.Setters>
                                        <Setter Target="VisualItemsSeparator.Visibility" Value="Visible"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <!-- Button grid -->
                        <Grid
                            x:Name="PaneToggleButtonGrid"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            Canvas.ZIndex="100">

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <Grid x:Name="TogglePaneTopPadding"
                                  Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"/>

                            <Grid x:Name="ButtonHolderGrid" Grid.Row="1" Margin="{ThemeResource NavigationViewButtonHolderGridMargin}">
                                <Button
                                    x:Name="NavigationViewBackButton"
                                    Style="{StaticResource NavigationBackButtonNormalStyle}"
                                    Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SmallerPaneToggleButtonWidth}"
                                    VerticalAlignment="Top"
                                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.BackButtonVisibility}"
                                    IsEnabled="{TemplateBinding IsBackEnabled}">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Name="NavigationViewBackButtonToolTip"/>
                                    </ToolTipService.ToolTip>
                                </Button>
                                <Button 
                                    x:Name="NavigationViewCloseButton"
                                    Style="{StaticResource NavigationBackButtonNormalStyle}"
                                    VerticalAlignment="Top">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Name="NavigationViewCloseButtonToolTip"/>
                                    </ToolTipService.ToolTip>
                                </Button>
                                <Button
                                    x:Name="TogglePaneButton"
                                    Style="{TemplateBinding PaneToggleButtonStyle}"
                                    AutomationProperties.LandmarkType="Navigation"
                                    HorizontalAlignment="Center"
                                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneToggleButtonVisibility}"
                                    VerticalAlignment="Top"
                                    MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SmallerPaneToggleButtonWidth}"
                                    FocusVisualMargin="0">
                                    <TextBlock
                                        x:Name="PaneTitleTextBlock"
                                        Grid.Column="0"
                                        Margin="0,-2,0,0"
                                        Text="{TemplateBinding PaneTitle}"
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Center"
                                        Style="{StaticResource NavigationViewItemHeaderTextStyle}"/>
                                    </Button>

                                    <Grid
                                    x:Name="PaneTitleHolder"
                                    Height="40"
                                    Visibility="Collapsed">
                                    <ContentControl
                                        x:Name="PaneTitlePresenter"
                                        Margin="{ThemeResource NavigationViewPaneTitlePresenterMargin}"
                                        IsTabStop="False"
                                        HorizontalContentAlignment="Stretch"
                                        VerticalContentAlignment="Stretch"/>
                                </Grid>
                            </Grid>
                        </Grid>
                        
                        <!-- Content layouts -->
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <!-- DisplayMode top -->
                            <StackPanel
                                x:Name="TopNavArea"
                                Background="{ThemeResource NavigationViewTopPaneBackground}"
                                Grid.Row="0"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Top"
                                Canvas.ZIndex="1"
                                contract4Present:XYFocusKeyboardNavigation="Enabled">

                                <Grid x:Name="TopNavTopPadding"
                                      Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"
                                      Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPaneVisibility}"/>

                                <Grid x:Name="TopNavGrid" 
                                      Height="{ThemeResource NavigationViewTopPaneHeight}"
                                      Margin="{ThemeResource TopNavigationViewTopNavGridMargin}"
                                      Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPaneVisibility}"
                                      BorderBrush="{ThemeResource NavigationViewItemSeparatorForeground}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav" Width="{ThemeResource NavigationBackButtonWidth}"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*" MinWidth="{ThemeResource TopNavigationViewPaneCustomContentMinWidth}"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <Grid 
                                        x:Name="TopNavLeftPadding" 
                                        Grid.Column="1"
                                        Width="0"/>

                                    <ContentControl
                                        x:Name="PaneHeaderOnTopPane"
                                        IsTabStop="False"
                                        VerticalContentAlignment="Stretch"
                                        HorizontalContentAlignment="Stretch"
                                        Grid.Column="2"/>

                                    <ContentControl
                                        x:Name="PaneTitleOnTopPane"
                                        IsTabStop="False"
                                        VerticalContentAlignment="Stretch"
                                        HorizontalContentAlignment="Stretch"
                                        Margin="{ThemeResource NavigationViewItemInnerHeaderMargin}"
                                        Grid.Column="2"/>

                                    <!-- Top nav ItemsRepeater -->
                                    <local:ItemsRepeaterScrollHost
                                            Grid.Column="3">
                                        <ScrollViewer
                                            HorizontalScrollMode="Disabled"
                                            HorizontalScrollBarVisibility="Hidden"
                                            VerticalScrollMode="Disabled"
                                            VerticalScrollBarVisibility="Hidden">
                                            <local:ItemsRepeater 
                                                AutomationProperties.LandmarkType="Navigation"
                                                AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
                                                AutomationProperties.AccessibilityView = "Content"
                                                x:Name="TopNavMenuItemsHost">
                                                <local:ItemsRepeater.Layout>
                                                    <local:StackLayout Orientation="Horizontal"/>
                                                </local:ItemsRepeater.Layout>
                                            </local:ItemsRepeater>
                                        </ScrollViewer>
                                    </local:ItemsRepeaterScrollHost>

                                    <Button 
                                        x:Name="TopNavOverflowButton"
                                        Grid.Column="4"
                                        Content="More"
                                        Margin="{ThemeResource TopNavigationViewOverflowButtonMargin}"
                                        Style="{StaticResource NavigationViewOverflowButtonStyleWhenPaneOnTop}"
                                        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OverflowButtonVisibility}">

                                        <Button.Flyout>
                                            <Flyout
                                                contract7NotPresent:Placement="Bottom"
                                                contract7Present:Placement="BottomEdgeAlignedRight"
                                                ElementSoundMode="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ElementSoundMode}">
                                                <Flyout.FlyoutPresenterStyle>
                                                    <Style TargetType="FlyoutPresenter">
                                                        <Setter Property="Padding" Value="{ThemeResource TopNavigationViewOverflowMenuPadding}" />
                                                        <!-- Set negative top margin to make the flyout align exactly with the button -->
                                                        <Setter Property="Margin" Value="0,-4,0,0" />
                                                        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
                                                        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
                                                        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
                                                        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
                                                        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
                                                        <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
                                                        <Setter Property="Template">
                                                            <Setter.Value>
                                                                <ControlTemplate TargetType="FlyoutPresenter">
                                                                    <ScrollViewer
                                                                        x:Name="ScrollViewer"
                                                                        ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                                                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                                                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                                                        AutomationProperties.AccessibilityView="Raw">
                                                                        <ContentPresenter
                                                                            x:Name="ContentPresenter"
                                                                            Background="{TemplateBinding Background}"
                                                                            BorderBrush="{TemplateBinding BorderBrush}"
                                                                            BorderThickness="{TemplateBinding BorderThickness}"
                                                                            Content="{TemplateBinding Content}"
                                                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                            ContentTransitions="{TemplateBinding ContentTransitions}"
                                                                            Padding="{TemplateBinding Padding}"
                                                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                                            contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
                                                                            contract7NotPresent:CornerRadius="{ThemeResource OverlayCornerRadius}"/>
                                                                    </ScrollViewer>
                                                                </ControlTemplate>
                                                            </Setter.Value>
                                                        </Setter>
                                                    </Style>
                                                </Flyout.FlyoutPresenterStyle>
                                                <local:ItemsRepeaterScrollHost>
                                                    <ScrollViewer VerticalScrollBarVisibility="Auto">
                                                        <local:ItemsRepeater
                                                                    AutomationProperties.AccessibilityView = "Content"
                                                                    x:Name="TopNavMenuItemsOverflowHost">
                                                            <local:ItemsRepeater.Layout>
                                                                <local:StackLayout />
                                                            </local:ItemsRepeater.Layout>
                                                        </local:ItemsRepeater>
                                                    </ScrollViewer>
                                                </local:ItemsRepeaterScrollHost>
                                            </Flyout>
                                        </Button.Flyout>
                                    </Button>

                                    <ContentControl
                                        x:Name="PaneCustomContentOnTopPane"
                                        IsTabStop="False"
                                        VerticalContentAlignment="Stretch"
                                        HorizontalContentAlignment="Stretch"
                                        Grid.Column="5"/>

                                    <Grid
                                        x:Name="TopPaneAutoSuggestArea"
                                        Height="{ThemeResource NavigationViewTopPaneHeight}"
                                        Grid.Column="6">

                                        <ContentControl
                                            x:Name="TopPaneAutoSuggestBoxPresenter"
                                            Margin="{ThemeResource TopNavigationViewAutoSuggestBoxMargin}"
                                            MinWidth="216"
                                            IsTabStop="False"
                                            HorizontalContentAlignment="Stretch"
                                            VerticalContentAlignment="Center"/>
                                    </Grid>

                                    <ContentControl
                                        x:Name="PaneFooterOnTopPane"
                                        IsTabStop="False"
                                        VerticalContentAlignment="Stretch"
                                        HorizontalContentAlignment="Stretch"
                                        Grid.Column="7" />
                                    <!-- Top footer menu ItemsRepeater -->
                                    <local:ItemsRepeater
                                        Grid.Column="8"
                                        AutomationProperties.LandmarkType="Navigation"
                                        AutomationProperties.AccessibilityView = "Content"
                                        x:Name="TopFooterMenuItemsHost">
                                        <local:ItemsRepeater.Layout>
                                            <local:StackLayout Orientation="Horizontal"/>
                                        </local:ItemsRepeater.Layout>
                                    </local:ItemsRepeater>

                                </Grid>
                                <Border
                                    x:Name="TopNavContentOverlayAreaGrid"
                                    Child="{TemplateBinding ContentOverlay}" />
                            </StackPanel>

                            <!-- Displaymode (compact/minimal/normal) left -->
                            <SplitView
                                x:Name="RootSplitView"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{ThemeResource NavigationViewItemSeparatorForeground}"
                                BorderThickness="{ThemeResource NavigationViewBorderThickness}"
                                CompactPaneLength="{TemplateBinding CompactPaneLength}"
                                DisplayMode="Inline"
                                IsPaneOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsPaneOpen, Mode=TwoWay}"
                                IsTabStop="False"
                                OpenPaneLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneWidth}"
                                PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}"
                                Grid.Row="1"
                                contract7Present:CornerRadius="{Binding Source={ThemeResource OverlayCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}">
                                
                                <SplitView.Pane>
                                    <Grid 
                                        x:Name="PaneContentGrid"
                                        BorderBrush="{ThemeResource NavigationViewItemSeparatorForeground}"
                                        HorizontalAlignment="Left"
                                        Margin="{ThemeResource NavigationViewPaneContentGridMargin}"
                                        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="0"/> <!-- above button margin + back button space -->
                                            <RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="0"/> <!-- above list margin -->
                                            <RowDefinition x:Name="ItemsContainerRow" Height="*"/>
                                        </Grid.RowDefinitions>

                                        <Grid x:Name="ContentPaneTopPadding"
                                              Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"/>

                                        <Grid Grid.Row="2">
                                            <Grid.RowDefinitions>
                                                <RowDefinition x:Name="PaneHeaderContentBorderRow"/>
                                            </Grid.RowDefinitions>

                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition x:Name="PaneHeaderCloseButtonColumn"/>
                                                <ColumnDefinition x:Name="PaneHeaderToggleButtonColumn"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>

                                            <ContentControl
                                                x:Name="PaneHeaderContentBorder"
                                                IsTabStop="False"
                                                VerticalContentAlignment="Stretch"
                                                HorizontalContentAlignment="Stretch"
                                                Grid.Column="2" />
                                        </Grid>

                                        <Grid
                                            x:Name="AutoSuggestArea"
                                            Grid.Row="3"
                                            Height="{ThemeResource NavigationViewAutoSuggestAreaHeight}"
                                            Margin="0,0,0,8"
                                            VerticalAlignment="Center">

                                            <ContentControl
                                                x:Name="PaneAutoSuggestBoxPresenter"
                                                Margin="{ThemeResource NavigationViewAutoSuggestBoxMargin}"
                                                IsTabStop="False"
                                                HorizontalContentAlignment="Stretch"
                                                VerticalContentAlignment="Center"/>

                                            <Button
                                                x:Name="PaneAutoSuggestButton"
                                                Visibility="Collapsed"
                                                Style="{ThemeResource NavigationViewPaneSearchButtonStyle}"
                                                Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SmallerPaneToggleButtonWidth}">
                                                <Button.Resources>
                                                    <ResourceDictionary>
                                                        <ResourceDictionary.ThemeDictionaries>
                                                            <ResourceDictionary x:Key="Default">
                                                                <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="NavigationViewItemBackgroundPointerOver" />
                                                    <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="NavigationViewItemBackgroundPressed" />
                                                    <StaticResource x:Key="ButtonBackgroundDisabled" ResourceKey="NavigationViewItemBackgroundDisabled" />
                                                    <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="NavigationViewItemForegroundPointerOver" />
                                                    <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="NavigationViewItemForegroundPressed" />
                                                    <StaticResource x:Key="ButtonForegroundDisabled" ResourceKey="NavigationViewItemForegroundDisabled" />
                                                    <StaticResource x:Key="ButtonBorderBrushPointerOver" ResourceKey="NavigationViewItemBorderBrushPointerOver" />
                                                    <StaticResource x:Key="ButtonBorderBrushPressed" ResourceKey="NavigationViewItemBorderBrushPressed" />
                                                    <StaticResource x:Key="ButtonBorderBrushDisabled" ResourceKey="NavigationViewItemBorderBrushDisabled" />
                                                            </ResourceDictionary>
                                                            <ResourceDictionary x:Key="Light">
                                                                <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="NavigationViewItemBackgroundPointerOver" />
                                                    <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="NavigationViewItemBackgroundPressed" />
                                                    <StaticResource x:Key="ButtonBackgroundDisabled" ResourceKey="NavigationViewItemBackgroundDisabled" />
                                                    <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="NavigationViewItemForegroundPointerOver" />
                                                    <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="NavigationViewItemForegroundPressed" />
                                                    <StaticResource x:Key="ButtonForegroundDisabled" ResourceKey="NavigationViewItemForegroundDisabled" />
                                                    <StaticResource x:Key="ButtonBorderBrushPointerOver" ResourceKey="NavigationViewItemBorderBrushPointerOver" />
                                                    <StaticResource x:Key="ButtonBorderBrushPressed" ResourceKey="NavigationViewItemBorderBrushPressed" />
                                                    <StaticResource x:Key="ButtonBorderBrushDisabled" ResourceKey="NavigationViewItemBorderBrushDisabled" />
                                                            </ResourceDictionary>
                                                        </ResourceDictionary.ThemeDictionaries>
                                                    </ResourceDictionary>
                                                </Button.Resources>
                                            </Button>
                                        </Grid>

                                        <ContentControl
                                            x:Name="PaneCustomContentBorder"
                                            IsTabStop="False"
                                            VerticalContentAlignment="Stretch"
                                            HorizontalContentAlignment="Stretch"
                                            Grid.Row="4" />

                                        <!-- "Non header" content -->
                                        <Grid x:Name="ItemsContainerGrid" Grid.Row="6">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*"/> <!-- MenuItems -->
                                                <RowDefinition Height="Auto"/> <!-- Separator if overflow -->
                                                <RowDefinition Height="Auto" /> <!-- PaneFooter -->
                                                <RowDefinition Height="Auto"/> <!-- FooterItems -->
                                            </Grid.RowDefinitions>

                                            <!-- MenuItems -->
                                            <local:ItemsRepeaterScrollHost
                                                HorizontalAlignment="Stretch"
                                                VerticalAlignment="Stretch">
                                                <ScrollViewer x:Name="MenuItemsScrollViewer"
                                                    TabNavigation="Local"
                                                    VerticalScrollBarVisibility="Auto">
                                                    <!-- Left nav ItemsRepeater -->
                                                    <local:ItemsRepeater
                                                        x:Name="MenuItemsHost"
                                                        AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
                                                        AutomationProperties.AccessibilityView = "Content">
                                                        <local:ItemsRepeater.Layout>
                                                            <local:StackLayout />
                                                        </local:ItemsRepeater.Layout>
                                                    </local:ItemsRepeater>
                                                </ScrollViewer>
                                            </local:ItemsRepeaterScrollHost>

                                            <local:NavigationViewItemSeparator
                                                x:Name="VisualItemsSeparator"
                                                Grid.Row="1"
                                                Margin="0,0,0,2"
                                                Visibility="Collapsed"
                                                VerticalAlignment="Center"
                                                HorizontalAlignment="Stretch"/>

                                            <!-- PaneFooter -->
                                            <ContentControl x:Name="FooterContentBorder"
                                                        IsTabStop="False"
                                                        VerticalContentAlignment="Stretch"
                                                        HorizontalContentAlignment="Stretch"
                                                        Margin="0,0,0,4"
                                                        Grid.Row="2" />

                                            <!-- FooterItems -->
                                            <local:ItemsRepeaterScrollHost Grid.Row="3">
                                                <ScrollViewer x:Name="FooterItemsScrollViewer"
                                                    VerticalScrollBarVisibility="Auto"
                                                    contract7Present:VerticalAnchorRatio="1">
                                                    <local:ItemsRepeater
                                                        x:Name="FooterMenuItemsHost"
                                                        AutomationProperties.AccessibilityView = "Content">
                                                        <local:ItemsRepeater.Layout>
                                                            <local:StackLayout />
                                                        </local:ItemsRepeater.Layout>
                                                    </local:ItemsRepeater>
                                                </ScrollViewer>
                                            </local:ItemsRepeaterScrollHost>
                                        </Grid>
                                    </Grid>
                                </SplitView.Pane>

                                <SplitView.Content>
                                    <Grid
                                        x:Name="ContentGrid"
                                        BorderBrush="{ThemeResource NavigationViewContentGridBorderBrush}"
                                        BorderThickness="{ThemeResource NavigationViewContentGridBorderThickness}"
                                        Background="{ThemeResource NavigationViewContentBackground}"
                                        Margin="{ThemeResource NavigationViewContentMargin}"
                                        contract7Present:CornerRadius="{ThemeResource NavigationViewContentGridCornerRadius}">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>

                                        <Grid x:Name="ContentTopPadding"
                                            Grid.ColumnSpan="2"
                                            Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"
                                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}"/>

                                        <Grid x:Name="ContentLeftPadding" Grid.Row="1"/>

                                        <ContentControl
                                            x:Name="HeaderContent"
                                            Grid.Row="1"
                                            Grid.Column="1"
                                            MinHeight="{StaticResource PaneToggleButtonHeight}"
                                            IsTabStop="False"
                                            Content="{TemplateBinding Header}"
                                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                                            VerticalContentAlignment="Stretch"
                                            HorizontalContentAlignment="Stretch"
                                            Style="{StaticResource NavigationViewTitleHeaderContentControlTextStyle}"/>

                                        <ContentPresenter
                                            x:Name="ContentPresenter"
                                            AutomationProperties.LandmarkType="Main"
                                            Grid.Row="2"
                                            Grid.ColumnSpan="2"
                                            Content="{TemplateBinding Content}"
                                            Margin="{ThemeResource NavigationViewContentPresenterMargin}"/>
                                    </Grid>
                                </SplitView.Content>
                            </SplitView>

                            <Grid
                                x:Name="ShadowCaster"
                                Grid.RowSpan="2"
                                Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneWidth}"
                                HorizontalAlignment="Left">
                                <Grid.RenderTransform>
                                    <CompositeTransform x:Name="ShadowCasterTransform" />
                                </Grid.RenderTransform>
                            </Grid>

                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:NavigationViewItem">
        <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
        <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
        <Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}" />
        <Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}" />
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Margin" Value="{ThemeResource NavigationViewItemMargin}" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="TabNavigation" Value="Once"/>
        <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:NavigationViewItem">
                    <Grid x:Name="NVIRootGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ItemOnNavigationViewListPositionStates">
                                <VisualState x:Name="OnLeftNavigation">
                                    <VisualState.Setters>
                                        <Setter Target="NavigationViewItemPresenter.Style" Value="{StaticResource MUX_NavigationViewItemPresenterStyleWhenOnLeftPane}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="OnTopNavigationPrimary">
                                    <VisualState.Setters>
                                        <Setter Target="NavigationViewItemPresenter.Margin" Value="{ThemeResource TopNavigationViewItemMargin}"/>
                                        <Setter Target="NavigationViewItemPresenter.Style" Value="{StaticResource MUX_NavigationViewItemPresenterStyleWhenOnTopPane}" />
                                        <contract7NotPresent:Setter Target="ChildrenFlyout.Placement" Value="Bottom"/>
                                        <contract7Present:Setter Target="ChildrenFlyout.Placement" Value="BottomEdgeAlignedLeft"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="OnTopNavigationOverflow">
                                    <VisualState.Setters>
                                        <Setter Target="NavigationViewItemPresenter.Style" Value="{StaticResource MUX_NavigationViewItemPresenterStyleWhenOnTopPaneOverflow}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <primitives:NavigationViewItemPresenter
                            x:Name="NavigationViewItemPresenter"
                            Icon="{TemplateBinding Icon}"
                            InfoBadge="{TemplateBinding InfoBadge}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Padding="{TemplateBinding Padding}" 
                            Foreground="{TemplateBinding Foreground}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                            Content="{TemplateBinding Content}"
                            primitiveContract7Present:CornerRadius="{TemplateBinding CornerRadius}"
                            IsTabStop="false"
                            Control.IsTemplateFocusTarget="True">
                        </primitives:NavigationViewItemPresenter>
                        <local:ItemsRepeater
                                Grid.Row="1"
                                Visibility="Collapsed"
                                x:Name="NavigationViewItemMenuItemsHost">
                            <local:ItemsRepeater.Layout>
                                <local:StackLayout Orientation="Vertical"/>
                            </local:ItemsRepeater.Layout>
                        </local:ItemsRepeater>
                        <FlyoutBase.AttachedFlyout>
                            <Flyout x:Name="ChildrenFlyout"
                                    contract7NotPresent:Placement="Right"
                                    contract7Present:Placement="RightEdgeAlignedTop">
                                <Flyout.FlyoutPresenterStyle>
                                    <Style TargetType="FlyoutPresenter">
                                        <Setter Property="Padding" Value="{ThemeResource NavigationViewItemChildrenMenuFlyoutPadding}" />
                                        <!-- Set negative top margin to make the flyout align exactly with the button -->
                                        <Setter Property="Margin" Value="0,-4,0,0" />
                                        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
                                        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
                                        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
                                        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
                                        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
                                        <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="FlyoutPresenter">
                                                    <ScrollViewer
                                                        x:Name="ScrollViewer"
                                                        ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                                        AutomationProperties.AccessibilityView="Raw">
                                                        <ContentPresenter
                                                            x:Name="ContentPresenter"
                                                            Background="{TemplateBinding Background}"
                                                            BorderBrush="{TemplateBinding BorderBrush}"
                                                            BorderThickness="{TemplateBinding BorderThickness}"
                                                            Content="{TemplateBinding Content}"
                                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                                            ContentTransitions="{TemplateBinding ContentTransitions}"
                                                            Padding="{TemplateBinding Padding}"
                                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                            contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
                                                            contract7NotPresent:CornerRadius="{ThemeResource OverlayCornerRadius}"/>
                                                    </ScrollViewer>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Flyout.FlyoutPresenterStyle>
                                <Grid x:Name="FlyoutRootGrid">
                                    <Grid x:Name="FlyoutContentGrid"/>
                                </Grid>
                            </Flyout>
                        </FlyoutBase.AttachedFlyout>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="primitives:NavigationViewItemPresenter" />

    <Style TargetType="local:NavigationViewItemHeader">
        <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemHeaderForeground}"/>
        <Setter Property="IsEnabled" Value="False" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="MinHeight" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="AutomationProperties.AccessibilityView" Value="Raw"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:NavigationViewItemHeader">
                    <Grid x:Name="NavigationViewItemHeaderRootGrid">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="PaneStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="HeaderTextCollapsed" To="HeaderTextVisible">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerHeaderGrid" Storyboard.TargetProperty="Height">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="40" />
                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderText" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HeaderText" Storyboard.TargetProperty="Opacity">
                                                <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0.0"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.1" Value="0.0"/>
                                                <SplineDoubleKeyFrame
                                                KeyTime="0:0:0.2"
                                                KeySpline="0.0,0.35 0.15,1.0"
                                                Value="1.0" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>

                                    <VisualTransition From="HeaderTextVisible" To="HeaderTextCollapsed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerHeaderGrid" Storyboard.TargetProperty="Height">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0" />
                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderText" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HeaderText" Storyboard.TargetProperty="Opacity">
                                                <LinearDoubleKeyFrame KeyTime="0:0:0" Value="1.0"/>
                                                <SplineDoubleKeyFrame
                                                KeyTime="0:0:0.1"
                                                KeySpline="0.0,0.35 0.15,1.0"
                                                Value="0.0" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>

                                <VisualState x:Name="HeaderTextVisible"/>
                                <VisualState x:Name="HeaderTextCollapsed">
                                    <VisualState.Setters>
                                        <Setter Target="HeaderText.Visibility" Value="Collapsed" />
                                        <Setter Target="InnerHeaderGrid.Height" Value="0"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                            
                            <VisualStateGroup x:Name="DisplayModeStates">
                                <VisualState x:Name="LeftMode"/>
                                <VisualState x:Name="TopMode">
                                    <VisualState.Setters>
                                        <Setter Target="InnerHeaderGrid.Margin" Value="{ThemeResource TopNavigationViewItemInnerHeaderMargin}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        
                        <Grid x:Name="InnerHeaderGrid" Height="40" HorizontalAlignment="Left" Margin="{ThemeResource NavigationViewItemInnerHeaderMargin}">
                            <TextBlock
                                x:Name="HeaderText"
                                VerticalAlignment="Center"
                                Margin="0,-1,0,-1"
                                Style="{StaticResource NavigationViewItemHeaderTextStyle}"
                                Text="{TemplateBinding Content}"
                                TextWrapping="NoWrap"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:NavigationViewItemSeparator">
        <Setter Property="IsEnabled" Value="False" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="MinHeight" Value="0" />
        <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid x:Name="NavigationViewItemSeparatorRootGrid">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="NavigationSeparatorLineStates">
                                <VisualState x:Name="HorizontalLine" />
                                <VisualState x:Name="HorizontalLineCompact">
                                    <VisualState.Setters>
                                        <Setter Target="SeparatorLine.Margin" Value="{ThemeResource NavigationViewCompactItemSeparatorMargin}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="VerticalLine">
                                    <VisualState.Setters>
                                        <Setter Target="SeparatorLine.Height" Value="24" />
                                        <Setter Target="SeparatorLine.Width" Value="{ThemeResource TopNavigationViewItemSeparatorWidth}" />
                                        <Setter Target="SeparatorLine.Margin" Value="{ThemeResource TopNavigationViewItemSeparatorMargin}" />
                                        <Setter Target="SeparatorLine.VerticalAlignment" Value="Center" />
                                        <Setter Target="SeparatorLine.Fill" Value="{ThemeResource TopNavigationViewItemSeparatorForeground}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle 
                            x:Name="SeparatorLine"
                            Height="{ThemeResource NavigationViewItemSeparatorHeight}"
                            Fill="{ThemeResource NavigationViewItemSeparatorForeground}"
                            Margin="{ThemeResource NavigationViewItemSeparatorMargin}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>