Play an animation when the content of the badge is changed, and add the related demo.

HandyControl/Controls/Other/Badge.cs

@@ -11,8 +11,23 @@ namespace HandyControl.Controls
     /// </summary>
     public class Badge : ContentControl
     {
+        public static readonly RoutedEvent BadgeChangedEvent = EventManager.RegisterRoutedEvent(
+            "BadgeChanged", RoutingStrategy.Direct, typeof(RoutedEventHandler), typeof(Badge));
+
+        public event RoutedEventHandler BadgeChanged
+        {
+            add => AddHandler(BadgeChangedEvent, value);
+            remove => RemoveHandler(BadgeChangedEvent, value);
+        }
+
         public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
-            "Text", typeof(string), typeof(Badge), new PropertyMetadata(default(string)));
+            "Text", typeof(string), typeof(Badge), new PropertyMetadata(default(string), (o, args) =>
+            {
+                var ctl = (Badge)o;
+
+                if (ctl.IsInitialized)
+                    ctl.RaiseEvent(new RoutedEventArgs(BadgeChangedEvent, ctl));
+            }));
 
         public string Text
         {

HandyControl/Themes/Styles/Base/BadgeBaseStyle.xaml

@@ -4,13 +4,41 @@
         <ResourceDictionary Source="../Border.xaml" />
     </ResourceDictionary.MergedDictionaries>
 
+    <SineEase x:Key="SineEaseOut" EasingMode="EaseOut" />
+
     <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}">
+            <Border x:Name="Border" RenderTransformOrigin="0.5 0.5" Style="{StaticResource BorderCircular}" Margin="{TemplateBinding BadgeMargin}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
+                <Border.RenderTransform>
+                    <ScaleTransform />
+                </Border.RenderTransform>
+
                 <ContentPresenter ContentSource="Text" Margin="{TemplateBinding Padding}" />
             </Border>
         </controls:SimplePanel>
+        <ControlTemplate.Triggers>
+            <EventTrigger RoutedEvent="controls:Badge.BadgeChanged">
+                <BeginStoryboard>
+                    <Storyboard AutoReverse="True">
+                        <DoubleAnimation Storyboard.TargetName="Border"
+                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
+                                         BeginTime="0"
+                                         Duration="0:0:.1"
+                                         From="1"
+                                         To="1.2"
+                                         EasingFunction="{StaticResource SineEaseOut}" />
+                        <DoubleAnimation Storyboard.TargetName="Border"
+                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
+                                         BeginTime="0"
+                                         Duration="0:0:.1"
+                                         From="1"
+                                         To="1.2"
+                                         EasingFunction="{StaticResource SineEaseOut}" />
+                    </Storyboard>
+                </BeginStoryboard>
+            </EventTrigger>
+        </ControlTemplate.Triggers>
     </ControlTemplate>
 
     <ControlTemplate x:Key="BadgeDotTemplate" TargetType="controls:Badge">
@@ -20,8 +48,6 @@
         </controls:SimplePanel>
     </ControlTemplate>
 
-    <SineEase x:Key="SineEaseOut" EasingMode="EaseOut" />
-
     <ControlTemplate x:Key="BadgeProcessingTemplate" TargetType="controls:Badge">
         <controls:SimplePanel>
             <ContentPresenter />

HandyControlDemo/HandyControlDemo.csproj

@@ -364,6 +364,7 @@
     <Compile Include="ViewModel\Basic\ChatBoxViewModel.cs" />
     <Compile Include="ViewModel\Basic\InteractiveDialogViewModel.cs" />
     <Compile Include="ViewModel\Common\ComboBoxDemoViewModel.cs" />
+    <Compile Include="ViewModel\Controls\BadgeDemoCtlViewModel.cs" />
     <Compile Include="ViewModel\Controls\CoverViewModel.cs" />
     <Compile Include="ViewModel\Controls\DialogDemoViewModel.cs" />
     <Compile Include="ViewModel\Controls\NotifyIconDemoViewModel.cs" />

HandyControlDemo/UserControl/Controls/BadgeDemoCtl.xaml

@@ -3,7 +3,8 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:controls="clr-namespace:HandyControl.Controls;assembly=HandyControl"
              xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
-             Background="{DynamicResource RegionBrush}">
+             Background="{DynamicResource RegionBrush}"
+             DataContext="{Binding Path=BadgeDemoCtl, Source={StaticResource Locator}}">
     <controls:TransitioningContentControl>
         <StackPanel Margin="32" Orientation="Horizontal">
             <controls:Badge Text="New" BadgeMargin="0,-14,-20,0" Height="30">
@@ -12,8 +13,8 @@
             <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 Value="{Binding Count}" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgePrimary}">
+                <Button Content="计数" Command="{Binding CountCommand}"/>
             </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}"/>

HandyControlDemo/ViewModel/Controls/BadgeDemoCtlViewModel.cs

@@ -0,0 +1,25 @@
+using System.Windows.Input;
+using GalaSoft.MvvmLight;
+using GalaSoft.MvvmLight.CommandWpf;
+
+namespace HandyControlDemo.ViewModel.Controls
+{
+    public class BadgeDemoCtlViewModel : ViewModelBase
+    {
+        private int _count;
+
+        public int Count
+        {
+            get => _count;
+            set => Set(ref _count, value);
+        }
+
+        public ICommand CountCommand { get; }
+
+        public BadgeDemoCtlViewModel()
+        {
+            Count = 1;
+            CountCommand = new RelayCommand(() => Count++);
+        }
+    }
+}

HandyControlDemo/ViewModel/ViewModelLocator.cs

@@ -5,6 +5,7 @@ using GalaSoft.MvvmLight.Ioc;
 using HandyControlDemo.Data;
 using HandyControlDemo.Service;
 using HandyControlDemo.ViewModel.Basic;
+using HandyControlDemo.ViewModel.Controls;
 
 namespace HandyControlDemo.ViewModel
 {
@@ -31,6 +32,7 @@ namespace HandyControlDemo.ViewModel
             SimpleIoc.Default.Register<SearchBarDemoViewModel>();
             SimpleIoc.Default.Register<NotifyIconDemoViewModel>();
             SimpleIoc.Default.Register<InteractiveDialogViewModel>();
+            SimpleIoc.Default.Register<BadgeDemoCtlViewModel>();
         }
 
         public static ViewModelLocator Instance => new Lazy<ViewModelLocator>(() =>
@@ -67,6 +69,8 @@ namespace HandyControlDemo.ViewModel
         public NotifyIconDemoViewModel NotifyIconDemo => ServiceLocator.Current.GetInstance<NotifyIconDemoViewModel>();
 
         public InteractiveDialogViewModel InteractiveDialog => ServiceLocator.Current.GetInstance<InteractiveDialogViewModel>();
+
+        public BadgeDemoCtlViewModel BadgeDemoCtl => ServiceLocator.Current.GetInstance<BadgeDemoCtlViewModel>();
         #endregion
     }
 }