From 2fd5d904326ad8b9190ed049aa00f17b2bdade0f Mon Sep 17 00:00:00 2001
From: DingpingZhang <DingpingZhang@outlook.com>
Date: Thu, 4 Apr 2019 21:05:15 +0800
Subject: [PATCH] Play an animation when the content of the badge is changed,
 and add the related demo.

---
 HandyControl/Controls/Other/Badge.cs          | 17 +++++++++-
 .../Themes/Styles/Base/BadgeBaseStyle.xaml    | 32 +++++++++++++++++--
 HandyControlDemo/HandyControlDemo.csproj      |  1 +
 .../UserControl/Controls/BadgeDemoCtl.xaml    |  7 ++--
 .../Controls/BadgeDemoCtlViewModel.cs         | 25 +++++++++++++++
 .../ViewModel/ViewModelLocator.cs             |  4 +++
 6 files changed, 79 insertions(+), 7 deletions(-)
 create mode 100644 HandyControlDemo/ViewModel/Controls/BadgeDemoCtlViewModel.cs

diff --git a/HandyControl/Controls/Other/Badge.cs b/HandyControl/Controls/Other/Badge.cs
index 4660d97c..bd02d2bf 100644
--- a/HandyControl/Controls/Other/Badge.cs
+++ b/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
         {
diff --git a/HandyControl/Themes/Styles/Base/BadgeBaseStyle.xaml b/HandyControl/Themes/Styles/Base/BadgeBaseStyle.xaml
index 7bde9499..15b47890 100644
--- a/HandyControl/Themes/Styles/Base/BadgeBaseStyle.xaml
+++ b/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 />
diff --git a/HandyControlDemo/HandyControlDemo.csproj b/HandyControlDemo/HandyControlDemo.csproj
index 9bfba767..c663153c 100644
--- a/HandyControlDemo/HandyControlDemo.csproj
+++ b/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" />
diff --git a/HandyControlDemo/UserControl/Controls/BadgeDemoCtl.xaml b/HandyControlDemo/UserControl/Controls/BadgeDemoCtl.xaml
index 3039e7b2..9cf1eec8 100644
--- a/HandyControlDemo/UserControl/Controls/BadgeDemoCtl.xaml
+++ b/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}"/>
diff --git a/HandyControlDemo/ViewModel/Controls/BadgeDemoCtlViewModel.cs b/HandyControlDemo/ViewModel/Controls/BadgeDemoCtlViewModel.cs
new file mode 100644
index 00000000..c12fd36b
--- /dev/null
+++ b/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++);
+        }
+    }
+}
diff --git a/HandyControlDemo/ViewModel/ViewModelLocator.cs b/HandyControlDemo/ViewModel/ViewModelLocator.cs
index 24997587..d6386eb0 100644
--- a/HandyControlDemo/ViewModel/ViewModelLocator.cs
+++ b/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
     }
 }
\ No newline at end of file