Done search field suggestions template

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>

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" : "";
+        }
+    }
+}

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>

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)
+        {
+
+        }
     }
 }