From 11762dd7b9ff954a163d7beed0352e85f27f609d Mon Sep 17 00:00:00 2001
From: michael-hawker <24302614+michael-hawker@users.noreply.github.com>
Date: Mon, 18 May 2020 02:23:00 -0700
Subject: [PATCH 1/4] Initial Update for NavigationView Style in Sample App

Problem: NavigationViewList removed and replaced with ItemsRepeater
TODO: Selection not tracked properly by app, so menu isn't appearing underneath
Also: focus is grabbed from searchbox, so searching is difficult, but menu appears
---
 .../Styles/Generic.xaml                       | 71 ++++++++++++++-----
 1 file changed, 55 insertions(+), 16 deletions(-)

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/Styles/Generic.xaml b/Microsoft.Toolkit.Uwp.SampleApp/Styles/Generic.xaml
index 2801a0bd232..a718f6cdf3a 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/Styles/Generic.xaml
+++ b/Microsoft.Toolkit.Uwp.SampleApp/Styles/Generic.xaml
@@ -1119,16 +1119,30 @@
                                         Grid.Column="2"/>
 
                                     <!-- Top nav list -->
-                                    <winui:NavigationViewList AutomationProperties.LandmarkType="Navigation" 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>
+                                    <winui:ItemsRepeaterScrollHost
+                                            AutomationProperties.LandmarkType="Navigation"
+                                            Grid.Column="3"
+                                            ScrollViewer.HorizontalScrollMode="Disabled"
+                                            ScrollViewer.HorizontalScrollBarVisibility="Hidden"
+                                            ScrollViewer.VerticalScrollMode="Disabled"
+                                            ScrollViewer.VerticalScrollBarVisibility="Hidden">
+                                        <ScrollViewer
+                                            HorizontalScrollMode="Disabled"
+                                            HorizontalScrollBarVisibility="Hidden"
+                                            VerticalScrollMode="Disabled"
+                                            VerticalScrollBarVisibility="Hidden">
+                                            <winui:ItemsRepeater 
+                                                x:Name="TopNavMenuItemsHost"
+                                                ItemTemplate="{TemplateBinding MenuItemTemplateSelector}"
+                                                AutomationProperties.LandmarkType="Navigation"
+                                                AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
+                                                AutomationProperties.AccessibilityView = "Content">
+                                                <winui:ItemsRepeater.Layout>
+                                                    <winui:StackLayout Orientation="Horizontal"/>
+                                                </winui:ItemsRepeater.Layout>
+                                            </winui:ItemsRepeater>
+                                        </ScrollViewer>
+                                    </winui:ItemsRepeaterScrollHost>
 
                                     <Button 
                                         x:Name="TopNavOverflowButton"
@@ -1150,11 +1164,18 @@
                                                         <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">
-                                                    <ListView.ItemContainerTransitions>
-                                                        <TransitionCollection />
-                                                    </ListView.ItemContainerTransitions>
-                                                </winui:NavigationViewList>
+                                                <winui:ItemsRepeaterScrollHost>
+                                                    <ScrollViewer VerticalScrollBarVisibility="Auto">
+                                                        <winui:ItemsRepeater
+                                                                    x:Name="TopNavMenuItemsOverflowHost"
+                                                                    ItemTemplate="{TemplateBinding MenuItemTemplateSelector}"
+                                                                    AutomationProperties.AccessibilityView = "Content">
+                                                            <winui:ItemsRepeater.Layout>
+                                                                <winui:StackLayout Orientation="Vertical"/>
+                                                            </winui:ItemsRepeater.Layout>
+                                                        </winui:ItemsRepeater>
+                                                    </ScrollViewer>
+                                                </winui:ItemsRepeaterScrollHost>
                                             </Flyout>
                                         </Button.Flyout>
                                     </Button>
@@ -1282,7 +1303,25 @@
                                             Grid.Row="4" />
 
                                         <!-- Left nav list -->
-                                        <winui:NavigationViewList x:Name="MenuItemsHost" Grid.Row="6" SingleSelectionFollowsFocus="False" 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}" />
+                                        <winui:ItemsRepeaterScrollHost
+                                            Grid.Row="6"
+                                            Margin="0,0,0,20"
+                                            HorizontalAlignment="Stretch"
+                                            VerticalAlignment="Top">
+                                            <ScrollViewer
+                                                TabNavigation="Once"
+                                                VerticalScrollBarVisibility="Auto">
+                                                <winui:ItemsRepeater
+                                                        x:Name="MenuItemsHost"
+                                                        ItemTemplate="{TemplateBinding MenuItemTemplateSelector}"
+                                                        AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
+                                                        AutomationProperties.AccessibilityView = "Content">
+                                                    <winui:ItemsRepeater.Layout>
+                                                        <winui:StackLayout Orientation="Vertical"/>
+                                                    </winui:ItemsRepeater.Layout>
+                                                </winui:ItemsRepeater>
+                                            </ScrollViewer>
+                                        </winui:ItemsRepeaterScrollHost>
 
                                         <ContentControl
                                             x:Name="FooterContentBorder"

From 74d848723ecedd953af3e4d82c6d940fd0840ca8 Mon Sep 17 00:00:00 2001
From: michael-hawker <24302614+michael-hawker@users.noreply.github.com>
Date: Wed, 20 May 2020 14:43:24 -0700
Subject: [PATCH 2/4] Further update dependencies

---
 .../Microsoft.Toolkit.Uwp.SampleApp.csproj                    | 4 ++--
 .../Microsoft.Toolkit.Uwp.UI.Controls.Layout.csproj           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
index d1cbca55189..6b2945ec7b1 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
+++ b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
@@ -115,7 +115,7 @@
       <Version>6.1.0-build.6</Version>
     </PackageReference>
     <PackageReference Include="Microsoft.UI.Xaml">
-      <Version>2.3.200213001</Version>
+      <Version>2.4.2</Version>
     </PackageReference>
     <PackageReference Include="Monaco.Editor">
       <Version>0.7.0-alpha</Version>
@@ -1633,4 +1633,4 @@
     <Message Text="CSFiles: @(GeneratedCSFiles->'&quot;%(Identity)&quot;')" />
     <Exec Command="for %%f in (@(GeneratedCSFiles->'&quot;%(Identity)&quot;')) do echo #pragma warning disable &gt; %%f.temp &amp;&amp; type %%f | findstr /v /b &quot;#pragma&quot; &gt;&gt; %%f.temp &amp;&amp; move /y %%f.temp %%f &gt; NUL" />
   </Target>
-</Project>
\ No newline at end of file
+</Project>
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Layout/Microsoft.Toolkit.Uwp.UI.Controls.Layout.csproj b/Microsoft.Toolkit.Uwp.UI.Controls.Layout/Microsoft.Toolkit.Uwp.UI.Controls.Layout.csproj
index b1f67ff8750..b9b96f32d13 100644
--- a/Microsoft.Toolkit.Uwp.UI.Controls.Layout/Microsoft.Toolkit.Uwp.UI.Controls.Layout.csproj
+++ b/Microsoft.Toolkit.Uwp.UI.Controls.Layout/Microsoft.Toolkit.Uwp.UI.Controls.Layout.csproj
@@ -15,7 +15,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.UI.Xaml" Version="2.3.200213001" />
+    <PackageReference Include="Microsoft.UI.Xaml" Version="2.4.2" />
   </ItemGroup>
 
   <Import Project="$(MSBuildSDKExtrasTargets)" Condition="Exists('$(MSBuildSDKExtrasTargets)')" />

From 0eeffb451562ec728b23e4acc8bf8b105af22649 Mon Sep 17 00:00:00 2001
From: michael-hawker <24302614+michael-hawker@users.noreply.github.com>
Date: Tue, 26 May 2020 12:48:30 -0700
Subject: [PATCH 3/4] Put note on workaround for WinUI 2.4, leave code for
 prev/fix

---
 Microsoft.Toolkit.Uwp.SampleApp/Shell.SamplePicker.cs | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/Shell.SamplePicker.cs b/Microsoft.Toolkit.Uwp.SampleApp/Shell.SamplePicker.cs
index d05e0584a69..be888c5b9fa 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/Shell.SamplePicker.cs
+++ b/Microsoft.Toolkit.Uwp.SampleApp/Shell.SamplePicker.cs
@@ -6,6 +6,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Numerics;
+using System.Threading;
 using System.Threading.Tasks;
 using Microsoft.Toolkit.Uwp.Helpers;
 using Microsoft.Toolkit.Uwp.SampleApp.Pages;
@@ -126,7 +127,15 @@ SamplePickerGridView.ItemsSource is Sample[] currentSamples &&
 
         private void NavView_ItemInvoked(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewItemInvokedEventArgs args)
         {
-            if (args.InvokedItem is SampleCategory category)
+            //// Temp Workaround for WinUI Bug https://github.com/microsoft/microsoft-ui-xaml/issues/2520
+            var invokedItem = args.InvokedItem;
+            if (invokedItem is FrameworkElement fe && fe.DataContext is SampleCategory cat2)
+            {
+                invokedItem = cat2;
+            }
+            //// End Workaround - args.InvokedItem
+
+            if (invokedItem is SampleCategory category)
             {
                 if (SamplePickerGrid.Visibility != Visibility.Collapsed && _selectedCategory == category)
                 {

From 54b98617a6f26f6ad4475936f1bb853b8ac8230f Mon Sep 17 00:00:00 2001
From: michael-hawker <24302614+michael-hawker@users.noreply.github.com>
Date: Wed, 27 May 2020 15:04:31 -0700
Subject: [PATCH 4/4] Pull in system AutoSuggestBox style to remove border in
 TokenizingTextBox added by WinUI 2.4

---
 .../TokenizingTextBoxItem.AutoSuggestBox.xaml | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TokenizingTextBox/TokenizingTextBoxItem.AutoSuggestBox.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TokenizingTextBox/TokenizingTextBoxItem.AutoSuggestBox.xaml
index 6941e0472b8..1a6b0bfe6f4 100644
--- a/Microsoft.Toolkit.Uwp.UI.Controls/TokenizingTextBox/TokenizingTextBoxItem.AutoSuggestBox.xaml
+++ b/Microsoft.Toolkit.Uwp.UI.Controls/TokenizingTextBox/TokenizingTextBoxItem.AutoSuggestBox.xaml
@@ -305,6 +305,7 @@
                                     ItemTemplate="{Binding Path=Owner.SuggestedItemTemplate, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                     ItemsSource="{Binding Path=Owner.SuggestedItemsSource, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                     PlaceholderText="{Binding Path=Owner.PlaceholderText, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                    Style="{StaticResource SystemAutoSuggestBoxStyle}"
                                     Text="{Binding Text, Mode=TwoWay}"
                                     TextBoxStyle="{StaticResource TokenizingTextBoxTextBoxStyle}"/>
                     <!-- TODO: We need to only do this for our last one OR create an instance per item - QueryIcon="{Binding Path=Owner.QueryIcon, RelativeSource={RelativeSource Mode=TemplatedParent}}" -->
@@ -314,5 +315,68 @@
             </Setter.Value>
         </Setter>
     </Style>
+
+    <!-- Copy of System Style from 18362 to try and workaround WinUI Styles -->
+    <Style TargetType="AutoSuggestBox" x:Key="SystemAutoSuggestBoxStyle">
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="TextBoxStyle" Value="{StaticResource AutoSuggestBoxTextBoxStyle}" />
+        <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="AutoSuggestBox">
+                    <Grid x:Name="LayoutRoot">
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="Orientation">
+                                <VisualState x:Name="Landscape" />
+                                <VisualState x:Name="Portrait" />
+
+                            </VisualStateGroup>
+
+                        </VisualStateManager.VisualStateGroups>
+
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*" />
+                        </Grid.RowDefinitions>
+
+                        <TextBox x:Name="TextBox"
+                            Style="{TemplateBinding TextBoxStyle}"
+                            PlaceholderText="{TemplateBinding PlaceholderText}"
+                            Header="{TemplateBinding Header}"
+                            Width="{TemplateBinding Width}"
+                            ScrollViewer.BringIntoViewOnFocusChange="False"
+                            Canvas.ZIndex="0"
+                            Margin="0"
+                            DesiredCandidateWindowAlignment="BottomEdge"
+                            UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}" />
+
+                        <Popup x:Name="SuggestionsPopup">
+                            <Border x:Name="SuggestionsContainer">
+                                <ListView x:Name="SuggestionsList"
+                                    Background="{ThemeResource AutoSuggestBoxSuggestionsListBackground}"
+                                    BorderThickness="{ThemeResource AutoSuggestListBorderThemeThickness}"
+                                    BorderBrush="{ThemeResource AutoSuggestBoxSuggestionsListBorderBrush}"
+                                    DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
+                                    IsItemClickEnabled="True"
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
+                                    ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
+                                    MaxHeight="{ThemeResource AutoSuggestListMaxHeight}"
+                                    Margin="{ThemeResource AutoSuggestListMargin}"
+                                    Padding="{ThemeResource AutoSuggestListPadding}" />
+                            </Border>
+                        </Popup>
+
+                    </Grid>
+
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 </ResourceDictionary>