Changes

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

@@ -23,6 +23,10 @@ public partial class TagViewModel(ITag _tag, WeakReference<IPageContext> context
 
     public OptionalColor Background { get; private set; }
 
+    public OptionalColor BorderBrush { get; private set; }
+
+    public double CornerRadius { get; private set; }
+
     public IconInfoViewModel Icon { get; private set; } = new(null);
 
     public override void InitializeProperties()
@@ -36,6 +40,8 @@ public partial class TagViewModel(ITag _tag, WeakReference<IPageContext> context
         Text = model.Text;
         Foreground = model.Foreground;
         Background = model.Background;
+        BorderBrush = model.BorderBrush;
+        CornerRadius = model.CornerRadius;
         ModelToolTip = model.ToolTip;
         Icon = new(model.Icon);
         Icon.InitializeProperties();
@@ -43,6 +49,8 @@ public partial class TagViewModel(ITag _tag, WeakReference<IPageContext> context
         UpdateProperty(nameof(Text));
         UpdateProperty(nameof(Foreground));
         UpdateProperty(nameof(Background));
+        UpdateProperty(nameof(BorderBrush));
+        UpdateProperty(nameof(CornerRadius));
         UpdateProperty(nameof(ToolTip));
         UpdateProperty(nameof(Icon));
     }

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

@@ -26,6 +26,7 @@
     </ResourceDictionary.ThemeDictionaries>
     <Thickness x:Key="TagPadding">4,2,4,2</Thickness>
     <Thickness x:Key="TagBorderThickness">1</Thickness>
+    <CornerRadius x:Key="TagCornerRadius">4,4,4,4</CornerRadius>
 
     <local:IconMarginConverter x:Key="IconMarginConverter" />
 
@@ -36,7 +37,7 @@
             <Setter Property="Background" Value="{ThemeResource TagBackground}" />
             <Setter Property="BorderBrush" Value="{ThemeResource TagBorderBrush}" />
             <Setter Property="BorderThickness" Value="{ThemeResource TagBorderThickness}" />
-            <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+            <Setter Property="CornerRadius" Value="{StaticResource TagCornerRadius}" />
             <Setter Property="IsTabStop" Value="False" />
             <Setter Property="HorizontalAlignment" Value="Center" />
             <Setter Property="VerticalAlignment" Value="Center" />

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

@@ -29,6 +29,18 @@ public partial class Tag : Control
         set => SetValue(ForegroundColorProperty, value);
     }
 
+    public OptionalColor? BorderBrushColor
+    {
+        get => (OptionalColor?)GetValue(BorderBrushColorProperty);
+        set => SetValue(BorderBrushColorProperty, value);
+    }
+
+    public double TagCornerRadius
+    {
+        get => (double)GetValue(TagCornerRadiusProperty);
+        set => SetValue(TagCornerRadiusProperty, value);
+    }
+
     public bool HasIcon => Icon?.HasIcon(this.ActualTheme == ElementTheme.Light) ?? false;
 
     public IconInfoViewModel? Icon
@@ -49,12 +61,20 @@ public partial class Tag : Control
 
     private static Brush? OriginalBorder => Application.Current.Resources["TagBorderBrush"] as Brush;
 
+    private static CornerRadius? OriginalCornerRadius => Application.Current.Resources["TagCornerRadius"] as CornerRadius?;
+
     public static readonly DependencyProperty ForegroundColorProperty =
         DependencyProperty.Register(nameof(ForegroundColor), typeof(OptionalColor), typeof(Tag), new PropertyMetadata(null, OnForegroundColorPropertyChanged));
 
     public static readonly DependencyProperty BackgroundColorProperty =
         DependencyProperty.Register(nameof(BackgroundColor), typeof(OptionalColor), typeof(Tag), new PropertyMetadata(null, OnBackgroundColorPropertyChanged));
 
+    public static readonly DependencyProperty BorderBrushColorProperty =
+        DependencyProperty.Register(nameof(BorderBrushColor), typeof(OptionalColor), typeof(Tag), new PropertyMetadata(null, OnBorderBrushColorPropertyChanged));
+
+    public static readonly DependencyProperty TagCornerRadiusProperty =
+        DependencyProperty.Register(nameof(TagCornerRadius), typeof(double), typeof(Tag), new PropertyMetadata(4.0, OnTagCornerRadiusPropertyChanged));
+
     public static readonly DependencyProperty IconProperty =
         DependencyProperty.Register(nameof(Icon), typeof(IconInfoViewModel), typeof(Tag), new PropertyMetadata(null));
 
@@ -150,4 +170,40 @@ public partial class Tag : Control
             }
         }
     }
+
+    private static void OnBorderBrushColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is not Tag tag)
+        {
+            return;
+        }
+
+        if (tag.BorderBrushColor is not null &&
+            tag.BorderBrushColor.Value.HasValue &&
+            OptionalColorBrushCacheProvider.Convert(tag.BorderBrushColor.Value) is SolidColorBrush brush)
+        {
+            tag.BorderBrush = brush;
+        }
+        else
+        {
+            tag.BorderBrush = OriginalBorder;
+        }
+    }
+
+    private static void OnTagCornerRadiusPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is not Tag tag)
+        {
+            return;
+        }
+
+        if (tag.TagCornerRadius >= 0)
+        {
+            tag.CornerRadius = new CornerRadius(tag.TagCornerRadius);
+        }
+        else if (OriginalCornerRadius is CornerRadius cr)
+        {
+            tag.CornerRadius = cr;
+        }
+    }
 }

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

@@ -155,6 +155,8 @@
             <cpcontrols:Tag
                 AutomationProperties.Name="{x:Bind Text, Mode=OneWay}"
                 BackgroundColor="{x:Bind Background, Mode=OneWay}"
+                BorderBrushColor="{x:Bind BorderBrush, Mode=OneWay}"
+                TagCornerRadius="{x:Bind CornerRadius, Mode=OneWay}"
                 FontSize="12"
                 ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
                 Icon="{x:Bind Icon, Mode=OneWay}"

src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml

@@ -71,6 +71,8 @@
                     HorizontalAlignment="Left"
                     AutomationProperties.Name="{x:Bind Text, Mode=OneWay}"
                     BackgroundColor="{x:Bind Background, Mode=OneWay}"
+                    BorderBrushColor="{x:Bind BorderBrush, Mode=OneWay}"
+                    TagCornerRadius="{x:Bind CornerRadius, Mode=OneWay}"
                     FontSize="12"
                     ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
                     Icon="{x:Bind Icon, Mode=OneWay}"

src/modules/cmdpal/ext/SamplePagesExtension/Pages/SampleListPageWithDetails.cs

@@ -57,6 +57,36 @@ internal sealed partial class SampleListPageWithDetails : ListPage
                 },
             },
             new ListItem(new NoOpCommand())
+            {
+                Title = "This one has a customized tag",
+                Subtitle = "with BorderBrush and CornerRadius",
+                Tags = [
+                    new Tag()
+                    {
+                        Text = "Custom Border",
+                        BorderBrush = ColorHelpers.FromRgb(255, 0, 0),
+                    },
+                    new Tag()
+                    {
+                        Text = "Rounded",
+                        CornerRadius = 12,
+                    },
+                    new Tag()
+                    {
+                        Text = "Full Custom",
+                        Foreground = ColorHelpers.FromRgb(255, 255, 255),
+                        Background = ColorHelpers.FromRgb(0, 128, 0),
+                        BorderBrush = ColorHelpers.FromRgb(255, 215, 0),
+                        CornerRadius = 8,
+                    },
+                ],
+                Details = new Details()
+                {
+                    Title = "Customized Tags",
+                    Body = "Tags can have custom **BorderBrush** and **CornerRadius** properties.",
+                },
+            },
+            new ListItem(new NoOpCommand())
             {
                 Title = "This one has a hero image",
                 Tags = [],
@@ -118,6 +148,8 @@ internal sealed partial class SampleListPageWithDetails : ListPage
                                     new Tag("Colored everything") { Foreground = ColorHelpers.FromRgb(255, 255, 0), Background = ColorHelpers.FromRgb(0, 0, 255) },
                                     new Tag("Icons too") { Icon = new IconInfo("\uE735"), Foreground = ColorHelpers.FromRgb(255, 255, 0) },
                                     new Tag() { Icon = new IconInfo("https://i.imgur.com/t9qgDTM.png") },
+                                    new Tag("Custom border") { BorderBrush = ColorHelpers.FromRgb(255, 0, 255) },
+                                    new Tag("Rounded corners") { CornerRadius = 10 },
                                     new Tag("this") { Foreground = RandomColor(), Background = RandomColor() },
                                     new Tag("baby") { Foreground = RandomColor(), Background = RandomColor() },
                                     new Tag("can") { Foreground = RandomColor(), Background = RandomColor() },

src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions.Toolkit/Tag.cs

@@ -8,6 +8,8 @@ public partial class Tag : BaseObservable, ITag
 {
     private OptionalColor _foreground;
     private OptionalColor _background;
+    private OptionalColor _borderBrush;
+    private double _cornerRadius = -1;
     private string _text = string.Empty;
 
     public virtual OptionalColor Foreground
@@ -30,6 +32,26 @@ public partial class Tag : BaseObservable, ITag
         }
     }
 
+    public virtual OptionalColor BorderBrush
+    {
+        get => _borderBrush;
+        set
+        {
+            _borderBrush = value;
+            OnPropertyChanged(nameof(BorderBrush));
+        }
+    }
+
+    public virtual double CornerRadius
+    {
+        get => _cornerRadius;
+        set
+        {
+            _cornerRadius = value;
+            OnPropertyChanged(nameof(CornerRadius));
+        }
+    }
+
     public virtual IIconInfo Icon
     {
         get;

src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions/Microsoft.CommandPalette.Extensions.idl

@@ -154,6 +154,8 @@ namespace Microsoft.CommandPalette.Extensions
         String Text { get; };
         OptionalColor Foreground { get; };
         OptionalColor Background { get; };
+        OptionalColor BorderBrush { get; };
+        Double CornerRadius { get; };
         String ToolTip { get; };
     };