[Shell] Implement FlyoutBackgroundColor for UWP (#9915)

* implement FlyoutBackgroundColor for UWP

* - fix nuspec

* - winui

.nuspec/Xamarin.Forms.nuspec

@@ -256,46 +256,10 @@
 
 
     <!-- VS 2017 needs these-->
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\FormsFlyout.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
+    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\**\*.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\FormsProgressBarStyle.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\FormsTextBoxStyle.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\MasterDetailControlStyle.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\PageControlStyle.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\PickerStyle.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\Resources.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\SliderStyle.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\StepperControl.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\TabbedPageStyle.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\CollectionView\ItemsViewStyles.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP\CollectionView" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\Shell\ShellStyles.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP\Shell" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\Microsoft.UI.Xaml\DensityStyles\Compact.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP\Microsoft.UI.Xaml\DensityStyles" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\Microsoft.UI.Xaml\Themes\generic.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP\Microsoft.UI.Xaml\Themes" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\FormsAutoSuggestBoxStyle.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\FormsCheckBoxStyle.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\FormsCommandBarStyle.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\FormsEmbeddedPageWrapper.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\PromptDialog.xaml" target="lib\uap10.0.14393\Xamarin.Forms.Platform.UAP" />
-
     <!-- VS 2017 needs these 16299-->
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\FormsFlyout.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
+    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\**\*.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\FormsProgressBarStyle.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
+    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\Microsoft.UI.Xaml\**\*.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP\Microsoft.UI.Xaml" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\FormsTextBoxStyle.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\MasterDetailControlStyle.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\PageControlStyle.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\PickerStyle.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\Resources.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\SliderStyle.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\StepperControl.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\TabbedPageStyle.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\CollectionView\ItemsViewStyles.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP\CollectionView" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\Shell\ShellStyles.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP\Shell" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\Microsoft.UI.Xaml\DensityStyles\Compact.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP\Microsoft.UI.Xaml\DensityStyles" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.14393\Microsoft.UI.Xaml\Themes\generic.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP\Microsoft.UI.Xaml\Themes" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\FormsAutoSuggestBoxStyle.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\FormsCheckBoxStyle.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\FormsCommandBarStyle.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\FormsEmbeddedPageWrapper.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
-    <file src="..\Xamarin.Forms.Platform.UAP\obj\$Configuration$\uap10.0.16299\PromptDialog.xaml" target="lib\uap10.0.16299\Xamarin.Forms.Platform.UAP" />
 
     <!--Mac-->
     <file src="..\Xamarin.Forms.Core\bin\$Configuration$\netstandard2.0\Xamarin.Forms.Core.dll" target="lib\Xamarin.Mac" />

Xamarin.Forms.Platform.UAP/Platform.cs

@@ -75,6 +75,15 @@ namespace Xamarin.Forms.Platform.UWP
 				Windows.UI.Xaml.Application.Current.Resources.MergedDictionaries.Add(Forms.GetTabletResources());
 			}
 
+#if !UWP_14393
+			if (!current.Resources.ContainsKey(ShellRenderer.ShellStyle))
+			{
+				var myResourceDictionary = new Windows.UI.Xaml.ResourceDictionary();
+				myResourceDictionary.Source = new Uri("ms-appx:///Xamarin.Forms.Platform.UAP/Shell/ShellStyles.xbf");
+				Windows.UI.Xaml.Application.Current.Resources.MergedDictionaries.Add(myResourceDictionary);
+			}
+#endif
+
 			_container = new Canvas
 			{
 				Style = (Windows.UI.Xaml.Style)current.Resources["RootContainerStyle"]

Xamarin.Forms.Platform.UAP/Resources.xaml

@@ -15,7 +15,6 @@
 		<ResourceDictionary Source="TabbedPageStyle.xaml" />
 		<ResourceDictionary Source="SliderStyle.xaml" />
 		<ResourceDictionary Source="CollectionView/ItemsViewStyles.xaml" />
-	    <ResourceDictionary Source="Shell/ShellStyles.xaml" />
         <ResourceDictionary Source="PickerStyle.xaml" />
     </ResourceDictionary.MergedDictionaries>
 

Xamarin.Forms.Platform.UAP/Shell/ShellRenderer.cs

@@ -11,12 +11,17 @@ namespace Xamarin.Forms.Platform.UWP
 	[Windows.UI.Xaml.Data.Bindable]
 	public class ShellRenderer : Microsoft.UI.Xaml.Controls.NavigationView, IVisualElementRenderer, IAppearanceObserver, IFlyoutBehaviorObserver
 	{
+		public static readonly DependencyProperty FlyoutBackgroundColorProperty = DependencyProperty.Register(
+			nameof(FlyoutBackgroundColor), typeof(Brush), typeof(ShellRenderer),
+			new PropertyMetadata(default(Brush)));
+
 		internal static readonly Windows.UI.Color DefaultBackgroundColor = Windows.UI.Color.FromArgb(255, 3, 169, 244);
 		internal static readonly Windows.UI.Color DefaultForegroundColor = Windows.UI.Colors.White;
 		internal static readonly Windows.UI.Color DefaultTitleColor = Windows.UI.Colors.White;
 		internal static readonly Windows.UI.Color DefaultUnselectedColor = Windows.UI.Color.FromArgb(180, 255, 255, 255);
 		const string TogglePaneButton = "TogglePaneButton";
 		const string NavigationViewBackButton = "NavigationViewBackButton";
+		internal const string ShellStyle = "ShellNavigationView";
 		Shell _shell;
 
 		ShellItemRenderer ItemRenderer { get; }
@@ -36,6 +41,13 @@ namespace Xamarin.Forms.Platform.UWP
 			if (ApiInformation.IsEventPresent("Windows.UI.Xaml.Controls.NavigationView", "PaneOpening"))
 				PaneOpening += (s, e) => OnPaneOpening();
 			ItemInvoked += OnMenuItemInvoked;
+			Style = Windows.UI.Xaml.Application.Current.Resources["ShellNavigationView"] as Windows.UI.Xaml.Style;
+		}
+
+		public Brush FlyoutBackgroundColor
+		{
+			get => (Brush)GetValue(FlyoutBackgroundColorProperty);
+			set => SetValue(FlyoutBackgroundColorProperty, value);
 		}
 
 		protected override void OnApplyTemplate()
@@ -51,6 +63,7 @@ namespace Xamarin.Forms.Platform.UWP
 				Shell.FlyoutIsPresented = true;
 			UpdatePaneButtonColor(TogglePaneButton, false);
 			UpdatePaneButtonColor(NavigationViewBackButton, false);
+			UpdateFlyoutBackgroundColor();
 		}
 
 		void OnPaneClosed()
@@ -122,7 +135,7 @@ namespace Xamarin.Forms.Platform.UWP
 				ItemRenderer.SetShellContext(this);
 				_elementChanged?.Invoke(this, new VisualElementChangedEventArgs(null, Element));
 			}
-			else if(Element != null)
+			else if (Element != null)
 			{
 				Element.SizeChanged -= OnElementSizeChanged;
 				Element.PropertyChanged -= OnElementPropertyChanged;
@@ -150,11 +163,36 @@ namespace Xamarin.Forms.Platform.UWP
 			{
 				IsPaneOpen = Shell.FlyoutIsPresented;
 			}
+			else if (e.PropertyName == Shell.FlyoutBackgroundColorProperty.PropertyName)
+			{
+				UpdateFlyoutBackgroundColor();
+			}
+		}
+
+		protected virtual void UpdateFlyoutBackgroundColor()
+		{
+
+			if (_shell.FlyoutBackgroundColor == Color.Default)
+			{
+				object color = null;
+				if (IsPaneOpen)
+					color = Resources["NavigationViewExpandedPaneBackground"];
+				else
+					color = Resources["NavigationViewDefaultPaneBackground"];
+
+
+				if (color is Brush brush)
+					FlyoutBackgroundColor = brush;
+				else if (color is Windows.UI.Color uiColor)
+					new SolidColorBrush(uiColor);
+			}
+			else
+				FlyoutBackgroundColor = _shell.FlyoutBackgroundColor.ToBrush();
 		}
 
 		protected virtual void OnElementSet(Shell shell)
 		{
-			if(_shell != null)
+			if (_shell != null)
 			{
 				(_shell as IShellController).ItemsCollectionChanged -= OnItemsCollectionChanged;
 			}
@@ -172,6 +210,7 @@ namespace Xamarin.Forms.Platform.UWP
 			((IShellController)Element).AddFlyoutBehaviorObserver(this);
 			((IShellController)shell).AddAppearanceObserver(this, shell);
 			(shell as IShellController).ItemsCollectionChanged += OnItemsCollectionChanged;
+			UpdateFlyoutBackgroundColor();
 		}
 
 		void OnItemsCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)

Xamarin.Forms.Platform.UAP/Shell/ShellStyles.xaml

@@ -2,6 +2,7 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:winui="using:Microsoft.UI.Xaml.Controls"
+    xmlns:contract4Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,4)"
     xmlns:xf="using:Xamarin.Forms.Platform.UWP">
     <DataTemplate x:Key="ShellFlyoutBaseShellItemTemplate">
         <winui:NavigationViewItem Content="{Binding Title}" Icon="{Binding FlyoutIcon, Converter={StaticResource ImageSourceIconElementConverter}}" />
@@ -27,4 +28,519 @@
 				VerticalAlignment="Center" />
         </xf:ShellToolbarItemRenderer>
     </DataTemplate>
+
+    <Style TargetType="xf:ShellRenderer" x:Key="ShellNavigationView">
+        <Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="CompactPaneLength" Value="{ThemeResource NavigationViewCompactPaneLength}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="winui:NavigationView">
+                    <Grid x:Name="RootGrid">
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="DisplayModeGroup">
+                                <VisualState x:Name="Compact" />
+
+                                <VisualState x:Name="Expanded">
+                                    <VisualState.Setters>
+                                        <Setter Target="RootSplitView.PaneBackground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutBackgroundColor}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Minimal">
+                                    <VisualState.Setters>
+                                        <Setter Target="HeaderContent.Margin" Value="{ThemeResource NavigationViewMinimalHeaderMargin}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="TopNavigationMinimal" />
+
+                                <VisualState x:Name="MinimalWithBackButton">
+                                    <VisualState.Setters>
+                                        <Setter Target="HeaderContent.Margin" Value="{ThemeResource NavigationViewMinimalHeaderMargin}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+
+                            <VisualStateGroup x:Name="TogglePaneGroup">
+                                <VisualState x:Name="TogglePaneButtonVisible" />
+                                <VisualState x:Name="TogglePaneButtonCollapsed" />
+                            </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="SettingsGroup">
+                                <VisualState x:Name="SettingsVisible" />
+                                <VisualState x:Name="SettingsCollapsed">
+                                    <VisualState.Setters>
+                                        <Setter Target="SettingsNavPaneItem.Visibility" Value="Collapsed" />
+                                        <Setter Target="SettingsTopNavPaneItem.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="MenuItemsHost.HorizontalAlignment" Value="Left"/>
+                                        <!-- This is essentially a TemplateBinding: -->
+                                        <Setter Target="MenuItemsHost.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}"/>
+                                        <Setter Target="SettingsNavPaneItem.HorizontalAlignment" Value="Left"/>
+                                        <Setter Target="SettingsNavPaneItem.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="PaneCustomContentBorder.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}"/>
+                                        <Setter Target="FooterContentBorder.HorizontalAlignment" Value="Left"/>
+                                        <Setter Target="FooterContentBorder.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}"/>
+                                    </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="PaneToggleButtonGrid.Visibility" Value="Collapsed" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+
+                        <Grid
+                            x:Name="PaneToggleButtonGrid"
+                            Margin="0,0,0,8"
+                            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">
+                                <Button
+                                    x:Name="NavigationViewBackButton"
+                                    Style="{StaticResource NavigationBackButtonNormalStyle}"
+                                    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"
+                                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneToggleButtonVisibility}"
+                                    VerticalAlignment="Top">
+                                    <TextBlock
+                                        x:Name="PaneTitleTextBlock" 
+                                        Grid.Column="0"
+                                        Text="{TemplateBinding PaneTitle}"
+                                        HorizontalAlignment="Left"
+                                        VerticalAlignment="Center"
+                                        Style="{StaticResource NavigationViewItemHeaderTextStyle}"/>
+                                </Button>
+                                <Grid
+                                    x:Name="PaneTitleHolder"
+                                    Visibility="Collapsed">
+                                    <ContentControl
+                                        x:Name="PaneTitlePresenter"
+                                        Margin="{ThemeResource NavigationViewPaneTitlePresenterMargin}"
+                                        IsTabStop="False"
+                                        HorizontalContentAlignment="Stretch"
+                                        VerticalContentAlignment="Stretch"/>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                        <Grid>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition Height="*"/>
+                            </Grid.RowDefinitions>
+
+                            <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}"
+                                      Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPaneVisibility}">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav" Width="{ThemeResource NavigationBackButtonWidth}"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="*" MinWidth="48"/>
+                                        <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"
+                                        Grid.Column="2"/>
+
+                                    <!-- Top nav list -->
+                                    <winui:NavigationViewList
+                                        AutomationProperties.LandmarkType="Navigation"
+                                        AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
+                                        x:Name="TopNavMenuItemsHost"
+                                        Grid.Column="3"
+                                        SelectionMode="Single"
+                                        IsItemClickEnabled="True"
+                                        ItemTemplate="{TemplateBinding MenuItemTemplate}"
+                                        ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}"
+                                        ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}"
+                                        ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}"
+                                        ScrollViewer.HorizontalScrollMode="Disabled"
+                                        ScrollViewer.HorizontalScrollBarVisibility="Hidden"
+                                        ScrollViewer.VerticalScrollMode="Disabled"
+                                        ScrollViewer.VerticalScrollBarVisibility="Hidden"
+                                        SingleSelectionFollowsFocus="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SingleSelectionFollowsFocus}">
+                                        <ListView.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <ItemsStackPanel Orientation="Horizontal"/>
+                                            </ItemsPanelTemplate>
+                                        </ListView.ItemsPanel>
+                                        <ListView.ItemContainerTransitions>
+                                            <TransitionCollection />
+                                        </ListView.ItemContainerTransitions>
+                                    </winui:NavigationViewList>
+
+                                    <Button 
+                                        x:Name="TopNavOverflowButton"
+                                        Grid.Column="4"
+                                        Content="More"
+                                        Style="{StaticResource NavigationViewOverflowButtonStyleWhenPaneOnTop}"
+                                        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OverflowButtonVisibility}">
+
+                                        <Button.Flyout>
+                                            <Flyout Placement="Bottom" ElementSoundMode="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ElementSoundMode}">
+                                                <Flyout.FlyoutPresenterStyle>
+                                                    <Style TargetType="FlyoutPresenter">
+                                                        <Setter Property="Padding" Value="0,8" />
+                                                        <!-- Set negative top margin to make the flyout align exactly with the button -->
+                                                        <Setter Property="Margin" Value="0,-4,0,0" />
+                                                    </Style>
+                                                </Flyout.FlyoutPresenterStyle>
+                                                <winui:NavigationViewList                                                     
+                                                    x:Name="TopNavMenuItemsOverflowHost" 
+                                                    ItemTemplate="{TemplateBinding MenuItemTemplate}"
+                                                    ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}"
+                                                    ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}"
+                                                    ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}"
+                                                    SingleSelectionFollowsFocus="False"
+                                                    IsItemClickEnabled="True"
+                                                    ElementSoundMode="{TemplateBinding ElementSoundMode}">
+                                                    <ListView.ItemContainerTransitions>
+                                                        <TransitionCollection />
+                                                    </ListView.ItemContainerTransitions>
+                                                </winui:NavigationViewList>
+                                            </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="12,0,12,0"
+                                            MinWidth="48"
+                                            IsTabStop="False"
+                                            HorizontalContentAlignment="Stretch"
+                                            VerticalContentAlignment="Center"/>
+                                    </Grid>
+
+                                    <ContentControl
+                                        x:Name="PaneFooterOnTopPane"
+                                        IsTabStop="False"
+                                        VerticalContentAlignment="Stretch"
+                                        HorizontalContentAlignment="Stretch"
+                                        Grid.Column="7" />
+                                    <Grid
+                                        Grid.Column="8" >
+                                        <winui:NavigationViewItem
+                                            x:Name="SettingsTopNavPaneItem"
+                                            Style="{ThemeResource MUX_NavigationViewSettingsItemStyleWhenOnTopPane}"
+                                            Icon="Setting"/>
+
+                                    </Grid>
+
+                                </Grid>
+                                <Border
+                                    x:Name="TopNavContentOverlayAreaGrid"
+                                    Child="{TemplateBinding ContentOverlay}" />
+                            </StackPanel>
+
+                            <SplitView
+                                x:Name="RootSplitView"
+                                Background="{TemplateBinding Background}"
+                                CompactPaneLength="{TemplateBinding CompactPaneLength}"
+                                DisplayMode="Inline"
+                                IsPaneOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsPaneOpen, Mode=TwoWay}"
+                                IsTabStop="False"
+                                OpenPaneLength="{TemplateBinding OpenPaneLength}"
+                                PaneBackground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutBackgroundColor}"
+                            
+                                Grid.Row="1">
+
+                                <SplitView.Pane>
+                                    <Grid 
+                                        x:Name="PaneContentGrid"
+                                        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" MinHeight="{StaticResource NavigationViewPaneHeaderRowMinHeight}"/>
+                                            <RowDefinition Height="Auto"/>
+                                            <RowDefinition Height="Auto"/>
+                                            <RowDefinition Height="8"/>
+                                            <!-- above list margin -->
+                                            <RowDefinition Height="*"/>
+                                            <RowDefinition Height="Auto"/>
+                                            <RowDefinition Height="Auto"/>
+                                            <RowDefinition Height="8"/>
+                                        </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 NavigationViewTopPaneHeight}"
+                                            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="{TemplateBinding CompactPaneLength}"/>
+                                        </Grid>
+
+                                        <ContentControl
+                                            x:Name="PaneCustomContentBorder"
+                                            IsTabStop="False"
+                                            VerticalContentAlignment="Stretch"
+                                            HorizontalContentAlignment="Stretch"
+                                            Grid.Row="4" />
+
+                                        <!-- Left nav list -->
+                                        <winui:NavigationViewList
+                                            x:Name="MenuItemsHost"
+                                            AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
+                                            Grid.Row="6"
+                                            Margin="0,0,0,20"
+                                            SelectionMode="Single"
+                                            IsItemClickEnabled="True"
+                                            HorizontalAlignment="Stretch"
+                                            SelectedItem="{TemplateBinding SelectedItem}"
+                                            ItemTemplate="{TemplateBinding MenuItemTemplate}"
+                                            ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}"
+                                            ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}"
+                                            ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}"
+                                            SingleSelectionFollowsFocus="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SingleSelectionFollowsFocus}"/>
+
+                                        <ContentControl
+                                            x:Name="FooterContentBorder"
+                                            IsTabStop="False"
+                                            VerticalContentAlignment="Stretch"
+                                            HorizontalContentAlignment="Stretch"
+                                            Grid.Row="7" />
+                                        <Grid
+                                            Grid.Row="8">
+                                            <winui:NavigationViewItem
+                                            x:Name="SettingsNavPaneItem"
+                                            Icon="Setting"/>
+                                        </Grid>
+
+                                    </Grid>
+                                </SplitView.Pane>
+
+                                <SplitView.Content>
+                                    <Grid x:Name="ContentGrid">
+                                        <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
+                                            AutomationProperties.LandmarkType="Main"
+                                            Grid.Row="2"
+                                            Grid.ColumnSpan="2"
+                                            Content="{TemplateBinding Content}"/>
+                                    </Grid>
+                                </SplitView.Content>
+                            </SplitView>
+
+                        </Grid>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    
+    
+    
 </ResourceDictionary>

Xamarin.Forms.Platform.UAP/Xamarin.Forms.Platform.UAP.csproj

@@ -76,10 +76,6 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
-    <Page Include="Shell\ShellStyles.xaml">
-      <Generator>MSBuild:Compile</Generator>
-      <SubType>Designer</SubType>
-    </Page>
     <Page Include="SliderStyle.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -98,6 +94,16 @@
       <Generator>MSBuild:Compile</Generator>
     </Page>
   </ItemGroup>
+  <ItemGroup Condition="$(TargetFramework) == 'uap10.0.16299'">
+    <Page Include="Shell\ShellStyles.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+  </ItemGroup>
+  <ItemGroup Condition="$(TargetFramework) == 'uap10.0.14393'">
+    <Page Remove="Shell\ShellStyles.xaml">
+    </Page>
+  </ItemGroup>
   <ItemGroup>
     <Compile Include="..\Xamarin.Forms.Core\StreamWrapper.cs" Link="StreamWrapper.cs" />
   </ItemGroup>