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>
@@ -155,6 +156,9 @@
                 <!-- Main page -->
                 <pages:Home />
 
+                <!-- Badges -->
+                <pages:BadgesDemo />
+
                 <!-- Buttons -->
                 <pages:ButtonsDemo />
 

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

@@ -0,0 +1,25 @@
+using System;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Material.Styles.Controls;
+using Material.Styles.Enums;
+
+namespace Material.Avalonia.Demo.Pages;
+
+public partial class BadgesDemo : UserControl {
+    private int _inboxCount;
+
+    public BadgesDemo() {
+        InitializeComponent();
+        badgePlacementSelector.ItemsSource = Enum.GetValues<BadgePlacement>();
+        badgePlacementSelector.SelectedItem = BadgePlacement.TopRight;
+
+        badgeColorModeSelector.ItemsSource = Enum.GetValues<ColorZoneMode>();
+        badgeColorModeSelector.SelectedItem = ColorZoneMode.Error;
+    }
+
+    private void OnIncrementBadgeClick(object? sender, RoutedEventArgs e) {
+        _inboxCount++;
+        InteractiveBadged.BadgeContent = _inboxCount.ToString();
+    }
+}

Material.Avalonia.Demo/Pages/ColorZonesDemo.axaml

@@ -112,6 +112,18 @@
             </showMeTheXaml:XamlDisplay>
         </StackPanel>
 
+        <StackPanel>
+          <TextBlock Classes="Headline6 Subheadline2" Text="Error mode" />
+          <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo9">
+            <controls:ColorZone Height="56" Padding="12" Mode="Error">
+              <Grid ColumnDefinitions="Auto,24,*">
+                <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
+              </Grid>
+            </controls:ColorZone>
+          </showMeTheXaml:XamlDisplay>
+        </StackPanel>
+
         <TextBlock Classes="Headline4 Subheadline" Text="More advanced ColorZones demo" />
         <StackPanel>
             <TextBlock Classes="Headline6 Subheadline2" Text="With menus" />

Material.Avalonia.Dialogs/Bases/DialogWindowBuilderParamsBase.cs

@@ -1,5 +1,6 @@
 using Avalonia.Controls;
 using Avalonia.Layout;
+using Avalonia.Media.Imaging;
 using Material.Dialog.Icons;
 
 namespace Material.Dialog.Bases
@@ -22,7 +23,7 @@ public class DialogWindowBuilderParamsBase
 
         // TODO: Support custom control
         /// <summary>
-        /// Specify <see cref="Avalonia.Media.Imaging.Bitmap"/>, <see cref="Avalonia.Controls.Control"/> or <see cref="DialogIconKind"/> for dialog header icon.
+        /// Specify <see cref="Bitmap"/>, <see cref="Control"/> or <see cref="DialogIconKind"/> for dialog header icon.
         /// </summary>
         public object? DialogIcon = null;
 

Material.Styles/Controls/Badge.axaml

@@ -0,0 +1,94 @@
+<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="CornerRadius" Value="9999" />
+    <Setter Property="Padding" Value="3 0" />
+    <Setter Property="MinHeight" Value="19" />
+    <Setter Property="MinWidth" Value="19" />
+    <Setter Property="HorizontalAlignment" Value="Center" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate>
+          <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 Name="PART_ContentPresenter"
+                              HorizontalAlignment="Center"
+                              VerticalAlignment="Center"
+                              Content="{TemplateBinding Content}"
+                              FontSize="{TemplateBinding FontSize}"
+                              Foreground="{TemplateBinding Foreground}" />
+          </Border>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+
+    <Style Selector="^:content-hidden">
+      <Setter Property="MinWidth" Value="6" />
+      <Setter Property="MinHeight" Value="6" />
+      <Setter Property="Padding" Value="0" />
+      <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="IsVisible" Value="False" />
+      </Style>
+    </Style>
+
+    <Style Selector="^[ColorMode=Standard]">
+      <Setter Property="Background" Value="{DynamicResource MaterialPaperBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialBodyBrush}" />
+    </Style>
+
+    <Style Selector="^[ColorMode=Inverted]">
+      <Setter Property="Background" Value="{DynamicResource MaterialBodyBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialPaperBrush}" />
+    </Style>
+
+    <Style Selector="^[ColorMode=PrimaryLight]">
+      <Setter Property="Background" Value="{DynamicResource MaterialPrimaryLightBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryLightForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^[ColorMode=PrimaryMid]">
+      <Setter Property="Background" Value="{DynamicResource MaterialPrimaryMidBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryMidForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^[ColorMode=PrimaryDark]">
+      <Setter Property="Background" Value="{DynamicResource MaterialPrimaryDarkBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^[ColorMode=Accent]">
+      <Setter Property="Background" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialSecondaryMidForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^[ColorMode=Light]">
+      <Setter Property="Background" Value="{DynamicResource MaterialLightBackgroundBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialLightForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^[ColorMode=Dark]">
+      <Setter Property="Background" Value="{DynamicResource MaterialDarkBackgroundBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialDarkForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^[ColorMode=Error]">
+      <Setter Property="Background" Value="{DynamicResource MaterialValidationErrorBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialValidationErrorForegroundBrush}" />
+    </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,55 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+
+namespace Material.Styles.Controls;
+
+[PseudoClasses(":display-content")]
+public class Badge : ContentControl {
+    /// <summary>
+    /// Identifies the <see cref="ColorMode"/> property.
+    /// </summary>
+    public static readonly StyledProperty<ColorZoneMode> ColorModeProperty = 
+        AvaloniaProperty.Register<Badge, ColorZoneMode>(nameof(ColorMode), ColorZoneMode.Error);
+
+    /// <summary>
+    /// Gets or sets the color zone mode
+    /// </summary>
+    public ColorZoneMode ColorMode {
+        get => GetValue(ColorModeProperty);
+        set => SetValue(ColorModeProperty, value);
+    }
+
+    /// <summary>
+    /// Identifies the <see cref="DisplayContent"/> property.
+    /// </summary>
+    public static readonly StyledProperty<bool?> DisplayContentProperty =
+        AvaloniaProperty.Register<Badge, bool?>(nameof(DisplayContent));
+
+    /// <summary>
+    /// Gets or sets whether the badge content is displayed.
+    /// </summary>
+    public bool? DisplayContent {
+        get => GetValue(DisplayContentProperty);
+        set => SetValue(DisplayContentProperty, value);
+    }
+
+    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change) {
+        base.OnPropertyChanged(change);
+        if (change.Property == DisplayContentProperty || change.Property == ContentProperty) {
+            UpdatePseudoClasses();
+        }
+    }
+
+    private void UpdatePseudoClasses() {
+        var displayContent = (DisplayContent, Content) switch {
+            (true, _) => true,
+            (null, 0) => false,
+            (null, "0") => false,
+            (null, "") => false,
+            (null, not null) => true,
+            (_, _) => false,
+        };
+        PseudoClasses.Set(":content-hidden", !displayContent);
+    }
+}

Material.Styles/Controls/Badged.axaml

@@ -0,0 +1,75 @@
+<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="BadgePlacement" Value="TopRight" />
+    <Setter Property="BadgeCornerRadius" Value="9999" />
+    <Setter Property="BadgeFontSize" Value="{Binding $self.FontSize}" />
+    <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}"
+                            ColorMode="{TemplateBinding BadgeColorMode}"
+                            DisplayContent="{TemplateBinding BadgeDisplayContent}"
+                            IsVisible="{TemplateBinding IsBadgeVisible}" />
+          </Grid>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+
+    <Style Selector="^[BadgeDisplayContent=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>