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:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives" xmlns:controls="using:Microsoft.UI.Xaml.Controls" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Style TargetType="controls:NavigationView">
    <Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="CompactPaneLength" Value="{ThemeResource NavigationViewCompactPaneLength}" />
    <Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="controls: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" 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 -->
                  <controls:ItemsRepeaterScrollHost Grid.Column="3">
                    <ScrollViewer HorizontalScrollMode="Disabled" HorizontalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden">
                      <controls:ItemsRepeater AutomationProperties.LandmarkType="Navigation" AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}" AutomationProperties.AccessibilityView="Content" x:Name="TopNavMenuItemsHost">
                        <controls:ItemsRepeater.Layout>
                          <controls:StackLayout Orientation="Horizontal" />
                        </controls:ItemsRepeater.Layout>
                      </controls:ItemsRepeater>
                    </ScrollViewer>
                  </controls: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 Placement="BottomEdgeAlignedRight" ElementSoundMode="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ElementSoundMode}">
                        <Flyout.FlyoutPresenterStyle>
                          <Style TargetType="FlyoutPresenter">
                            <Setter Property="Padding" Value="{ThemeResource TopNavigationViewOverflowMenuPadding}" />
                            <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" />
                            <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}" CornerRadius="{TemplateBinding CornerRadius}" />
                                  </ScrollViewer>
                                </ControlTemplate>
                              </Setter.Value>
                            </Setter>
                          </Style>
                        </Flyout.FlyoutPresenterStyle>
                        <controls:ItemsRepeaterScrollHost>
                          <ScrollViewer VerticalScrollBarVisibility="Auto">
                            <controls:ItemsRepeater AutomationProperties.AccessibilityView="Content" x:Name="TopNavMenuItemsOverflowHost">
                              <controls:ItemsRepeater.Layout>
                                <controls:StackLayout />
                              </controls:ItemsRepeater.Layout>
                            </controls:ItemsRepeater>
                          </ScrollViewer>
                        </controls: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 -->
                  <controls:ItemsRepeater Grid.Column="8" AutomationProperties.LandmarkType="Navigation" AutomationProperties.AccessibilityView="Content" x:Name="TopFooterMenuItemsHost">
                    <controls:ItemsRepeater.Layout>
                      <controls:StackLayout Orientation="Horizontal" />
                    </controls:ItemsRepeater.Layout>
                  </controls: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.OpenPaneLength}" PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}" Grid.Row="1" 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 -->
                      <controls:ItemsRepeaterScrollHost HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <ScrollViewer x:Name="MenuItemsScrollViewer" TabNavigation="Local" VerticalScrollBarVisibility="Auto">
                          <!-- Left nav ItemsRepeater -->
                          <controls:ItemsRepeater 
                            x:Name="MenuItemsHost" 
                            AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}" 
                            AutomationProperties.AccessibilityView="Content">
                            <controls:ItemsRepeater.Layout>
                              <controls:StackLayout />
                            </controls:ItemsRepeater.Layout>
                          </controls:ItemsRepeater>
                        </ScrollViewer>
                      </controls:ItemsRepeaterScrollHost>
                      <controls: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 -->
                      <controls:ItemsRepeaterScrollHost Grid.Row="3">
                        <ScrollViewer x:Name="FooterItemsScrollViewer" VerticalScrollBarVisibility="Auto" VerticalAnchorRatio="1">
                          <controls:ItemsRepeater x:Name="FooterMenuItemsHost" AutomationProperties.AccessibilityView="Content">
                            <controls:ItemsRepeater.Layout>
                              <controls:StackLayout />
                            </controls:ItemsRepeater.Layout>
                          </controls:ItemsRepeater>
                        </ScrollViewer>
                      </controls:ItemsRepeaterScrollHost>
                    </Grid>
                  </Grid>
                </SplitView.Pane>
                <SplitView.Content>
                  <Grid x:Name="ContentGrid" BorderBrush="{ThemeResource NavigationViewContentGridBorderBrush}" BorderThickness="{ThemeResource NavigationViewContentGridBorderThickness}" Background="{ThemeResource NavigationViewContentBackground}" Margin="{ThemeResource NavigationViewContentMargin}" 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.OpenPaneLength}" HorizontalAlignment="Left">
                <Grid.RenderTransform>
                  <CompositeTransform x:Name="ShadowCasterTransform" />
                </Grid.RenderTransform>
              </Grid>
            </Grid>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  <Style TargetType="controls: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" />
    <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="controls: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}" />
                    <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}" CornerRadius="{TemplateBinding CornerRadius}" IsTabStop="false" Control.IsTemplateFocusTarget="True" />
            <controls:ItemsRepeater x:Load="False" Grid.Row="1" Visibility="Collapsed" x:Name="NavigationViewItemMenuItemsHost">
              <controls:ItemsRepeater.Layout>
                <controls:StackLayout Orientation="Vertical" />
              </controls:ItemsRepeater.Layout>
            </controls:ItemsRepeater>
            <FlyoutBase.AttachedFlyout>
              <Flyout x:Name="ChildrenFlyout" 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" />
                    <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}" CornerRadius="{TemplateBinding CornerRadius}" />
                          </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="controls: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="controls: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="controls: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>