From bf34643ff46caf634a53f3b2ac8e56f5153402d3 Mon Sep 17 00:00:00 2001
From: Dingping Zhang <DingpingZhang@outlook.com>
Date: Thu, 4 Apr 2019 13:19:32 +0800
Subject: [PATCH] Add the processing status style to badge control.

---
 HandyControl/Controls/Other/Badge.cs          | 24 +++---
 .../Themes/Styles/Base/BadgeBaseStyle.xaml    | 76 ++++++++++++++-----
 .../UserControl/Controls/BadgeDemoCtl.xaml    |  5 +-
 3 files changed, 72 insertions(+), 33 deletions(-)

diff --git a/HandyControl/Controls/Other/Badge.cs b/HandyControl/Controls/Other/Badge.cs
index 85e85c8b..4660d97c 100644
--- a/HandyControl/Controls/Other/Badge.cs
+++ b/HandyControl/Controls/Other/Badge.cs
@@ -4,6 +4,8 @@ using HandyControl.Data;
 
 namespace HandyControl.Controls
 {
+    public enum BadgeStatus { Normal, Dot, Processing }
+
     /// <summary>
     ///     标记
     /// </summary>
@@ -14,7 +16,7 @@ namespace HandyControl.Controls
 
         public string Text
         {
-            get => (string) GetValue(TextProperty);
+            get => (string)GetValue(TextProperty);
             set => SetValue(TextProperty, value);
         }
 
@@ -23,24 +25,24 @@ namespace HandyControl.Controls
 
         private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
-            var ctl = (Badge) d;
-            var v = (int) e.NewValue;
+            var ctl = (Badge)d;
+            var v = (int)e.NewValue;
             ctl.Text = v <= ctl.Maximum ? v.ToString() : $"{ctl.Maximum}+";
         }
 
         public int Value
         {
-            get => (int) GetValue(ValueProperty);
+            get => (int)GetValue(ValueProperty);
             set => SetValue(ValueProperty, value);
         }
 
-        public static readonly DependencyProperty IsDotProperty = DependencyProperty.Register(
-            "IsDot", typeof(bool), typeof(Badge), new PropertyMetadata(ValueBoxes.FalseBox));
+        public static readonly DependencyProperty StatusProperty = DependencyProperty.Register(
+            "Status", typeof(BadgeStatus), typeof(Badge), new PropertyMetadata(default(BadgeStatus)));
 
-        public bool IsDot
+        public BadgeStatus Status
         {
-            get => (bool) GetValue(IsDotProperty);
-            set => SetValue(IsDotProperty, value);
+            get => (BadgeStatus)GetValue(StatusProperty);
+            set => SetValue(StatusProperty, value);
         }
 
         public static readonly DependencyProperty MaximumProperty = DependencyProperty.Register(
@@ -48,7 +50,7 @@ namespace HandyControl.Controls
 
         public int Maximum
         {
-            get => (int) GetValue(MaximumProperty);
+            get => (int)GetValue(MaximumProperty);
             set => SetValue(MaximumProperty, value);
         }
 
@@ -57,7 +59,7 @@ namespace HandyControl.Controls
 
         public Thickness BadgeMargin
         {
-            get => (Thickness) GetValue(BadgeMarginProperty);
+            get => (Thickness)GetValue(BadgeMarginProperty);
             set => SetValue(BadgeMarginProperty, value);
         }
     }
diff --git a/HandyControl/Themes/Styles/Base/BadgeBaseStyle.xaml b/HandyControl/Themes/Styles/Base/BadgeBaseStyle.xaml
index d1e7d26e..7bde9499 100644
--- a/HandyControl/Themes/Styles/Base/BadgeBaseStyle.xaml
+++ b/HandyControl/Themes/Styles/Base/BadgeBaseStyle.xaml
@@ -1,42 +1,76 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:controls="clr-namespace:HandyControl.Controls">
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="clr-namespace:HandyControl.Controls">
 
     <ResourceDictionary.MergedDictionaries>
-        <ResourceDictionary Source="../Border.xaml"/>
+        <ResourceDictionary Source="../Border.xaml" />
     </ResourceDictionary.MergedDictionaries>
 
     <ControlTemplate x:Key="BadgeTextTemplate" TargetType="controls:Badge">
         <controls:SimplePanel>
-            <ContentPresenter/>
+            <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}"/>
+                <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}"/>
+            <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>
+
+    <SineEase x:Key="SineEaseOut" EasingMode="EaseOut" />
+
+    <ControlTemplate x:Key="BadgeProcessingTemplate" TargetType="controls:Badge">
+        <controls:SimplePanel>
+            <ContentPresenter />
+            <Ellipse Height="10" Width="10" Fill="{TemplateBinding Background}" RenderTransformOrigin="0.5 0.5" Margin="{TemplateBinding BadgeMargin}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+                <Ellipse.OpacityMask>
+                    <RadialGradientBrush>
+                        <GradientStop Offset="0" Color="Transparent" />
+                        <GradientStop Offset="1" Color="Black" />
+                    </RadialGradientBrush>
+                </Ellipse.OpacityMask>
+                <Ellipse.RenderTransform>
+                    <ScaleTransform />
+                </Ellipse.RenderTransform>
+                <Ellipse.Triggers>
+                    <EventTrigger RoutedEvent="Loaded">
+                        <BeginStoryboard>
+                            <Storyboard RepeatBehavior="Forever">
+                                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" BeginTime="0" Duration="0:0:1" From="1" To="2" EasingFunction="{StaticResource SineEaseOut}" />
+                                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" BeginTime="0" Duration="0:0:1" From="1" To="2" EasingFunction="{StaticResource SineEaseOut}" />
+                                <DoubleAnimation Storyboard.TargetProperty="Opacity" BeginTime="0" Duration="0:0:1" From="1" To="0" EasingFunction="{StaticResource SineEaseOut}" />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </EventTrigger>
+                </Ellipse.Triggers>
+            </Ellipse>
+            <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" Value="{StaticResource BadgeTextTemplate}"/>
-        <Setter Property="HorizontalContentAlignment" Value="Right"/>
-        <Setter Property="VerticalContentAlignment" Value="Top"/>
-        <Setter Property="BadgeMargin" Value="0,-10,-10,0"/>
+        <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" 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 Property="Status" Value="Dot">
+                <Setter Property="Template" Value="{StaticResource BadgeDotTemplate}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}" />
+                <Setter Property="BadgeMargin" Value="0,-5,-5,0" />
+            </Trigger>
+            <Trigger Property="Status" Value="Processing">
+                <Setter Property="Template" Value="{StaticResource BadgeProcessingTemplate}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}" />
+                <Setter Property="BadgeMargin" Value="0,-5,-5,0" />
             </Trigger>
         </Style.Triggers>
     </Style>
diff --git a/HandyControlDemo/UserControl/Controls/BadgeDemoCtl.xaml b/HandyControlDemo/UserControl/Controls/BadgeDemoCtl.xaml
index 5fd1ed85..3039e7b2 100644
--- a/HandyControlDemo/UserControl/Controls/BadgeDemoCtl.xaml
+++ b/HandyControlDemo/UserControl/Controls/BadgeDemoCtl.xaml
@@ -18,9 +18,12 @@
             <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}">
+            <controls:Badge Status="Dot" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeDanger}">
                 <Button Content="{x:Static langs:Lang.Reply}"/>
             </controls:Badge>
+            <controls:Badge Status="Processing" Height="30" Margin="32,0,0,0" Style="{StaticResource BadgeDanger}">
+                <Button Content="{x:Static langs:Lang.Reply}" />
+            </controls:Badge>
         </StackPanel>
     </controls:TransitioningContentControl>
 </UserControl>