Improved FontData and IconsPage

Author: shugaoye

PassXYZ.Vault/Views/IconsPage.xaml

@@ -26,10 +26,15 @@
     </ContentPage.ToolbarItems>
 
     <Grid RowDefinitions="Auto,*">
-        <Label x:Name="selectedIcon" Text="Please select a icon"
+        <HorizontalStackLayout Margin="20" Grid.Row="0">
+            <Picker ItemsSource="{Binding FontFamilyNames}" SelectedItem="{Binding SelectedFontFamilyName}" />
+
+            <Label x:Name="selectedIcon" Text="Please select a icon"
                HorizontalTextAlignment="Center"
                Margin="10"
-               Grid.Row="0" />
+                />
+
+        </HorizontalStackLayout>
 
         <ScrollView Grid.Row="1">
             <FlexLayout x:Name="flexLayout"

PassXYZ.Vault/Views/IconsPage.xaml.cs

@@ -9,28 +9,58 @@ public partial class IconsPage : ContentPage
 {
     Dictionary<string, string> glyphs;
     private Action<PxFontIcon> updateIcon;
-    PxFontIcon selectedFontIcon = new PxFontIcon { FontFamily = "FontAwesomeBrands", Glyph = FontAwesomeBrands.FontAwesomeAlt };
+    Type selectedFontFamilyType = FontData.FontFamily[nameof(FontType.FontAwesomeBrands)];
+    PxFontIcon selectedFontIcon = new PxFontIcon { FontFamily = nameof(FontType.FontAwesomeBrands), Glyph = FontAwesomeBrands.FontAwesomeAlt };
+    FontImageSource? selectedFontImageSource = default;
 
     public IconsPage()
 	{
 		InitializeComponent();
         LoadIcons();
         Debug.WriteLine("Loading icons ...");
+        this.BindingContext = this;
     }
 
     public IconsPage(Action<PxFontIcon> callback) : this()
     {
         this.updateIcon = callback;
     }
 
+    List<string> fontFamilyNames = FontData.FontFamily.Keys.ToList();
+    public List<string> FontFamilyNames { get => fontFamilyNames; }
+
+    string selectedFontFamilyName = nameof(FontType.FontAwesomeBrands);
+    public string SelectedFontFamilyName
+    {
+        get => selectedFontFamilyName;
+        set
+        {
+            if (selectedFontFamilyName != value)
+            {
+                selectedFontFamilyName = value;
+                selectedFontFamilyType = FontData.FontFamily[value];
+                //glyphs = FontData.GetGlyphs(selectedFontFamilyType);
+                flexLayout.Children.Clear();
+                LoadIcons();
+                OnPropertyChanged();
+            }
+        }
+    }
+
     void OnImageButtonClicked(object? sender, EventArgs e)
     {
         if (sender is ImageButton imageButton && imageButton.Source is FontImageSource fontImageSource)
         {
             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}.";
-            selectedFontIcon = new PxFontIcon { FontFamily = "FontAwesomeBrands", Glyph = glyph.Value };
+            selectedFontIcon = new PxFontIcon { FontFamily = selectedFontFamilyName, Glyph = glyph.Value };
+            if(selectedFontImageSource != null) 
+            {
+                selectedFontImageSource.Color = Microsoft.Maui.Graphics.Colors.Black;
+            }
+            selectedFontImageSource = fontImageSource;
+            fontImageSource.Color = (Color)Application.Current.Resources["Primary"];
         }
         else
         {
@@ -40,7 +70,7 @@ void OnImageButtonClicked(object? sender, EventArgs e)
 
     async Task LoadIcons()
     {
-        glyphs = FontData.GetGlyphs(typeof(FontAwesomeBrands));
+        glyphs = FontData.GetGlyphs(selectedFontFamilyType);
 
         await Task.Run(async () =>
         {
@@ -51,7 +81,7 @@ await Task.Run(async () =>
                 {
                     Source = new FontImageSource
                     {
-                        FontFamily = "FontAwesomeBrands",
+                        FontFamily = selectedFontFamilyName,
                         Glyph = glyph.Value,
                         Size = 32,
                         Color = Microsoft.Maui.Graphics.Colors.Black