add Badge

HandyControl/Controls/Attach/BorderElement.cs

@@ -1,5 +1,4 @@
-using System;
-using System.Windows;
+using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Data;
 using HandyControl.Data;
@@ -25,10 +24,6 @@ namespace HandyControl.Controls
             {
                 if ((bool)e.NewValue)
                 {
-                    border.SetBinding(FrameworkElement.MinWidthProperty,
-                        new Binding(FrameworkElement.ActualWidthProperty.Name) { Source = border });
-                    border.SetBinding(FrameworkElement.MinHeightProperty,
-                        new Binding(FrameworkElement.ActualHeightProperty.Name) { Source = border });
                     var binding = new MultiBinding
                     {
                         Converter = new BorderCircularConverter()

HandyControl/Controls/Other/Badge.cs

@@ -4,6 +4,9 @@ using HandyControl.Data;
 
 namespace HandyControl.Controls
 {
+    /// <summary>
+    ///     标记
+    /// </summary>
     public class Badge : ContentControl
     {
         public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
@@ -22,7 +25,7 @@ namespace HandyControl.Controls
         {
             var ctl = (Badge) d;
             var v = (int) e.NewValue;
-            ctl.Text = v.ToString();
+            ctl.Text = v <= ctl.Maximum ? v.ToString() : $"{ctl.Maximum}+";
         }
 
         public int Value
@@ -41,12 +44,21 @@ namespace HandyControl.Controls
         }
 
         public static readonly DependencyProperty MaximumProperty = DependencyProperty.Register(
-            "Maximum", typeof(int), typeof(Badge), new PropertyMetadata(ValueBoxes.Int99Box));
+            "Maximum", typeof(int), typeof(Badge), new PropertyMetadata(ValueBoxes.Int99Box, OnValueChanged));
 
         public int Maximum
         {
             get => (int) GetValue(MaximumProperty);
             set => SetValue(MaximumProperty, value);
         }
+
+        public static readonly DependencyProperty BadgeMarginProperty = DependencyProperty.Register(
+            "BadgeMargin", typeof(Thickness), typeof(Badge), new PropertyMetadata(default(Thickness)));
+
+        public Thickness BadgeMargin
+        {
+            get => (Thickness) GetValue(BadgeMarginProperty);
+            set => SetValue(BadgeMarginProperty, value);
+        }
     }
 }

HandyControl/Controls/Panel/SimplePanel.cs

@@ -4,6 +4,12 @@ using System.Windows.Controls;
 
 namespace HandyControl.Controls
 {
+    /// <summary>
+    ///     用以代替Grid
+    /// </summary>
+    /// <remarks>
+    ///     当不需要Grid的行、列分隔等功能时建议用此轻量级类代替
+    /// </remarks>
     public class SimplePanel : Panel
     {
         protected override Size MeasureOverride(Size availableSize)

HandyControl/HandyControl.csproj

@@ -109,7 +109,7 @@
     <Compile Include="Controls\Attach\TitleElement.cs" />
     <Compile Include="Controls\Button\ContextMenuButton.cs" />
     <Compile Include="Controls\Button\ContextMenuToggleButton.cs" />
-    <Compile Include="Controls\Badge\Badge.cs" />
+    <Compile Include="Controls\Other\Badge.cs" />
     <Compile Include="Controls\Other\Carousel.cs" />
     <Compile Include="Controls\Cover\CoverView\CoverView.cs" />
     <Compile Include="Controls\Other\ChatBubble.cs" />

HandyControl/Themes/Styles/Badge.xaml

@@ -10,23 +10,23 @@
         <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
     </Style>
 
-    <Style x:Key="BadgeChromePrimary" BasedOn="{StaticResource BadgeBaseStyle}" TargetType="controls:Badge">
+    <Style x:Key="BadgePrimary" BasedOn="{StaticResource BadgeBaseStyle}" TargetType="controls:Badge">
         <Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
     </Style>
 
-    <Style x:Key="BadgeChromeSuccess" BasedOn="{StaticResource BadgeBaseStyle}" TargetType="controls:Badge">
+    <Style x:Key="BadgeSuccess" BasedOn="{StaticResource BadgeBaseStyle}" TargetType="controls:Badge">
         <Setter Property="Background" Value="{DynamicResource SuccessBrush}"/>
     </Style>
 
-    <Style x:Key="BadgeChromeInfo" BasedOn="{StaticResource BadgeBaseStyle}" TargetType="controls:Badge">
+    <Style x:Key="BadgeInfo" BasedOn="{StaticResource BadgeBaseStyle}" TargetType="controls:Badge">
         <Setter Property="Background" Value="{DynamicResource InfoBrush}"/>
     </Style>
 
-    <Style x:Key="BadgeChromeWarning" BasedOn="{StaticResource BadgeBaseStyle}" TargetType="controls:Badge">
+    <Style x:Key="BadgeWarning" BasedOn="{StaticResource BadgeBaseStyle}" TargetType="controls:Badge">
         <Setter Property="Background" Value="{DynamicResource WarningBrush}"/>
     </Style>
 
-    <Style x:Key="BadgeChromeDanger" BasedOn="{StaticResource BadgeBaseStyle}" TargetType="controls:Badge">
+    <Style x:Key="BadgeDanger" BasedOn="{StaticResource BadgeBaseStyle}" TargetType="controls:Badge">
         <Setter Property="Background" Value="{DynamicResource DangerBrush}"/>
     </Style>
 

HandyControl/Themes/Styles/Base/BadgeBaseStyle.xaml

@@ -6,24 +6,39 @@
         <ResourceDictionary Source="../Border.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
+    <ControlTemplate x:Key="BadgeTextTemplate" TargetType="controls:Badge">
+        <controls:SimplePanel>
+            <ContentPresenter/>
+            <Border Style="{StaticResource BorderCircular}" Margin="{TemplateBinding BadgeMargin}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
+                <ContentPresenter ContentSource="Text" Margin="{TemplateBinding Padding}"/>
+            </Border>
+        </controls:SimplePanel>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="BadgeDotTemplate" TargetType="controls:Badge">
+        <controls:SimplePanel>
+            <ContentPresenter/>
+            <Border Margin="{TemplateBinding BadgeMargin}" Width="10" Height="10" CornerRadius="5" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
+        </controls:SimplePanel>
+    </ControlTemplate>
+
     <Style x:Key="BadgeBaseStyle" TargetType="controls:Badge">
         <Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
         <Setter Property="Foreground" Value="{DynamicResource TextIconBrush}"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="BorderBrush" Value="{DynamicResource RegionBrush}"/>
         <Setter Property="Padding" Value="6,2"/>
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="controls:Badge">
-                    <controls:SimplePanel>
-                        <ContentPresenter/>
-                        <Border Margin="0,-10,-20,0" HorizontalAlignment="Right" VerticalAlignment="Top" Style="{StaticResource BorderCircular}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
-                            <ContentPresenter ContentSource="Text" Margin="{TemplateBinding Padding}"/>
-                        </Border>
-                    </controls:SimplePanel>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
+        <Setter Property="Template" Value="{StaticResource BadgeTextTemplate}"/>
+        <Setter Property="HorizontalContentAlignment" Value="Right"/>
+        <Setter Property="VerticalContentAlignment" Value="Top"/>
+        <Setter Property="BadgeMargin" Value="0,-10,-10,0"/>
+        <Style.Triggers>
+            <Trigger Property="IsDot" Value="True">
+                <Setter Property="Template" Value="{StaticResource BadgeDotTemplate}"/>
+                <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
+                <Setter Property="BadgeMargin" Value="0,-5,-5,0"/>
+            </Trigger>
+        </Style.Triggers>
     </Style>
 
 </ResourceDictionary>

HandyControlDemo/UserControl/Controls/BadgeDemoCtl.xaml

@@ -5,10 +5,19 @@
              xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
              Background="{DynamicResource RegionBrush}">
     <StackPanel Margin="32" Orientation="Horizontal">
-        <controls:Badge Value="99" Height="30">
+        <controls:Badge Text="New" BadgeMargin="0,-14,-20,0" Height="30">
             <Button Content="{x:Static langs:Lang.Comment}"/>
         </controls:Badge>
-        <controls:Badge Value="99" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeChromeDanger}">
+        <controls:Badge Text="New" BadgeMargin="0,-14,-20,0" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeDanger}">
+            <Button Content="{x:Static langs:Lang.Comment}"/>
+        </controls:Badge>
+        <controls:Badge Value="1" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgePrimary}">
+            <Button Content="{x:Static langs:Lang.Comment}"/>
+        </controls:Badge>
+        <controls:Badge Value="100" BadgeMargin="0,-14,-20,0" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeDanger}">
+            <Button Content="{x:Static langs:Lang.Comment}"/>
+        </controls:Badge>
+        <controls:Badge IsDot="True" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeDanger}">
             <Button Content="{x:Static langs:Lang.Reply}"/>
         </controls:Badge>
     </StackPanel>

HandyControlDemo/UserControl/Main/LeftMainContent.xaml

@@ -388,7 +388,7 @@
                             <Image Source="../../Resources/Img/LeftMainContent/ScrollBox_16x.png"/>
                         </controls:EdgeElement.LeftContent>
                     </ListBoxItem>
-                    <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.WindowDemoCtl}" Content="{x:Static langs:Lang.Window}">
+                    <ListBoxItem Tag="{x:Static data:MessageToken.WindowDemoCtl}" Content="{x:Static langs:Lang.Window}">
                         <controls:EdgeElement.LeftContent>
                             <Image Source="../../Resources/Img/LeftMainContent/WindowsForm_16x.png"/>
                         </controls:EdgeElement.LeftContent>

README.md

@@ -39,6 +39,10 @@ Step 3：enjoy coding
 
 ## Latest examples
 
+### Badge
+
+![Badge](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Badge.png)
+
 ### Gravatar
 
 ![Gravatar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Gravatar.gif)