ShrlAlgoToolkit/AntDesignWPF/Controls/Badge/Badge.xaml

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

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Converters.xaml" />
        <ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Animations.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <Storyboard x:Key="Ant.BadgeEffectStoryboard">
        <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>

    <ControlTemplate TargetType="{x:Type controls:Badge}" x:Key="Ant.BadgeTemplate">
        <Grid>
            <!--  Effect  -->
            <!--<Ellipse x:Name="Effect"
                                 Opacity="0"
                                 StrokeThickness="1"
                                 RenderTransformOrigin="0.5,0.5"
                                 Width="{TemplateBinding BadgeHeight}"
                                 Height="{TemplateBinding BadgeHeight}"
                                 Stroke="{DynamicResource AntDesign.Brush.Primary}">
                            <Ellipse.RenderTransform>
                                <ScaleTransform x:Name="EffectTransform" />
                            </Ellipse.RenderTransform>
                        </Ellipse>-->
            <!--  Content  -->
            <Border
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}">
                <ContentPresenter
                    Content="{TemplateBinding Content}"
                    ContentStringFormat="{TemplateBinding ContentStringFormat}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    Margin="{TemplateBinding Padding}"
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
            </Border>
            <!--  Count  -->
            <Border
                Background="{TemplateBinding BadgeBackground}"
                CornerRadius="{Binding Height, RelativeSource={RelativeSource Self}, Converter={StaticResource DoubleToCornerRadiusConverter}, ConverterParameter=2}"
                Height="{TemplateBinding BadgeHeight}"
                HorizontalAlignment="Right"
                MinWidth="{TemplateBinding Height}"
                Padding="6,0"
                TextElement.FontSize="{DynamicResource BadgeFontSize}"
                TextElement.FontWeight="{DynamicResource BadgeFontWeight}"
                TextElement.Foreground="{TemplateBinding BadgeForeground}"
                VerticalAlignment="Top"
                x:Name="PART_BadgeContainer">
                <Border.RenderTransform>
                    <TranslateTransform X="-10" Y="-10" />
                </Border.RenderTransform>
                <ContentPresenter
                    HorizontalAlignment="Center"
                    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="Padding" TargetName="PART_BadgeContainer" Value="0" />
                <Setter Property="MinWidth" TargetName="PART_BadgeContainer" Value="0" />
                <Setter Property="Width" TargetName="PART_BadgeContainer" Value="{DynamicResource BadgeDotSize}" />
                <Setter Property="Height" TargetName="PART_BadgeContainer" Value="{DynamicResource BadgeDotSize}" />
            </Trigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="Count" Value="0" />
                    <Condition Property="ShowZero" Value="False" />
                </MultiTrigger.Conditions>
                <Setter Property="Visibility" TargetName="PART_BadgeContainer" Value="Collapsed" />
            </MultiTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate TargetType="{x:Type controls:Badge}" x:Key="Ant.BadgeStatusTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <!--  Dot  -->
                <ColumnDefinition Width="*" />
                <!--  Text  -->
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <!--  Effect  -->
            <Ellipse
                Height="{TemplateBinding BadgeHeight}"
                Opacity="0"
                RenderTransformOrigin="0.5,0.5"
                Stroke="{TemplateBinding BadgeBackground}"
                StrokeThickness="1"
                UseLayoutRounding="True"
                Width="{TemplateBinding BadgeHeight}"
                x:Name="Effect">
                <Ellipse.RenderTransform>
                    <ScaleTransform x:Name="EffectTransform" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <!--  Dot  -->
            <Ellipse
                Fill="{TemplateBinding BadgeBackground}"
                Height="{TemplateBinding BadgeHeight}"
                UseLayoutRounding="True"
                VerticalAlignment="Center"
                Width="{TemplateBinding BadgeHeight}"
                x:Name="Dot" />
            <!--  Content  -->
            <ContentControl
                Content="{TemplateBinding Text}"
                Grid.Column="1"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                Margin="{TemplateBinding Padding}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="Status" Value="Processing">
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Ant.BadgeEffectStoryboard}" />
                </Trigger.EnterActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style TargetType="{x:Type controls:Badge}">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontSize" Value="{DynamicResource BadgeFontSize}" />
        <Setter Property="FontWeight" Value="{DynamicResource BadgeFontWeight}" />
        <Setter Property="BadgeHeight" Value="{DynamicResource BadgeHeight}" />
        <Setter Property="Background" Value="{DynamicResource AntDesign.Brush.Error}" />
        <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
                            Height="{DynamicResource BadgeStatusSize}"
                            Opacity="0"
                            RenderTransformOrigin="0.5,0.5"
                            Stroke="{DynamicResource AntDesign.Brush.Primary}"
                            StrokeThickness="1"
                            UseLayoutRounding="True"
                            Width="{DynamicResource BadgeStatusSize}"
                            x:Name="Effect">
                            <Ellipse.RenderTransform>
                                <ScaleTransform x:Name="EffectTransform" />
                            </Ellipse.RenderTransform>
                        </Ellipse>
                        <!--  Dot  -->
                        <Border
                            Background="{TemplateBinding Background}"
                            CornerRadius="{Binding Height, RelativeSource={RelativeSource Self}, Converter={StaticResource DoubleToCornerRadiusConverter}, ConverterParameter=2}"
                            Grid.ColumnSpan="2"
                            Height="{TemplateBinding BadgeHeight}"
                            HorizontalAlignment="Right"
                            MinWidth="{TemplateBinding BadgeHeight}"
                            UseLayoutRounding="True"
                            VerticalAlignment="Top"
                            x:Name="Dot">
                            <ContentPresenter
                                HorizontalAlignment="Center"
                                Margin="6,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="{DynamicResource BadgeDotSize}" />
                            <Setter Property="Height" TargetName="Dot" Value="{DynamicResource BadgeDotSize}" />
                            <Setter Property="MinWidth" TargetName="Dot" Value="0" />
                        </Trigger>
                        <Trigger Property="Status" Value="Success">
                            <Setter Property="Background" TargetName="Dot" Value="{DynamicResource AntDesign.Brush.Success}" />
                        </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 AntDesign.Brush.Primary}" />
                        </Trigger>
                        <Trigger Property="Status" Value="Default">
                            <Setter Property="Background" TargetName="Dot" Value="{DynamicResource AntDesign.Brush.BackgroundContainer}" />
                        </Trigger>
                        <Trigger Property="Status" Value="Error">
                            <Setter Property="Background" TargetName="Dot" Value="{DynamicResource AntDesign.Brush.Error}" />
                        </Trigger>
                        <Trigger Property="Status" Value="Warning">
                            <Setter Property="Background" TargetName="Dot" Value="{DynamicResource AntDesign.Brush.Warning}" />
                        </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={StaticResource IsNullConverter}}" Value="False">
                            <Setter Property="Visibility" TargetName="PART_Count" Value="Collapsed" />
                            <Setter Property="Width" TargetName="Dot" Value="{DynamicResource BadgeStatusSize}" />
                            <Setter Property="Height" TargetName="Dot" Value="{DynamicResource BadgeStatusSize}" />
                            <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={StaticResource IsNullConverter}}" Value="True" />
                                <Condition Binding="{Binding Status, RelativeSource={RelativeSource Self}, Converter={StaticResource IsNullConverter}}" Value="False" />
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Foreground" Value="{DynamicResource AntDesign.Brush.TextPrimary}" />
                            <Setter Property="FontSize" Value="{DynamicResource FontSizeBase}" />
                            <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>


    <Style TargetType="{x:Type controls:Badge}" x:Key="Ant.Badge">
        <Setter Property="BadgeForeground" Value="White" />
        <Setter Property="BadgeHeight" Value="{DynamicResource BadgeHeight}" />
        <Setter Property="BadgeBackground" Value="{DynamicResource AntDesign.Brush.Error}" />
        <Setter Property="Template" Value="{StaticResource Ant.BadgeTemplate}" />
        <Style.Triggers>
            <Trigger Property="Status" Value="Success">
                <Setter Property="BadgeBackground" Value="{DynamicResource AntDesign.Brush.Success}" />
            </Trigger>
            <Trigger Property="Status" Value="Processing">
                <Setter Property="BadgeBackground" Value="{DynamicResource AntDesign.Brush.Primary}" />
            </Trigger>
            <Trigger Property="Status" Value="Default">
                <Setter Property="BadgeBackground" Value="{DynamicResource AntDesign.Brush.BackgroundContainer}" />
            </Trigger>
            <Trigger Property="Status" Value="Error">
                <Setter Property="BadgeBackground" Value="{DynamicResource AntDesign.Brush.Error}" />
            </Trigger>
            <Trigger Property="Status" Value="Warning">
                <Setter Property="BadgeBackground" Value="{DynamicResource AntDesign.Brush.Warning}" />
            </Trigger>
            <DataTrigger Binding="{Binding Status, RelativeSource={RelativeSource Self}, Converter={StaticResource IsNullConverter}}" Value="False">
                <Setter Property="BadgeHeight" Value="{DynamicResource BadgeStatusSize}" />
            </DataTrigger>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Content, RelativeSource={RelativeSource Self}, Converter={StaticResource IsNullConverter}}" Value="True" />
                    <Condition Binding="{Binding Status, RelativeSource={RelativeSource Self}, Converter={StaticResource IsNullConverter}}" Value="False" />
                </MultiDataTrigger.Conditions>
                <Setter Property="Padding" Value="8,0,0,0" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="Foreground" Value="{DynamicResource AntDesign.Brush.TextPrimary}" />
                <Setter Property="FontSize" Value="{DynamicResource FontSizeBase}" />
                <Setter Property="Template" Value="{StaticResource Ant.BadgeStatusTemplate}" />
            </MultiDataTrigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>