ShrlAlgoToolkit/Melskin/Controls/Badge.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:controls="clr-namespace:Melskin.Controls"
    xmlns:converters="clr-namespace:Melskin.Converters"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Melskin;component/Themes/Animations.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <Style TargetType="{x:Type controls:Badge}">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontSize" Value="10" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="BadgeHeight" Value="16" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Background" Value="{DynamicResource ErrorBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:Badge}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <!--  Content  -->
                        <ContentPresenter
                            Content="{TemplateBinding Content}"
                            ContentStringFormat="{TemplateBinding ContentStringFormat}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                            Grid.ColumnSpan="2"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Margin="{TemplateBinding Padding}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            x:Name="Content" />
                        <!--  Effect  -->
                        <Ellipse
                            Grid.Column="0"
                            Height="6.5"
                            Opacity="0"
                            RenderTransformOrigin="0.5,0.5"
                            Stroke="{DynamicResource PrimaryNormalBrush}"
                            StrokeThickness="1"
                            UseLayoutRounding="True"
                            Width="6.5"
                            x:Name="Effect">
                            <Ellipse.RenderTransform>
                                <ScaleTransform x:Name="EffectTransform" />
                            </Ellipse.RenderTransform>
                        </Ellipse>
                        <!--  Dot  -->
                        <Border
                            Background="{TemplateBinding Background}"
                            CornerRadius="{Binding Height, RelativeSource={RelativeSource Self}, Converter={x:Static converters:DivideByTwoConverter.Instance}}"
                            Grid.Column="0"
                            Grid.ColumnSpan="2"
                            Height="{TemplateBinding BadgeHeight}"
                            HorizontalAlignment="Right"
                            MinWidth="{TemplateBinding BadgeHeight}"
                            UseLayoutRounding="True"
                            VerticalAlignment="Top"
                            x:Name="Dot">
                            <ContentPresenter
                                HorizontalAlignment="Center"
                                Margin="4,0"
                                VerticalAlignment="Center"
                                x:Name="PART_Count" />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Dot" Value="True">
                            <Setter Property="Visibility" TargetName="PART_Count" Value="Collapsed" />
                            <Setter Property="Width" TargetName="Dot" Value="6" />
                            <Setter Property="Height" TargetName="Dot" Value="6" />
                            <Setter Property="MinWidth" TargetName="Dot" Value="0" />
                        </Trigger>
                        <Trigger Property="Status" Value="Success">
                            <Setter Property="Background" TargetName="Dot" Value="{DynamicResource SuccessBrush}" />
                        </Trigger>
                        <Trigger Property="Status" Value="Processing">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Duration="0:0:1.2"
                                            EasingFunction="{StaticResource EaseInOut}"
                                            From="0.5"
                                            RepeatBehavior="Forever"
                                            Storyboard.TargetName="Effect"
                                            Storyboard.TargetProperty="(UIElement.Opacity)"
                                            To="0" />
                                        <DoubleAnimation
                                            Duration="0:0:1.2"
                                            EasingFunction="{StaticResource EaseInOut}"
                                            From="0.8"
                                            RepeatBehavior="Forever"
                                            Storyboard.TargetName="EffectTransform"
                                            Storyboard.TargetProperty="ScaleX"
                                            To="2.4" />
                                        <DoubleAnimation
                                            Duration="0:0:1.2"
                                            EasingFunction="{StaticResource EaseInOut}"
                                            From="0.8"
                                            RepeatBehavior="Forever"
                                            Storyboard.TargetName="EffectTransform"
                                            Storyboard.TargetProperty="ScaleY"
                                            To="2.4" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Setter Property="Background" TargetName="Dot" Value="{DynamicResource PrimaryNormalBrush}" />
                        </Trigger>
                        <Trigger Property="Status" Value="Default">
                            <Setter Property="Background" TargetName="Dot" Value="{DynamicResource ControlBackgroundNormalBrush}" />
                        </Trigger>
                        <Trigger Property="Status" Value="Error">
                            <Setter Property="Background" TargetName="Dot" Value="{DynamicResource ErrorBrush}" />
                        </Trigger>
                        <Trigger Property="Status" Value="Warning">
                            <Setter Property="Background" TargetName="Dot" Value="{DynamicResource WarningBrush}" />
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Count" Value="0" />
                                <Condition Property="ShowZero" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Visibility" TargetName="Dot" Value="Collapsed" />
                        </MultiTrigger>
                        <DataTrigger Binding="{Binding Status, RelativeSource={RelativeSource Self}, Converter={x:Static converters:NullOrEmptyConverter.Instance}}" Value="False">
                            <Setter Property="Visibility" TargetName="PART_Count" Value="Collapsed" />
                            <Setter Property="Width" TargetName="Dot" Value="8" />
                            <Setter Property="Height" TargetName="Dot" Value="8" />
                            <Setter Property="Visibility" TargetName="Dot" Value="Visible" />
                            <Setter Property="MinWidth" TargetName="Dot" Value="0" />
                        </DataTrigger>
                        <!--  Stateful and no content  -->
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding Content, RelativeSource={RelativeSource Self}, Converter={x:Static converters:NullOrEmptyConverter.Instance}}" Value="True" />
                                <Condition Binding="{Binding Status, RelativeSource={RelativeSource Self}, Converter={x:Static converters:NullOrEmptyConverter.Instance}}" Value="False" />
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Foreground" Value="{DynamicResource TextPrimaryBrush}" />
                            <Setter Property="FontSize" Value="14" />
                            <Setter Property="VerticalAlignment" TargetName="Dot" Value="Center" />
                            <Setter Property="HorizontalAlignment" TargetName="Dot" Value="Left" />
                            <Setter Property="Grid.ColumnSpan" TargetName="Dot" Value="1" />

                            <Setter Property="VerticalAlignment" TargetName="Content" Value="Center" />
                            <Setter Property="HorizontalAlignment" TargetName="Content" Value="Left" />
                            <Setter Property="Margin" TargetName="Content" Value="8,0,0,0" />
                            <Setter Property="Grid.ColumnSpan" TargetName="Content" Value="1" />
                            <Setter Property="Grid.Column" TargetName="Content" Value="1" />
                            <Setter Property="Content" TargetName="Content" Value="{Binding Text, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                        </MultiDataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>