Implement badge component

Material.Avalonia.Demo/MainView.axaml

@@ -63,6 +63,7 @@
                   </Style>
                 </ListBox.Styles>
                 <ListBoxItem>Home</ListBoxItem>
+                <ListBoxItem>Badges</ListBoxItem>
                 <ListBoxItem>Buttons</ListBoxItem>
                 <ListBoxItem>Card</ListBoxItem>
                 <ListBoxItem>ColorZones</ListBoxItem>
@@ -154,6 +155,9 @@
                 <!-- Main page -->
                 <pages:Home />
 
+                <!-- Badges -->
+                <pages:BadgesDemo />
+
                 <!-- Buttons -->
                 <pages:ButtonsDemo />
 

Material.Avalonia.Demo/Pages/BadgesDemo.axaml.cs

@@ -0,0 +1,14 @@
+using System;
+using Avalonia.Controls;
+using Material.Styles.Controls;
+
+namespace Material.Avalonia.Demo.Pages;
+
+public partial class BadgesDemo : UserControl {
+    public BadgesDemo() {
+        InitializeComponent();
+        badgePlacementSelector.ItemsSource = Enum.GetValues<BadgePlacement>();
+        badgePlacementSelector.SelectedItem = BadgePlacement.TopRight;
+    }
+}
+

Material.Styles/Controls/Badge.axaml

@@ -0,0 +1,54 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:assists="clr-namespace:Material.Styles.Assists"
+                    xmlns:controls="clr-namespace:Material.Styles.Controls">
+  <ControlTheme x:Key="MaterialBadge" TargetType="controls:Badge">
+    <Setter Property="Width" Value="NaN" />
+    <Setter Property="Height" Value="NaN" />
+    <Setter Property="CornerRadius" Value="9999" />
+    <Setter Property="Padding" Value="3" />
+    <Setter Property="MinHeight" Value="19" />
+    <Setter Property="MinWidth" Value="19" />
+    <Setter Property="Background" Value="{DynamicResource MaterialValidationErrorBrush}" />
+    <Setter Property="Foreground" Value="{DynamicResource MaterialValidationErrorForegroundBrush}" />
+    <Setter Property="FontSize" Value="11" />
+    <Setter Property="HorizontalAlignment" Value="Center" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="HasContent" Value="True" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate>
+          <Panel>
+            <Border Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    MinWidth="{TemplateBinding MinWidth}"
+                    MinHeight="{TemplateBinding MinHeight}"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    Background="{TemplateBinding Background}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    IsHitTestVisible="False">
+              <ContentPresenter HorizontalAlignment="Center"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding Content}"
+                                FontSize="{TemplateBinding FontSize}"
+                                Foreground="{TemplateBinding Foreground}"
+                                IsVisible="{TemplateBinding HasContent}" />
+            </Border>
+          </Panel>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+
+    <Style Selector="^[HasContent=False]">
+      <Setter Property="MinWidth" Value="6" />
+      <Setter Property="MinHeight" Value="6" />
+      <Setter Property="Padding" Value="0" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type controls:Badge}"
+                BasedOn="{StaticResource MaterialBadge}"
+                TargetType="controls:Badge" />
+</ResourceDictionary>

Material.Styles/Controls/Badge.axaml.cs

@@ -0,0 +1,21 @@
+using Avalonia;
+using Avalonia.Controls;
+
+namespace Material.Styles.Controls;
+
+public class Badge : ContentControl {
+    /// <summary>
+    /// HasContent StyledProperty definition.
+    /// </summary>
+    public static readonly StyledProperty<bool> HasContentProperty =
+        AvaloniaProperty.Register<Badge, bool>(nameof(HasContent));
+
+    /// <summary>
+    /// Gets or sets the HasContent property.
+    /// </summary>
+    public bool HasContent {
+        get => GetValue(HasContentProperty);
+        set => SetValue(HasContentProperty, value);
+    }
+}
+

Material.Styles/Controls/Badged.axaml

@@ -0,0 +1,79 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:assists="clr-namespace:Material.Styles.Assists"
+                    xmlns:controls="clr-namespace:Material.Styles.Controls">
+  <ControlTheme x:Key="MaterialBadged" TargetType="controls:Badged">
+    <Setter Property="BadgeWidth" Value="NaN" />
+    <Setter Property="BadgeHeight" Value="NaN" />
+    <Setter Property="BadgeBackground" Value="{DynamicResource MaterialValidationErrorBrush}" />
+    <Setter Property="BadgeForeground" Value="{DynamicResource MaterialValidationErrorForegroundBrush}" />
+    <Setter Property="BadgePlacement" Value="TopRight" />
+    <Setter Property="BadgeCornerRadius" Value="9999" />
+    <Setter Property="BadgeFontSize" Value="11" />
+    <Setter Property="BadgeHasContent" Value="True" />
+    <Setter Property="IsBadgeVisible" Value="True" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate>
+          <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
+            <ContentPresenter Margin="8" Content="{TemplateBinding Content}" />
+            <controls:Badge Width="{TemplateBinding BadgeWidth}"
+                            Height="{TemplateBinding BadgeHeight}"
+                            Background="{TemplateBinding BadgeBackground}"
+                            Content="{TemplateBinding BadgeContent}"
+                            CornerRadius="{TemplateBinding BadgeCornerRadius}"
+                            FontSize="{TemplateBinding BadgeFontSize}"
+                            Foreground="{TemplateBinding BadgeForeground}"
+                            HasContent="{TemplateBinding BadgeHasContent}"
+                            IsVisible="{TemplateBinding IsBadgeVisible}" />
+          </Grid>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+
+    <Style Selector="^[BadgeHasContent=False] /template/ ContentPresenter">
+      <Setter Property="Margin" Value="2" />
+    </Style>
+
+    <Style Selector="^[BadgePlacement=Left] /template/ controls|Badge">
+      <Setter Property="HorizontalAlignment" Value="Left" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+    </Style>
+    <Style Selector="^[BadgePlacement=TopLeft] /template/ controls|Badge">
+      <Setter Property="HorizontalAlignment" Value="Left" />
+      <Setter Property="VerticalAlignment" Value="Top" />
+    </Style>
+    <Style Selector="^[BadgePlacement=Top] /template/ controls|Badge">
+      <Setter Property="HorizontalAlignment" Value="Center" />
+      <Setter Property="VerticalAlignment" Value="Top" />
+    </Style>
+    <Style Selector="^[BadgePlacement=TopRight] /template/ controls|Badge">
+      <Setter Property="HorizontalAlignment" Value="Right" />
+      <Setter Property="VerticalAlignment" Value="Top" />
+    </Style>
+    <Style Selector="^[BadgePlacement=Right] /template/ controls|Badge">
+      <Setter Property="HorizontalAlignment" Value="Right" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+    </Style>
+    <Style Selector="^[BadgePlacement=BottomRight] /template/ controls|Badge">
+      <Setter Property="HorizontalAlignment" Value="Right" />
+      <Setter Property="VerticalAlignment" Value="Bottom" />
+    </Style>
+    <Style Selector="^[BadgePlacement=Bottom] /template/ controls|Badge">
+      <Setter Property="HorizontalAlignment" Value="Center" />
+      <Setter Property="VerticalAlignment" Value="Bottom" />
+    </Style>
+    <Style Selector="^[BadgePlacement=BottomLeft] /template/ controls|Badge">
+      <Setter Property="HorizontalAlignment" Value="Left" />
+      <Setter Property="VerticalAlignment" Value="Bottom" />
+    </Style>
+    <Style Selector="^[BadgePlacement=Center] /template/ controls|Badge">
+      <Setter Property="HorizontalAlignment" Value="Center" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type controls:Badged}"
+                BasedOn="{StaticResource MaterialBadged}"
+                TargetType="controls:Badged" />
+</ResourceDictionary>

Material.Styles/Controls/Badged.axaml.cs

@@ -0,0 +1,149 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Media;
+
+namespace Material.Styles.Controls;
+
+public enum BadgePlacement {
+    Left,
+    TopLeft,
+    Top,
+    TopRight,
+    Right,
+    BottomRight,
+    Bottom,
+    BottomLeft,
+    Center,
+}
+
+public class Badged : ContentControl {
+    /// <summary>
+    /// BadgeContent StyledProperty definition.
+    /// </summary>
+    public static readonly StyledProperty<object?> BadgeContentProperty =
+        AvaloniaProperty.Register<Badged, object?>(nameof(BadgeContent));
+    /// <summary>
+    /// Gets or sets the BadgeContent property.
+    /// </summary>
+    public object? BadgeContent {
+        get => GetValue(BadgeContentProperty);
+        set => SetValue(BadgeContentProperty, value);
+    }
+
+    /// <summary>
+    /// BadgeBackground StyledProperty definition.
+    /// </summary>
+    public static readonly StyledProperty<Brush> BadgeBackgroundProperty =
+        AvaloniaProperty.Register<Badged, Brush>(nameof(BadgeBackground));
+    /// <summary>
+    /// Gets or sets the BadgeBackground property.
+    /// </summary>
+    public Brush BadgeBackground {
+        get => GetValue(BadgeBackgroundProperty);
+        set => SetValue(BadgeBackgroundProperty, value);
+    }
+
+    /// <summary>
+    /// BadgeForeground StyledProperty definition.
+    /// </summary>
+    public static readonly StyledProperty<Brush> BadgeForegroundProperty =
+        AvaloniaProperty.Register<Badged, Brush>(nameof(BadgeForeground));
+    /// <summary>
+    /// Gets or sets the BadgeForeground property.
+    /// </summary>
+    public Brush BadgeForeground {
+        get => GetValue(BadgeForegroundProperty);
+        set => SetValue(BadgeForegroundProperty, value);
+    }
+
+    /// <summary>
+    /// BadgeCornerRadius StyledProperty definition.
+    /// </summary>
+    public static readonly StyledProperty<CornerRadius> BadgeCornerRadiusProperty =
+        AvaloniaProperty.Register<Badged, CornerRadius>(nameof(BadgeCornerRadius));
+    /// <summary>
+    /// Gets or sets the BadgeCornerRadius property.
+    /// </summary>
+    public CornerRadius BadgeCornerRadius {
+        get => GetValue(BadgeCornerRadiusProperty);
+        set => SetValue(BadgeCornerRadiusProperty, value);
+    }
+
+    /// <summary>
+    /// BadgePlacement StyledProperty definition.
+    /// </summary>
+    public static readonly StyledProperty<BadgePlacement> BadgePlacementProperty =
+        AvaloniaProperty.Register<Badged, BadgePlacement>(nameof(BadgePlacement));
+    /// <summary>
+    /// Gets or sets the BadgePlacement property.
+    /// </summary>
+    public BadgePlacement BadgePlacement {
+        get => GetValue(BadgePlacementProperty);
+        set => SetValue(BadgePlacementProperty, value);
+    }
+
+    /// <summary>
+    /// BadgeHasContent StyledProperty definition.
+    /// </summary>
+    public static readonly StyledProperty<bool> BadgeHasContentProperty =
+        AvaloniaProperty.Register<Badged, bool>(nameof(BadgeHasContent));
+    /// <summary>
+    /// Gets or sets the BadgeHasContent property.
+    /// </summary>
+    public bool BadgeHasContent {
+        get => GetValue(BadgeHasContentProperty);
+        set => SetValue(BadgeHasContentProperty, value);
+    }
+
+    /// <summary>
+    /// IsBadgeVisible StyledProperty definition.
+    /// </summary>
+    public static readonly StyledProperty<bool> IsBadgeVisibleProperty =
+        AvaloniaProperty.Register<Badged, bool>(nameof(IsBadgeVisible));
+    /// <summary>
+    /// Gets or sets the IsBadgeVisible property.
+    /// </summary>
+    public bool IsBadgeVisible {
+        get => GetValue(IsBadgeVisibleProperty);
+        set => SetValue(IsBadgeVisibleProperty, value);
+    }
+
+    /// <summary>
+    /// BadgeWidth StyledProperty definition.
+    /// </summary>
+    public static readonly StyledProperty<double> BadgeWidthProperty =
+        AvaloniaProperty.Register<Badged, double>(nameof(BadgeWidth));
+    /// <summary>
+    /// Gets or sets the BadgeWidth property.
+    /// </summary>
+    public double BadgeWidth {
+        get => GetValue(BadgeWidthProperty);
+        set => SetValue(BadgeWidthProperty, value);
+    }
+
+    /// <summary>
+    /// BadgeHeight StyledProperty definition.
+    /// </summary>
+    public static readonly StyledProperty<double> BadgeHeightProperty =
+        AvaloniaProperty.Register<Badged, double>(nameof(BadgeHeight));
+    /// <summary>
+    /// Gets or sets the BadgeHeight property.
+    /// </summary>
+    public double BadgeHeight {
+        get => GetValue(BadgeHeightProperty);
+        set => SetValue(BadgeHeightProperty, value);
+    }
+
+    /// <summary>
+    /// BadgeFontSize StyledProperty definition.
+    /// </summary>
+    public static readonly StyledProperty<double> BadgeFontSizeProperty =
+        AvaloniaProperty.Register<Badged, double>(nameof(BadgeFontSize));
+    /// <summary>
+    /// Gets or sets the BadgeFontSize property.
+    /// </summary>
+    public double BadgeFontSize {
+        get => GetValue(BadgeFontSizeProperty);
+        set => SetValue(BadgeFontSizeProperty, value);
+    }
+}

Material.Styles/MaterialToolKit.xaml

@@ -8,6 +8,8 @@
         <ResourceInclude Source="avares://Material.Styles/InvariantResources.xaml" />
 
         <!-- Material.Avalonia controls -->
+        <ResourceInclude Source="avares://Material.Styles/Controls/Badge.axaml" />
+        <ResourceInclude Source="avares://Material.Styles/Controls/Badged.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Controls/Card.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Controls/CircleClockPicker.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Controls/CircleClockPickerCell.axaml" />

Material.Styles/Themes/IReadOnlyTheme.cs

@@ -12,7 +12,8 @@ public interface IReadOnlyTheme {
     ColorPair SecondaryMid { get; }
     ColorPair SecondaryDark { get; }
 
-    Color ValidationError { get; }
+    ColorPair ValidationError { get; }
+
     Color Background { get; }
     Color Paper { get; }
     Color CardBackground { get; }
@@ -49,4 +50,4 @@ public interface IReadOnlyTheme {
     Color TextAreaInactiveBorder { get; }
 
     Color DataGridRowHoverBackground { get; }
-}
+}

Material.Styles/Themes/ITheme.cs

@@ -1,10 +1,8 @@
 using Avalonia.Media;
 using Material.Colors;
 
-namespace Material.Styles.Themes
-{
-    public interface ITheme : IReadOnlyTheme
-    {
+namespace Material.Styles.Themes {
+    public interface ITheme : IReadOnlyTheme {
         new ColorPair PrimaryLight { get; set; }
         new ColorPair PrimaryMid { get; set; }
         new ColorPair PrimaryDark { get; set; }
@@ -13,7 +11,7 @@ public interface ITheme : IReadOnlyTheme
         new ColorPair SecondaryMid { get; set; }
         new ColorPair SecondaryDark { get; set; }
 
-        new Color ValidationError { get; set; }
+        new ColorPair ValidationError { get; set; }
         new Color Background { get; set; }
         new Color Paper { get; set; }
         new Color CardBackground { get; set; }
@@ -51,4 +49,4 @@ public interface ITheme : IReadOnlyTheme
 
         new Color DataGridRowHoverBackground { get; set; }
     }
-}
+}