From c11d1e3dcf516960f560a051e05aab0206892568 Mon Sep 17 00:00:00 2001
From: Michael Gordeev <michael.xfox@outlook.com>
Date: Tue, 3 Dec 2019 16:46:02 +0300
Subject: [PATCH] Done search field suggestions template

---
 FoxTube.Core/FoxTube.Core.csproj        |  1 +
 FoxTube.Core/Models/SearchSuggestion.cs | 15 +++++++++++++++
 FoxTube/MainPage.xaml                   | 19 +++++++++++++++++--
 FoxTube/MainPage.xaml.cs                | 24 ++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 FoxTube.Core/Models/SearchSuggestion.cs

diff --git a/FoxTube.Core/FoxTube.Core.csproj b/FoxTube.Core/FoxTube.Core.csproj
index 29fbcb8..379eda5 100644
--- a/FoxTube.Core/FoxTube.Core.csproj
+++ b/FoxTube.Core/FoxTube.Core.csproj
@@ -142,6 +142,7 @@
     <Compile Include="Models\Inbox\InboxItem.cs" />
     <Compile Include="Models\IRefreshable.cs" />
     <Compile Include="Models\Notifications.cs" />
+    <Compile Include="Models\SearchSuggestion.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
     <EmbeddedResource Include="Properties\FoxTube.Core.rd.xml" />
   </ItemGroup>
diff --git a/FoxTube.Core/Models/SearchSuggestion.cs b/FoxTube.Core/Models/SearchSuggestion.cs
new file mode 100644
index 0000000..555dcab
--- /dev/null
+++ b/FoxTube.Core/Models/SearchSuggestion.cs
@@ -0,0 +1,15 @@
+namespace FoxTube.Core.Models
+{
+    public class SearchSuggestion
+    {
+        public string Icon { get; set; }
+        public string Text { get; set; }
+
+        public SearchSuggestion(string text) : this(text, false) { }
+        public SearchSuggestion(string text, bool isHistoryEntry)
+        {
+            Text = text;
+            Icon = isHistoryEntry ? "\xE81C" : "";
+        }
+    }
+}
diff --git a/FoxTube/MainPage.xaml b/FoxTube/MainPage.xaml
index 20e7350..e022ca0 100644
--- a/FoxTube/MainPage.xaml
+++ b/FoxTube/MainPage.xaml
@@ -7,7 +7,8 @@
     mc:Ignorable="d"
     xmlns:ui="using:Microsoft.UI.Xaml.Controls"
     xmlns:controls="using:FoxTube.Controls"
-    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls">
+    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    xmlns:models="using:FoxTube.Core.Models">
     <Page.Background>
         <AcrylicBrush BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemAltHighColor}" FallbackColor="{ThemeResource SystemAltHighColor}" TintOpacity=".5"/>
     </Page.Background>
@@ -32,7 +33,21 @@
                            PaneOpening="NavigationView_PaneOpening">
 
             <ui:NavigationView.AutoSuggestBox>
-                <AutoSuggestBox QueryIcon="Find" PlaceholderText="Search YouTube..."/>
+                <AutoSuggestBox QueryIcon="Find" PlaceholderText="Search YouTube..." TextChanged="AutoSuggestBox_TextChanged" QuerySubmitted="AutoSuggestBox_QuerySubmitted" TextMemberPath="Text">
+                    <AutoSuggestBox.ItemTemplate>
+                        <DataTemplate x:DataType="models:SearchSuggestion">
+                            <Grid ColumnSpacing="10">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="auto"/>
+                                    <ColumnDefinition/>
+                                </Grid.ColumnDefinitions>
+
+                                <FontIcon Glyph="{Binding Icon}"/>
+                                <TextBlock Grid.Column="1" TextTrimming="CharacterEllipsis" Text="{Binding Text}"/>
+                            </Grid>
+                        </DataTemplate>
+                    </AutoSuggestBox.ItemTemplate>
+                </AutoSuggestBox>
             </ui:NavigationView.AutoSuggestBox>
 
             <ui:NavigationView.PaneFooter>
diff --git a/FoxTube/MainPage.xaml.cs b/FoxTube/MainPage.xaml.cs
index c199e5b..e597046 100644
--- a/FoxTube/MainPage.xaml.cs
+++ b/FoxTube/MainPage.xaml.cs
@@ -2,6 +2,7 @@
 using FoxTube.Core.Models;
 using FoxTube.Views;
 using System;
+using System.Collections.Generic;
 using Windows.ApplicationModel.Core;
 using Windows.Foundation.Metadata;
 using Windows.UI;
@@ -131,5 +132,28 @@ namespace FoxTube
             else
                 (content.Content as IRefreshable)?.RefreshPage();
         }
+
+        void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
+        {
+            if (sender.Text.Length < 3 || args.Reason != AutoSuggestionBoxTextChangeReason.UserInput)
+                return;
+
+            sender.ItemsSource = new List<SearchSuggestion>
+            {
+                new SearchSuggestion("Suggestion 0"),
+                new SearchSuggestion("Suggestion 1"),
+                new SearchSuggestion("Suggestion 2"),
+                new SearchSuggestion("Suggestion 3"),
+                new SearchSuggestion("Suggestion 4"),
+                new SearchSuggestion("History entry 0", true),
+                new SearchSuggestion("History entry 1", true),
+                new SearchSuggestion("History entry 2", true)
+            };
+        }
+
+        void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
+        {
+
+        }
     }
 }