Merge pull request #66 from CommunityToolkit/niels9001/iconsupport

Support for individual component icons

CommunityToolkit.App.Shared/CommunityToolkit.App.Shared.projitems

@@ -24,7 +24,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Attributes\PackageProjectUrlAttribute.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Behaviors\NavigateToUriAction.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\TitleBar\TitleBar.cs" />
-    <Compile Include="$(MSBuildThisFileDirectory)Converters\SubcategoryToIconConverter.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Converters\StringToUriConverter.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)DocOrSampleTemplateSelector.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Helpers\BackgroundHelper.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Helpers\IconHelper.cs" />
@@ -109,11 +109,6 @@
     </Page>
   </ItemGroup>
   <ItemGroup>
-    <Content Include="$(MSBuildThisFileDirectory)Assets\ControlIcons\Control.png" />
-    <Content Include="$(MSBuildThisFileDirectory)Assets\ControlIcons\Empty.png" />
-    <Content Include="$(MSBuildThisFileDirectory)Assets\ControlIcons\Input.png" />
-    <Content Include="$(MSBuildThisFileDirectory)Assets\ControlIcons\Status.png" />
-    <Content Include="$(MSBuildThisFileDirectory)Assets\ControlIcons\Layout.png" />
     <Content Include="$(MSBuildThisFileDirectory)Assets\AppTitleBar.scale-100.png" />
     <Content Include="$(MSBuildThisFileDirectory)Assets\AppTitleBar.scale-125.png" />
     <Content Include="$(MSBuildThisFileDirectory)Assets\AppTitleBar.scale-150.png" />

CommunityToolkit.App.Shared/Converters/SubcategoryToIconConverter.cs → CommunityToolkit.App.Shared/Converters/StringToUriConverter.cs

@@ -2,23 +2,18 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
-using CommunityToolkit.Tooling.SampleGen;
 using CommunityToolkit.App.Shared.Helpers;
-using System;
-using System.Collections.Generic;
-using System.Text;
 
 namespace CommunityToolkit.App.Shared.Converters;
 
-public sealed class SubcategoryToIconConverter : IValueConverter
+public class StringToUriConverter : IValueConverter
 {
     public object Convert(object value, Type targetType, object parameter, string language)
     {
-        ToolkitSampleSubcategory subcategory = (ToolkitSampleSubcategory)value;
-        return new Uri(IconHelper.GetSubcategoryIcon(subcategory));
+        return new Uri(IconHelper.GetIconPath((string)value));
     }
 
-    public object ConvertBack(object value, Type targetType, object parameter, string language)
+    public object ConvertBack(object value, Type targetType,  object parameter, string language)
     {
         return value;
     }

CommunityToolkit.App.Shared/Helpers/IconHelper.cs

@@ -8,11 +8,15 @@ namespace CommunityToolkit.App.Shared.Helpers;
 
 public static class IconHelper
 {
+    internal const string SourceAssetsPrefix = "ms-appx:///SourceAssets/";
+    internal const string FallBackControlIconPath = "ms-appx:///Assets/DefaultControlIcon.png";
+
     public static IconElement? GetCategoryIcon(ToolkitSampleCategory category)
     {
         IconElement? iconElement = null;
         switch (category)
         {
+            case ToolkitSampleCategory.Layouts: iconElement = new FontIcon() { Glyph = "\uF58C" }; break;
             case ToolkitSampleCategory.Controls: iconElement = new FontIcon() { Glyph = "\ue73a" }; break;
             case ToolkitSampleCategory.Animations: iconElement = new FontIcon() { Glyph = "\ue945" }; break;
             case ToolkitSampleCategory.Extensions: iconElement = new FontIcon() { Glyph = "\ue95f" }; break;
@@ -22,23 +26,15 @@ public static class IconHelper
         return iconElement;
     }
 
-    public static string GetSubcategoryIcon(ToolkitSampleSubcategory subcategory)
+    public static string GetIconPath(string? IconPath)
     {
-        string imagePath = string.Empty;
-        switch (subcategory)
+        if (!string.IsNullOrEmpty(IconPath))
+        {
+            return SourceAssetsPrefix + IconPath;
+        }
+        else
         {
-            case ToolkitSampleSubcategory.None: imagePath = "ms-appx:///Assets/ControlIcons/Control.png"; break;
-            case ToolkitSampleSubcategory.Behaviors: imagePath = "ms-appx:///Assets/ControlIcons/Input.png"; break;
-            case ToolkitSampleSubcategory.Controls: imagePath = "ms-appx:///Assets/ControlIcons/Control.png"; break;
-            case ToolkitSampleSubcategory.Converters: imagePath = "ms-appx:///Assets/ControlIcons/Input.png"; break;
-            case ToolkitSampleSubcategory.Input: imagePath = "ms-appx:///Assets/ControlIcons/Input.png"; break;
-            case ToolkitSampleSubcategory.Layout: imagePath = "ms-appx:///Assets/ControlIcons/Layout.png"; break;
-            case ToolkitSampleSubcategory.Markup: imagePath = "ms-appx:///Assets/ControlIcons/Input.png"; break;
-            case ToolkitSampleSubcategory.Math: imagePath = "ms-appx:///Assets/ControlIcons/Control.png"; break;
-            case ToolkitSampleSubcategory.Media: imagePath = "ms-appx:///Assets/ControlIcons/Control.png"; break;
-            case ToolkitSampleSubcategory.StatusAndInfo: imagePath = "ms-appx:///Assets/ControlIcons/Status.png"; break;
-            case ToolkitSampleSubcategory.Triggers: imagePath = "ms-appx:///Assets/ControlIcons/Input.png"; break;
+            return FallBackControlIconPath;
         }
-        return imagePath;
     }
 }

CommunityToolkit.App.Shared/Helpers/NavigationViewHelper.cs

@@ -29,7 +29,6 @@ public static class NavigationViewHelper
                 }
 
                 // Add subcategory to category
-
                 navData.NavItem.MenuItems.Add(subcategoryItemData.NavItem);
             }
 
@@ -45,7 +44,7 @@ public static class NavigationViewHelper
             yield return new MUXC.NavigationViewItem
             {
                 Content = metadata.Title,
-                Icon = new BitmapIcon() { ShowAsMonochrome = false, UriSource = new Uri(IconHelper.GetSubcategoryIcon(metadata.Subcategory)) }, // TO DO: This is probably a property we need to add to ToolkitFrontMatter?
+                Icon = new BitmapIcon() { ShowAsMonochrome = false, UriSource = new Uri(IconHelper.GetIconPath(metadata.Icon)) },
                 Tag = metadata,
             };
         }
@@ -61,6 +60,7 @@ private static IEnumerable<GroupNavigationItemData> GenerateSubcategoryNavItems(
             {
                 Content = subcategoryGroup.Key,
                 SelectsOnInvoked = false,
+                IsExpanded = true,
                 Style = (Style)App.Current.Resources["SubcategoryNavigationViewItemStyle"],
             }, subcategoryGroup.ToArray());
         }

CommunityToolkit.App.Shared/Pages/GettingStartedPage.xaml

@@ -1,4 +1,4 @@
-<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
 <Page x:Class="CommunityToolkit.App.Shared.Pages.GettingStartedPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -36,7 +36,6 @@
     </Page.Resources>
     <Grid BorderBrush="{ThemeResource NavigationViewContentGridBorderBrush}"
           CornerRadius="8,0,0,0">
-
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />

CommunityToolkit.App.Shared/Pages/GettingStartedPage.xaml.cs

@@ -3,32 +3,28 @@
 // See the LICENSE file in the project root for more information.
 
 using CommunityToolkit.Tooling.SampleGen.Metadata;
-using CommunityToolkit.Tooling.SampleGen;
 
-namespace CommunityToolkit.App.Shared.Pages
+namespace CommunityToolkit.App.Shared.Pages;
+
+public sealed partial class GettingStartedPage : Page
 {
-    public sealed partial class GettingStartedPage : Page
+    public GettingStartedPage()
     {
-        public GettingStartedPage()
-        {
-            this.InitializeComponent();
-        }
-
-        /// <summary>
-        /// Gets the items used for navigating.
-        /// </summary>
-        protected override void OnNavigatedTo(NavigationEventArgs e)
-        {
-            controlsGridView.ItemsSource = e.Parameter as IEnumerable<ToolkitFrontMatter>;
-            base.OnNavigatedTo(e);
-        }
-
-        private void controlsGridView_ItemClick(object sender, ItemClickEventArgs e)
-        {
-            var selectedSample = e.ClickedItem as ToolkitFrontMatter;
+        this.InitializeComponent();
+    }
 
-            Shell.Current?.NavigateToSample(selectedSample);
+    /// <summary>
+    /// Gets the items used for navigating.
+    /// </summary>
+    protected override void OnNavigatedTo(NavigationEventArgs e)
+    {
+        controlsGridView.ItemsSource = e.Parameter as IEnumerable<ToolkitFrontMatter>;
+        base.OnNavigatedTo(e);
+    }
 
-        }
+    private void controlsGridView_ItemClick(object sender, ItemClickEventArgs e)
+    {
+        var selectedSample = e.ClickedItem as ToolkitFrontMatter;
+        Shell.Current?.NavigateToSample(selectedSample);
     }
 }

CommunityToolkit.App.Shared/Pages/Shell.xaml.cs

@@ -5,7 +5,6 @@
 using CommunityToolkit.App.Shared.Renderers;
 using CommunityToolkit.Tooling.SampleGen.Metadata;
 using CommunityToolkit.App.Shared.Helpers;
-using Microsoft.UI.Xaml.Controls;
 
 namespace CommunityToolkit.App.Shared.Pages;
 
@@ -62,6 +61,7 @@ private void NavView_ItemInvoked(MUXC.NavigationView sender, MUXC.NavigationView
                 NavigationFrame.Navigate(typeof(SettingsPage));
             }
         }
+
         // Check if Getting Started page
         else if (selectedItem.Tag != null && selectedItem.Tag.GetType() == typeof(string))
         {
@@ -116,7 +116,6 @@ private void NavigationFrameOnNavigated(object sender, NavigationEventArgs navig
             }
             else if (navigationEventArgs.Parameter.GetType() == typeof(ToolkitFrontMatter))
             {
-
                 EnsureNavigationSelection(((ToolkitFrontMatter)navigationEventArgs.Parameter).FilePath);
             }
         }

CommunityToolkit.App.Shared/Renderers/ToolkitDocumentationRenderer.xaml.cs

@@ -170,7 +170,7 @@ private static async Task<string> GetDocumentationFileContents(ToolkitFrontMatte
         var path = metadata.FilePath;
 
         var fileUri = new Uri($"ms-appx:///SourceAssets/{(isSingleExperimentHead ? Path.GetFileName(path.Replace('\\', '/')) : path)}");
-
+      
         try
         {
             var file = await StorageFile.GetFileFromApplicationUriAsync(fileUri);

CommunityToolkit.App.Shared/Styles/Buttons.xaml

@@ -1,11 +1,10 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
                     xmlns:controls="using:Microsoft.UI.Xaml.Controls"
                     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
                     xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
 
-
     <SolidColorBrush x:Key="SubtleButtonBackground"
                      Color="{ThemeResource SubtleFillColorTransparent}" />
     <SolidColorBrush x:Key="SubtleButtonBackgroundPointerOver"
@@ -342,10 +341,10 @@
     <Style x:Key="SubcategoryNavigationViewItemStyle"
            TargetType="muxc:NavigationViewItem">
         <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
-        <Setter Property="FontSize" Value="14" />
+        <Setter Property="FontSize" Value="12" />
         <Setter Property="Padding" Value="30,0,0,0" />
-        <Setter Property="FontWeight" Value="SemiBold" />
-        <!--<Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />-->
+        <!--<Setter Property="FontWeight" Value="SemiBold" />-->
+        <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
     </Style>
 
 

CommunityToolkit.App.Shared/Styles/ItemTemplates.xaml

@@ -1,11 +1,11 @@
-<ResourceDictionary x:Class="CommunityToolkit.App.Shared.ItemTemplates"
+<ResourceDictionary x:Class="CommunityToolkit.App.Shared.ItemTemplates"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:converters="using:CommunityToolkit.App.Shared.Converters"
                     xmlns:meta="using:CommunityToolkit.Tooling.SampleGen.Metadata"
                     xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
 
-    <converters:SubcategoryToIconConverter x:Key="subcategoryToIconConverter" />
+    <converters:StringToUriConverter x:Name="stringToUriConverter" />
 
     <!-- Kind of not supported in Uno (at least directly like this) see https://github.com/unoplatform/uno/issues/7582 (and related root issue)
     <Style x:Key="IndentedGridViewItemStyle"
@@ -23,7 +23,9 @@
             </Grid.ColumnDefinitions>
             <Image Width="16">
                 <Image.Source>
-                    <BitmapImage UriSource="{Binding Subcategory, Converter={StaticResource subcategoryToIconConverter}}" />
+                    <BitmapImage DecodePixelHeight="16"
+                                 DecodePixelWidth="16"
+                                 UriSource="{Binding Icon}" />
                 </Image.Source>
             </Image>
             <TextBlock Grid.Column="1"
@@ -74,12 +76,11 @@
                        VerticalAlignment="Center"
                        Stretch="Uniform">
                     <Image.Source>
-                        <BitmapImage UriSource="{Binding Subcategory, Converter={StaticResource subcategoryToIconConverter}}" />
+                        <BitmapImage UriSource="{Binding Icon, Converter={StaticResource stringToUriConverter}}" />
                     </Image.Source>
                 </Image>
             </Grid>
 
-
             <RelativePanel Grid.Column="1"
                            Grid.ColumnSpan="2"
                            Margin="16,6,0,0">

CommunityToolkit.Tooling.SampleGen.Tests/ToolkitSampleMetadataTests.Documentation.cs

@@ -50,6 +50,7 @@ Without any front matter.
     [DataRow(8, DisplayName = "Subcategory")]
     [DataRow(9, DisplayName = "GitHub Discussion Id")]
     [DataRow(10, DisplayName = "GitHub Issue Id")]
+    [DataRow(10, DisplayName = "Icon")]
     [TestMethod]
     public void MissingFrontMatterField(int removeline)
     {
@@ -64,6 +65,7 @@ public void MissingFrontMatterField(int removeline)
 subcategory: Layout
 discussion-id: 0
 issue-id: 0
+icon: assets/icon.png
 ---
 # This is some test documentation...
 > [!SAMPLE Sample]
@@ -91,6 +93,7 @@ public void MarkdownInvalidSampleReference()
 subcategory: Layout
 discussion-id: 0
 issue-id: 0
+icon: assets/icon.png
 ---
 # This is some test documentation...
 > [!SAMPLE SampINVALIDle]
@@ -116,6 +119,7 @@ public void DocumentationMissingSample()
 subcategory: Layout
 discussion-id: 0
 issue-id: 0
+icon: assets/icon.png
 ---
 # This is some test documentation...
 Without any sample.";
@@ -139,6 +143,7 @@ public void DocumentationValid()
 subcategory: Layout
 discussion-id: 0
 issue-id: 0
+icon: assets/icon.png
 ---
 # This is some test documentation...
 Which is valid.
@@ -161,6 +166,7 @@ public void DocumentationInvalidDiscussionId()
 subcategory: Layout
 discussion-id: https://github.com/1234
 issue-id: 0
+icon: assets/icon.png
 ---
 # This is some test documentation...
 Without an invalid discussion id.";
@@ -184,6 +190,7 @@ public void DocumentationInvalidIssueId()
 subcategory: Layout
 discussion-id: 0
 issue-id: https://github.com/1234
+icon: assets/icon.png
 ---
 # This is some test documentation...
 Without an invalid discussion id.";

CommunityToolkit.Tooling.SampleGen/Metadata/ToolkitFrontMatter.cs

@@ -17,11 +17,11 @@ public sealed class ToolkitFrontMatter : DocsFrontMatter
 {
     public ToolkitSampleCategory Category { get; set; }
     public ToolkitSampleSubcategory Subcategory { get; set; }
-
     public int DiscussionId { get; set; }
     public int IssueId { get; set; }
 
     //// Extra Metadata needed for Sample App
     public string? FilePath { get; set; }
     public string[]? SampleIdReferences { get; set; }
+    public string? Icon { get; set; }
 }

CommunityToolkit.Tooling.SampleGen/ToolkitSampleCategory.cs

@@ -9,6 +9,11 @@ namespace CommunityToolkit.Tooling.SampleGen;
 /// </summary>
 public enum ToolkitSampleCategory : byte
 {
+    /// <summary>
+    /// Various layouts and panels
+    /// </summary>
+    Layouts,
+
     /// <summary>
     /// Various UI controls that the user sees and interacts with.
     /// </summary>