OnlineMonitorSystem/HandyControl/HandyControl_Shared/Themes/Styles/Base/BadgeBaseStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                    xmlns:hc="clr-namespace:HandyControl.Controls">

    <SineEase x:Key="SineEaseOut" EasingMode="EaseOut" />

    <ControlTemplate x:Key="BadgeTextTemplate" TargetType="hc:Badge">
        <hc:SimplePanel>
            <ContentPresenter />
            <Border x:Name="Border" Visibility="{TemplateBinding ShowBadge,Converter={StaticResource Boolean2VisibilityConverter}}" 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>
        </hc:SimplePanel>
        <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="hc:Badge.ValueChanged">
                <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="hc:Badge">
        <hc:SimplePanel>
            <ContentPresenter />
            <Border Visibility="{TemplateBinding ShowBadge,Converter={StaticResource Boolean2VisibilityConverter}}" Margin="{TemplateBinding BadgeMargin}" Width="10" Height="10" CornerRadius="5" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
        </hc:SimplePanel>
    </ControlTemplate>

    <ControlTemplate x:Key="BadgeProcessingTemplate" TargetType="hc:Badge">
        <hc:SimplePanel>
            <ContentPresenter />
            <Ellipse Visibility="{TemplateBinding ShowBadge,Converter={StaticResource Boolean2VisibilityConverter}}" 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" DesiredFrameRate="20">
                                <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 Visibility="{TemplateBinding ShowBadge,Converter={StaticResource Boolean2VisibilityConverter}}" Margin="{TemplateBinding BadgeMargin}" Width="10" Height="10" CornerRadius="5" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
        </hc:SimplePanel>
    </ControlTemplate>

    <Style x:Key="BadgeBaseStyle" TargetType="hc:Badge">
        <Setter Property="Focusable" Value="False"/>
        <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="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>

</ResourceDictionary>