Gallery Revamp: Design Iconography Page

source/iNKORE.UI.WPF.Modern.Gallery/App.xaml

@@ -30,6 +30,7 @@
                             <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="Transparent" />
                             <SolidColorBrush x:Key="AppContentBackgroundBrush" Color="{StaticResource SystemAltHighColor}" />
                             <StaticResource x:Key="ControlExampleDisplayBrush" ResourceKey="SolidBackgroundFillColorBaseBrush" />
+                            <StaticResource x:Key="GalleryBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
                         </ResourceDictionary>
 
                         <ResourceDictionary x:Key="Dark" ui:ThemeDictionary.Key="Dark">
@@ -47,6 +48,7 @@
                             <SolidColorBrush x:Key="AppContentBackgroundBrush" Color="#FF282828" />
                             <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="Transparent" />
                             <StaticResource x:Key="ControlExampleDisplayBrush" ResourceKey="SolidBackgroundFillColorBaseBrush" />
+                            <StaticResource x:Key="GalleryBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
                         </ResourceDictionary>
 
                         <ResourceDictionary x:Key="HighContrast" ui:ThemeDictionary.Key="HighContrast">
@@ -60,6 +62,7 @@
                             <SolidColorBrush x:Key="SearchBoxBorderBrush" Color="{DynamicResource SystemColorWindowTextColor}" />
                             <SolidColorBrush x:Key="ControlExampleDisplayBrush" Color="{DynamicResource SystemColorWindowColor}" />
                             <SolidColorBrush x:Key="PageHeaderForegroundBrush" Color="{DynamicResource SystemColorWindowTextColor}" />
+                            <SolidColorBrush x:Key="GalleryBorderBrush" Color="{DynamicResource SystemColorWindowColor}" />
                         </ResourceDictionary>
                     </ui:ThemeResources.ThemeDictionaries>
                 </ui:ThemeResources>

source/iNKORE.UI.WPF.Modern.Gallery/Data/IconsDataSource.cs

@@ -0,0 +1,158 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using iNKORE.UI.WPF.Modern.Gallery.DataModel;
+
+namespace iNKORE.UI.WPF.Modern.Gallery.Helpers;
+
+internal class IconsDataSource
+{
+    public static IconsDataSource Instance { get; } = new();
+
+    public static List<IconData> Icons => Instance.icons;
+
+    // Public list of available icon sets discovered via reflection
+    public List<string> AvailableSets { get; } = new();
+
+    // Current active set name (null = all)
+    public string ActiveSet { get; private set; }
+
+    private List<IconData> icons = new();
+
+    private IconsDataSource() { }
+
+    public object _lock = new();
+
+    public async Task<List<IconData>> LoadIcons()
+    {
+        // Yield once to keep this method truly asynchronous without changing logic.
+        await Task.Yield();
+        // If already loaded, return current list
+        lock (_lock)
+        {
+            if (icons.Count != 0)
+            {
+                return icons;
+            }
+        }
+
+        // Try reflection-first: enumerate types in Common.IconKeys namespace
+        try
+        {
+            var assembly = typeof(iNKORE.UI.WPF.Modern.Common.IconKeys.FontDictionary).Assembly;
+            var types = assembly.GetTypes().Where(t => t.IsClass && t.IsSealed && t.IsAbstract && t.Namespace == "iNKORE.UI.WPF.Modern.Common.IconKeys");
+            var discovered = new List<IconData>();
+
+            foreach (var type in types)
+            {
+                // collect a set name for the class
+                var setName = type.Name;
+                // Try public static fields and properties of type FontIconData
+                var fields = type.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static);
+                foreach (var f in fields)
+                {
+                    if (f.FieldType.FullName == "iNKORE.UI.WPF.Modern.Common.IconKeys.FontIconData")
+                    {
+                        try
+                        {
+                            var value = f.GetValue(null);
+                            var glyphProp = value?.GetType().GetProperty("Glyph");
+                            var glyph = glyphProp?.GetValue(value) as string;
+                            var familyProp = value?.GetType().GetProperty("FontFamily");
+                            var family = familyProp?.GetValue(value) as System.Windows.Media.FontFamily;
+                            var name = f.Name;
+                            var data = new IconData { Name = name, Glyph = glyph, Set = setName, FontFamily = family };
+                            discovered.Add(data);
+                        }
+                        catch { }
+                    }
+                }
+
+                var props = type.GetProperties(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static);
+                foreach (var p in props)
+                {
+                    if (p.PropertyType.FullName == "iNKORE.UI.WPF.Modern.Common.IconKeys.FontIconData")
+                    {
+                        try
+                        {
+                            var value = p.GetValue(null);
+                            var glyphProp = value?.GetType().GetProperty("Glyph");
+                            var glyph = glyphProp?.GetValue(value) as string;
+                            var familyProp = value?.GetType().GetProperty("FontFamily");
+                            var family = familyProp?.GetValue(value) as System.Windows.Media.FontFamily;
+                            var name = p.Name;
+                            var data = new IconData { Name = name, Glyph = glyph, Set = setName, FontFamily = family };
+                            discovered.Add(data);
+                        }
+                        catch { }
+                    }
+                }
+
+                if (discovered.Any(d => d.Set == setName))
+                {
+                    AvailableSets.Add(setName);
+                }
+            }
+
+            if (discovered.Count > 0)
+            {
+                lock (_lock)
+                {
+                    icons = discovered.OrderBy(i => i.Name).ToList();
+                }
+                // Ensure legacy/alias sets are present so the UI can show them
+                EnsureLegacySets();
+                return icons;
+            }
+        }
+        catch
+        {
+            // reflection failed; no fallback
+        }
+
+        return icons;
+    }
+
+    //private static string ToCode(string glyph)
+    //{
+    //    if (string.IsNullOrEmpty(glyph)) return string.Empty;
+    //    // glyph is a single-character string; convert to hex code (without leading 0x)
+    //    var ch = glyph[0];
+    //    return ((int)ch).ToString("X4");
+    //}
+
+    // Set active set and return filtered icons
+    public List<IconData> SetActiveSet(string setName)
+    {
+        // Normalize legacy aliases to concrete set names when possible
+        //if (string.Equals(setName, "SegoeMDL2Assets", StringComparison.OrdinalIgnoreCase) ||
+        //    string.Equals(setName, "Segoe MDL2 Assets", StringComparison.OrdinalIgnoreCase))
+        //{
+        //    // These glyphs generally live in the JSON data under empty Set (or specific set names).
+        //    // Treat this alias as a request to show all non-Fluent-only icons.
+        //    ActiveSet = setName;
+        //    return icons.Where(i => !i.IsSegoeFluentOnly).ToList();
+        //}
+
+        //if (string.Equals(setName, "SegoeIcons", StringComparison.OrdinalIgnoreCase) ||
+        //    string.Equals(setName, "Segoe Icons", StringComparison.OrdinalIgnoreCase))
+        //{
+        //    // No dedicated SegoeIcons set in the built-in keys; treat as all icons (fallback).
+        //    ActiveSet = setName;
+        //    return icons;
+        //}
+
+        ActiveSet = setName;
+        if (string.IsNullOrEmpty(setName)) return icons;
+        return icons.Where(i => i.Set == setName).ToList();
+    }
+
+    private void EnsureLegacySets()
+    {
+    // No-op: legacy set aliases are handled in SetActiveSet().
+    }
+}

source/iNKORE.UI.WPF.Modern.Gallery/DataModel/Data/Controls.Foundation.json

@@ -24,6 +24,30 @@
             "Description": "Design guidance and resources",
             "Items":
             [
+                {
+                    "UniqueId": "Iconography",
+                    "Title": "Iconography",
+                    "Subtitle": "Segoe Fluent Icons and MDL2 Assets",
+                    "ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png",
+                    "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png",
+                    "Description": "",
+                    "Content": "",
+                    "IncludedInBuild": true,
+                    "IsNew": false,
+                    "IsUpdated": false,
+                    "Docs":
+                    [
+                        {
+                            "Title": "Iconography in Windows 11",
+                            "Uri": "https://learn.microsoft.com/windows/apps/design/signature-experiences/iconography#system-icons"
+                        },
+                        {
+                            "Title": "Segoe Fluent Icons font",
+                            "Uri": "https://learn.microsoft.com/windows/apps/design/style/segoe-fluent-icons-font"
+                        }
+                    ],
+                    "RelatedControls": []
+                },
                 {
                     "UniqueId": "Typography",
                     "Title": "Typography",
@@ -68,4 +92,4 @@
             ]
         }
     ]
-}
+}

source/iNKORE.UI.WPF.Modern.Gallery/DataModel/IconData.cs

@@ -0,0 +1,47 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+using System;
+using System.Collections.Generic;
+using System.Windows.Media;
+using iNKORE.UI.WPF.Modern.Common.IconKeys;
+
+namespace iNKORE.UI.WPF.Modern.Gallery.DataModel
+{
+    public class IconData
+    {
+        public string Name { get; set; }
+        // Which icon set this icon came from (e.g. "SegoeFluentIcons", "FluentSystemIcons.Regular")
+        public string Set { get; set; }
+        public string[] Tags { get; set; } = Array.Empty<string>();
+        // The actual font to use for rendering this glyph (important for Fluent System Icons)
+        public FontFamily FontFamily { get; set; }
+
+        public string Code { get; protected set; }
+
+
+        private string p_glyph;
+        public string Glyph
+        {
+            get => this.p_glyph;
+            set
+            {
+                this.p_glyph = value;
+                this.Code = ToCode(this.p_glyph);
+            }
+        }
+
+        public string CodeGlyph => string.IsNullOrWhiteSpace(Code) ? string.Empty : "\\u" + Code;
+        public string TextGlyph => string.IsNullOrWhiteSpace(Code) ? string.Empty : "&#x" + Code + ";";
+
+        // WPF doesn't have Symbol enum like WinUI
+        public string SymbolName => null;
+
+
+        public static string ToCode(string glyph)
+        {
+            var codepoint = FontIconData.ToUtf32(glyph);
+            return $"{codepoint:X}";
+        }
+    }
+}

source/iNKORE.UI.WPF.Modern.Gallery/Navigation/NavigationRootPage.xaml

@@ -121,6 +121,14 @@
                         <ui:FontIcon Glyph="&#xEB3C;" />
                     </ui:NavigationViewItem.Icon>
                     <ui:NavigationViewItem.MenuItems>
+                        <ui:NavigationViewItem
+                            x:Name="IconographyItem"
+                            Content="Iconography"
+                            Tag="Iconography">
+                            <ui:NavigationViewItem.Icon>
+                                <ui:FontIcon Glyph="&#xED58;" />
+                            </ui:NavigationViewItem.Icon>
+                        </ui:NavigationViewItem>
                         <ui:NavigationViewItem
                             x:Name="TypographyItem"
                             Content="Typography"

source/iNKORE.UI.WPF.Modern.Gallery/Navigation/NavigationRootPage.xaml.cs

@@ -293,19 +293,36 @@ private void OnNavigationViewSelectionChanged(NavigationView sender, NavigationV
                     _lastItem = item;
                     rootFrame.Navigate(item);
                 }
+                else if (selectedItem?.Tag?.ToString() == "Iconography")
+                {
+                    var iconographyId = "Iconography";
+                    if (_lastItem?.ToString() == iconographyId) return;
+                    _lastItem = iconographyId;
+
+                    // Find Iconography item from the data source
+                    var iconographyItem = ControlInfoDataSource.Instance.Realms
+                        .SelectMany(r => r.Groups)
+                        .SelectMany(g => g.Items)
+                        .FirstOrDefault(i => i.UniqueId == "Iconography");
+
+                    if (iconographyItem != null)
+                    {
+                        rootFrame.Navigate(ItemPage.Create(iconographyItem));
+                    }
+                }
                 else if (selectedItem?.Tag?.ToString() == "Typography")
                 {
                     // Handle Typography navigation
                     var typographyId = "Typography";
                     if (_lastItem?.ToString() == typographyId) return;
                     _lastItem = typographyId;
-                    
+
                     // Find Typography item from the data source
                     var typographyItem = ControlInfoDataSource.Instance.Realms
                         .SelectMany(r => r.Groups)
                         .SelectMany(g => g.Items)
                         .FirstOrDefault(i => i.UniqueId == "Typography");
-                    
+
                     if (typographyItem != null)
                     {
                         rootFrame.Navigate(ItemPage.Create(typographyItem));