BPA.SingleDevice/BPA.UIControl/Themes/Badge.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:bpa="clr-namespace:BPA.UIControl"
                    xmlns:converter="clr-namespace:BPA.UIControl.Converters">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary>
            <converter:BadgeOffsetConverter x:Key="BadgeOffsetConverter" />
        </ResourceDictionary>
        <ResourceDictionary Source="pack://application:,,,/BPA.UIControl;component/Themes/Resources/Default.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <Style x:Key="RubyerBadge" TargetType="{x:Type bpa:Badge}">
        <Setter Property="BadgeBrush" Value="{StaticResource Error}" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Foreground" Value="{StaticResource WhiteForeground}" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="BadgeFontSize" Value="11" />
        <Setter Property="BadgeSize" Value="20" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type bpa:Badge}">
                    <Grid>
                        <Border x:Name="border"
                                MinWidth="{TemplateBinding BadgeSize}"
                                MinHeight="{TemplateBinding BadgeSize}"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Panel.ZIndex="1"
                                Background="{TemplateBinding BadgeBrush}"
                                CornerRadius="{Binding ActualHeight, RelativeSource={RelativeSource Self}, Converter={StaticResource HalfOfDoubleConverter}}"
                                RenderTransformOrigin="0.5 0.5">
                            <Border.RenderTransform>
                                <ScaleTransform />
                            </Border.RenderTransform>
                            <Border.Margin>
                                <MultiBinding Converter="{StaticResource BadgeOffsetConverter}">
                                    <Binding ElementName="border" Path="ActualHeight" />
                                    <Binding ElementName="border" Path="ActualWidth" />
                                </MultiBinding>
                            </Border.Margin>
                            <TextBlock x:Name="text"
                                       Margin="5 2"
                                       HorizontalAlignment="Center"
                                       FontSize="{TemplateBinding BadgeFontSize}"
                                       Text="{TemplateBinding Text}" />
                        </Border>

                        <ContentPresenter Focusable="False"
                                          RecognizesAccessKey="True"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource IsNullOrEmptyConverter}}" Value="True">
                            <Setter TargetName="text" Property="Visibility" Value="Collapsed" />
                            <Setter Property="BadgeSize" Value="10" />
                        </DataTrigger>
                        <Trigger Property="IsHidden" Value="True">
                            <Setter TargetName="border" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <EventTrigger RoutedEvent="TextChanged">
                            <BeginStoryboard>
                                <BeginStoryboard.Storyboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="border"
                                                         Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
                                                         From="0.6"
                                                         To="1"
                                                         Duration="0:0:0.3">
                                            <DoubleAnimation.EasingFunction>
                                                <BackEase EasingMode="EaseOut" />
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Storyboard.TargetName="border"
                                                         Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
                                                         From="0.6"
                                                         To="1"
                                                         Duration="0:0:0.3">
                                            <DoubleAnimation.EasingFunction>
                                                <BackEase EasingMode="EaseOut" />
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard.Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>