Make an IconViewModel and an IconControl

src/modules/cmdpal/Microsoft.CmdPal.UI.ViewModels/CommandItemViewModel.cs

@@ -24,7 +24,7 @@ public partial class CommandItemViewModel : ExtensionObjectViewModel
 
     public string Subtitle { get; private set; } = string.Empty;
 
-    public IconDataType Icon { get; private set; } = new(string.Empty);
+    public IconViewModel Icon { get; private set; } = new(null);
 
     public ExtensionObject<ICommand> Command { get; private set; } = new(null);
 
@@ -79,7 +79,7 @@ public override void InitializeProperties()
         Name = model.Command?.Name ?? string.Empty;
         Title = model.Title;
         Subtitle = model.Subtitle;
-        Icon = model.Icon;
+        Icon = new(model.Icon);
         MoreCommands = model.MoreCommands
             .Where(contextItem => contextItem is ICommandContextItem)
             .Select(contextItem => (contextItem as ICommandContextItem)!)
@@ -130,7 +130,7 @@ protected virtual void FetchProperty(string propertyName)
                 this.Subtitle = model.Subtitle;
                 break;
             case nameof(Icon):
-                this.Icon = model.Icon;
+                this.Icon = new(model.Icon);
                 break;
 
                 // TODO! Icon

src/modules/cmdpal/Microsoft.CmdPal.UI.ViewModels/DetailsViewModel.cs

@@ -13,9 +13,7 @@ public partial class DetailsViewModel(IDetails _details, IPageContext context) :
 
     // Remember - "observable" properties from the model (via PropChanged)
     // cannot be marked [ObservableProperty]
-    public IconDataType HeroImage { get; private set; } = new(string.Empty);
-
-    public bool HasHeroImage => !string.IsNullOrEmpty(HeroImage.Icon) || HeroImage.Data != null;
+    public IconViewModel HeroImage { get; private set; } = new(null);
 
     // TODO: Metadata is an array of IDetailsElement,
     // where IDetailsElement = {IDetailsTags, IDetailsLink, IDetailsSeparator}
@@ -33,11 +31,10 @@ public override void InitializeProperties()
 
         Title = model.Title;
         Body = model.Body;
-        HeroImage = model.HeroImage;
+        HeroImage = new(model.HeroImage);
 
         UpdateProperty(nameof(Title));
         UpdateProperty(nameof(Body));
         UpdateProperty(nameof(HeroImage));
-        UpdateProperty(nameof(HasHeroImage));
     }
 }

src/modules/cmdpal/Microsoft.CmdPal.UI.ViewModels/IconViewModel.cs

@@ -0,0 +1,19 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.CmdPal.Extensions;
+using Windows.Storage.Streams;
+
+namespace Microsoft.CmdPal.UI.ViewModels;
+
+public sealed class IconViewModel(IconDataType? _icon)
+{
+    public string Icon { get; } = _icon?.Icon ?? string.Empty;
+
+    public IRandomAccessStreamReference? Data { get; } = _icon?.Data;
+
+    public bool HasIcon => !string.IsNullOrWhiteSpace(Icon) || Data != null;
+
+    public override string ToString() => string.IsNullOrEmpty(Icon) ? "[Binary data]" : Icon;
+}

src/modules/cmdpal/Microsoft.CmdPal.UI.ViewModels/PageViewModel.cs

@@ -37,7 +37,7 @@ public partial class PageViewModel : ExtensionObjectViewModel, IPageContext
 
     public bool IsLoading { get; private set; } = true;
 
-    public IconDataType Icon { get; private set; } = new(string.Empty);
+    public IconViewModel Icon { get; private set; } = new(null);
 
     public PageViewModel(IPage model, TaskScheduler scheduler)
         : base(null)
@@ -80,7 +80,7 @@ public override void InitializeProperties()
         Name = page.Name;
         IsLoading = page.IsLoading;
         Title = page.Title;
-        Icon = page.Icon;
+        Icon = new(page.Icon);
 
         // Let the UI know about our initial properties too.
         UpdateProperty(nameof(Name));
@@ -133,7 +133,7 @@ protected virtual void FetchProperty(string propertyName)
                 this.IsLoading = model.IsLoading;
                 break;
             case nameof(Icon):
-                this.Icon = model.Icon;
+                this.Icon = new(model.Icon);
                 break;
         }
 

src/modules/cmdpal/Microsoft.CmdPal.UI.ViewModels/TagViewModel.cs

@@ -19,7 +19,7 @@ public partial class TagViewModel(ITag _tag, IPageContext context) : ExtensionOb
 
     public OptionalColor Color { get; private set; }
 
-    public IconDataType Icon { get; private set; } = new(string.Empty);
+    public IconViewModel Icon { get; private set; } = new(null);
 
     public bool HasIcon => !string.IsNullOrEmpty(Icon.Icon);
 
@@ -37,7 +37,7 @@ public override void InitializeProperties()
         Text = model.Text;
         Color = model.Color;
         Tooltip = model.ToolTip;
-        Icon = model.Icon;
+        Icon = new(model.Icon);
 
         UpdateProperty(nameof(Text));
         UpdateProperty(nameof(Color));

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ActionBar.xaml

@@ -6,7 +6,7 @@
     xmlns:converters="using:CommunityToolkit.WinUI.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:cmdpalUI="using:Microsoft.CmdPal.UI"
-    xmlns:local="using:Microsoft.CmdPal.UI.Controls"
+    xmlns:cmdPalControls="using:Microsoft.CmdPal.UI.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:ui="using:CommunityToolkit.WinUI"
     xmlns:viewmodels="using:Microsoft.CmdPal.UI.ViewModels"
@@ -30,16 +30,12 @@
                             <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
 
-                        <Border x:Name="IconBorder"
-                                Grid.Column="0"
-                                Width="16"
-                                Height="16"
-                                Margin="0,0,0,0">
-                            <!-- LoadIconBehavior will magically fill this border up with an icon -->
-                            <Interactivity:Interaction.Behaviors>
-                                <cmdpalUI:LoadIconBehavior Source="{x:Bind Icon, Mode=OneWay}"/>
-                            </Interactivity:Interaction.Behaviors>
-                        </Border>
+                        <cmdPalControls:IconControl
+                            Width="16"
+                            Grid.Column="0"
+                            Height="16"
+                            Visibility="{x:Bind Icon.HasIcon, Mode=OneWay}"
+                            ViewModel="{x:Bind Icon, Mode=OneWay}"/>
 
                         <TextBlock Grid.Column="1" Text="{x:Bind Title}" />
                     </Grid>
@@ -55,18 +51,11 @@
             <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
 
-
-        <Border x:Name="IconBorder"
-                x:Load="{x:Bind IsLoaded, Mode=OneWay}"
-                Width="20"
-                Height="20"
-                Margin="12,0,0,0"
-                CornerRadius="{StaticResource ControlCornerRadius}">
-            <!-- LoadIconBehavior will magically fill this border up with an icon -->
-            <Interactivity:Interaction.Behaviors>
-                <cmdpalUI:LoadIconBehavior Source="{x:Bind ViewModel.CurrentPage.Icon, Mode=OneWay}"/>
-            </Interactivity:Interaction.Behaviors>
-        </Border>
+        <cmdPalControls:IconControl
+            Width="20"
+            Height="20"
+            Margin="12,0,0,0"
+            ViewModel="{x:Bind CurrentPageViewModel.Icon, Mode=OneWay}"/>
 
         <TextBlock
             Grid.Column="1"
@@ -87,15 +76,12 @@
                 Visibility="{x:Bind ViewModel.PrimaryAction.Name, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}">
 
                 <StackPanel Orientation="Horizontal" Spacing="8">
-                    <!-- <FontIcon Glyph="&#xEA3A;" /> -->
-                    <Border Width="16"
-                            Height="16"
-                            Margin="4,4,4,4">
-                        <!-- LoadIconBehavior will magically fill this border up with an icon -->
-                        <Interactivity:Interaction.Behaviors>
-                            <cmdpalUI:LoadIconBehavior Source="{x:Bind ViewModel.PrimaryAction.Icon, Mode=OneWay}"/>
-                        </Interactivity:Interaction.Behaviors>
-                    </Border>
+                    <cmdPalControls:IconControl
+                        Width="16"
+                        Height="16"
+                        Margin="4"
+                        Visibility="{x:Bind ViewModel.PrimaryAction.Icon.HasIcon, Mode=OneWay}"
+                        ViewModel="{x:Bind ViewModel.PrimaryAction.Icon, Mode=OneWay}"/>
 
                     <StackPanel Orientation="Vertical" Spacing="2">
                         <TextBlock
@@ -118,16 +104,13 @@
                 Padding="8,4,8,4"
                 Visibility="{x:Bind ViewModel.HasSecondaryCommand, Mode=OneWay}">
                 <StackPanel Orientation="Horizontal" Spacing="8">
-                    <!-- <FontIcon Glyph="&#xEA3A;" /> -->
 
-                    <Border Width="16"
-                            Height="16"
-                            Margin="4,4,4,4">
-                        <!-- LoadIconBehavior will magically fill this border up with an icon -->
-                        <Interactivity:Interaction.Behaviors>
-                            <cmdpalUI:LoadIconBehavior Source="{x:Bind ViewModel.SecondaryAction.Icon, Mode=OneWay}" />
-                        </Interactivity:Interaction.Behaviors>
-                    </Border>
+                    <cmdPalControls:IconControl
+                        Width="16"
+                        Height="16"
+                        Margin="4"
+                        Visibility="{x:Bind ViewModel.SecondaryAction.Icon.HasIcon, Mode=OneWay}"
+                        ViewModel="{x:Bind ViewModel.SecondaryAction.Icon, Mode=OneWay}"/>
 
                     <StackPanel Orientation="Vertical" Spacing="1">
                         <TextBlock

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/IconControl.xaml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="Microsoft.CmdPal.UI.Controls.IconControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:cmdpalUI="using:Microsoft.CmdPal.UI"
+    xmlns:local="using:Microsoft.CmdPal.UI.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:ui="using:CommunityToolkit.WinUI"
+    xmlns:viewmodels="using:Microsoft.CmdPal.UI.ViewModels"
+    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
+    Background="Transparent"
+    mc:Ignorable="d">
+
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <converters:StringVisibilityConverter
+                x:Key="StringNotEmptyToVisibilityConverter"
+                EmptyValue="Collapsed"
+                NotEmptyValue="Visible" />
+
+        </ResourceDictionary>
+    </UserControl.Resources>
+
+    <Border x:Name="IconBorder">
+    </Border>
+
+</UserControl>

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/IconControl.xaml.cs

@@ -0,0 +1,61 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.CmdPal.UI.ExtViews;
+using Microsoft.CmdPal.UI.ViewModels;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Microsoft.CmdPal.UI.Controls;
+
+public sealed partial class IconControl : UserControl
+{
+    private static readonly IconCacheService IconService = new(Microsoft.UI.Dispatching.DispatcherQueue.GetForCurrentThread());
+
+    private IconViewModel? _viewModel;
+
+    public IconViewModel? ViewModel { get => _viewModel; set => AttachViewModel(value); }
+
+    public IconControl()
+    {
+        this.InitializeComponent();
+    }
+
+    private void AttachViewModel(IconViewModel? vm)
+    {
+        _viewModel = vm;
+
+        if (_viewModel != null)
+        {
+            DispatcherQueue.TryEnqueue(async () =>
+            {
+                var icoSource = await IconService.GetIconSource(_viewModel);
+
+                if (icoSource is FontIconSource fontIco)
+                {
+                    if (!double.IsNaN(this.Width))
+                    {
+                        fontIco.FontSize = this.Width;
+                    }
+
+                    // For inexplicable reasons, FontIconSource.CreateIconElement
+                    // doesn't work, so do it ourselves
+                    IconSourceElement elem = new()
+                    {
+                        IconSource = fontIco,
+                    };
+                    IconBorder.Child = elem;
+                }
+                else
+                {
+                    var icoElement = icoSource?.CreateIconElement();
+                    IconBorder.Child = icoElement;
+                }
+            });
+        }
+        else
+        {
+            IconBorder.Child = null;
+        }
+    }
+}

src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/IconCacheService.xaml.cs

@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information.
 
 using Microsoft.CmdPal.Extensions;
+using Microsoft.CmdPal.UI.ViewModels;
 using Microsoft.Terminal.UI;
 using Microsoft.UI.Dispatching;
 using Microsoft.UI.Xaml.Controls;
@@ -13,13 +14,15 @@ namespace Microsoft.CmdPal.UI.ExtViews;
 
 public sealed class IconCacheService(DispatcherQueue dispatcherQueue)
 {
-    public Task<IconSource?> GetIconSource(IconDataType icon) =>
+    public Task<IconSource?> GetIconSource(IconViewModel vm) =>
+        IconToSource(vm);
 
-        // todo: actually implement a cache of some sort
-        IconToSource(icon);
+    public Task<IconSource?> GetIconSource(IconDataType icon) =>
+        IconToSource(new(icon));
 
-    private async Task<IconSource?> IconToSource(IconDataType icon)
+    private async Task<IconSource?> IconToSource(IconViewModel icon)
     {
+        // todo: actually implement a cache of some sort
         if (!string.IsNullOrEmpty(icon.Icon))
         {
             var source = IconPathConverter.IconSourceMUX(icon.Icon, false);

src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml

@@ -9,6 +9,7 @@
     xmlns:converters="using:CommunityToolkit.WinUI.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:Microsoft.CmdPal.UI"
+    xmlns:cmdPalControls="using:Microsoft.CmdPal.UI.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:viewmodels="using:Microsoft.CmdPal.UI.ViewModels"
     Background="Transparent"
@@ -41,17 +42,14 @@
                 BorderThickness="1"
                 Orientation="Horizontal"
                 CornerRadius="4">
-                <Border x:Name="IconBorder"
-                        Width="12"
-                        Height="12"
-                        Margin="0,0,4,0"
-                        Visibility="{x:Bind HasIcon, Mode=OneWay}">
-                    <!-- LoadIconBehavior will magically fill this border up with an icon -->
-                    <Interactivity:Interaction.Behaviors>
-                        <local:LoadIconBehavior Source="{x:Bind Icon, Mode=OneWay}"/>
-                    </Interactivity:Interaction.Behaviors>
-                </Border>
-
+
+                <cmdPalControls:IconControl
+                        Grid.Column="0"
+                        Width="20"
+                        Height="20"
+                        Visibility="{x:Bind HasIcon, Mode=OneWay}"
+                        ViewModel="{x:Bind Icon, Mode=OneWay}"/>
+
                 <TextBlock
                     VerticalAlignment="Center"
                     FontSize="12"
@@ -71,18 +69,12 @@
                         <ColumnDefinition Width="Auto" />
                     </Grid.ColumnDefinitions>
 
-
-                    <Border x:Name="IconBorder"
-                            Grid.Column="0"
-                            Width="20"
-                            Height="20"
-                            Margin="4,0,4,0">
-                        <!-- LoadIconBehavior will magically fill this border up with an icon -->
-                        <Interactivity:Interaction.Behaviors>
-                            <local:LoadIconBehavior Source="{x:Bind Icon, Mode=OneWay}"/>
-                        </Interactivity:Interaction.Behaviors>
-                    </Border>
-
+                    <cmdPalControls:IconControl
+                        Grid.Column="0"
+                        Width="20"
+                        Height="20"
+                        ViewModel="{x:Bind Icon, Mode=OneWay}"/>
+
                     <StackPanel
                         Grid.Column="1"
                         VerticalAlignment="Center"