Improved IconsPage

Author: shugaoye

PassXYZ.Vault/Views/IconsPage.xaml

@@ -25,18 +25,18 @@
         </ToolbarItem>
     </ContentPage.ToolbarItems>
 
-    <Grid RowDefinitions="Auto,*">
-        <HorizontalStackLayout Margin="20" Grid.Row="0">
-            <Picker ItemsSource="{Binding FontFamilyNames}" SelectedItem="{Binding SelectedFontFamilyName}" />
+    <Grid RowDefinitions="Auto,Auto,*">
+        <Label x:Name="selectedIcon" Text="Please select a icon"
+               HorizontalTextAlignment="Start"
+               Margin="20"  Grid.Row="0"/>
 
-            <Label x:Name="selectedIcon" Text="Please select a icon"
-               HorizontalTextAlignment="Center"
-               Margin="10"
-                />
+        <Picker Margin="20" ItemsSource="{Binding FontFamilyNames}" SelectedItem="{Binding SelectedFontFamilyName}" 
+                    HorizontalOptions="StartAndExpand" Grid.Row="1" />
 
-        </HorizontalStackLayout>
-
-        <ScrollView Grid.Row="1">
+        <SearchBar Margin="20" x:Name="searchBar" SearchButtonPressed="OnSearchButtonPressed" 
+                       WidthRequest="200" HorizontalOptions="EndAndExpand" Grid.Row="1" />
+        
+        <ScrollView Grid.Row="2">
             <FlexLayout x:Name="flexLayout"
                         Wrap="Wrap" JustifyContent="SpaceAround" />
         </ScrollView>

PassXYZ.Vault/Views/IconsPage.xaml.cs

@@ -54,6 +54,7 @@ void OnImageButtonClicked(object? sender, EventArgs e)
             var glyph = glyphs.FirstOrDefault(x => x.Value == fontImageSource.Glyph);
             Debug.WriteLine($"ImageButton clicked with Glyph: {glyph.Key}");
             selectedIcon.Text = $"The selected icon is {glyph.Key}.";
+            // searchBar.Text = glyph.Key;
             selectedFontIcon = new PxFontIcon { FontFamily = selectedFontFamilyName, Glyph = glyph.Value };
             if(selectedFontImageSource != null) 
             {
@@ -68,9 +69,13 @@ void OnImageButtonClicked(object? sender, EventArgs e)
         }
     }
 
-    async Task LoadIcons()
+    async Task LoadIcons(string keyword = "")
     {
         glyphs = FontData.GetGlyphs(selectedFontFamilyType);
+        if (!string.IsNullOrEmpty(keyword))
+        {
+            glyphs = glyphs.Where(x => x.Key.Contains(keyword)).OrderBy(x => x.Key).ToDictionary(x => x.Key, x => x.Value);
+        }
 
         await Task.Run(async () =>
         {
@@ -117,4 +122,11 @@ private async void OnSaveClicked(object sender, EventArgs e)
         updateIcon?.Invoke(selectedFontIcon);
         _ = await Shell.Current.Navigation.PopAsync();
     }
+
+    void OnSearchButtonPressed(object sender, EventArgs e)
+    {
+        SearchBar searchBar = (SearchBar)sender;
+        flexLayout.Children.Clear();
+        LoadIcons(searchBar.Text);
+    }
 }