WPF 实现 Badge 标识

WPF开发者

Windows 桌面开发，微软最有价值专家

WPF 实现 Badge 标识

控件名：Badge
作者：WPFDevelopersOrg - 驚鏵
原文链接 [1] ： https:// github.com/WPFDeveloper sOrg/WPFDevelopers

框架使用 .NET4 至 .NET6
Visual Studio 2022
新建 Badge.cs 继承装饰器 Adorner 增加依赖属性

Text 用来展示文本
FontSize 文本大小
IsShow 为布尔值用来是否显示 Badge
IsShow = true 不设置其他属性时候只显示一个小红点
如果设置了 Text 则根据文本的宽度高度绘制小圆点的大小

默认将其绘制到控件右上角。

1）新建 Badge.cs 控件代码如下:

using System;
using System.Windows;
using System.Windows.Documents;
using System.Windows.Media;
namespace WPFDevelopers.Controls
    public class Badge : Adorner
        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(Badge), new PropertyMetadata(string.Empty));
        public static readonly DependencyProperty FontSizeProperty =
            DependencyProperty.Register("FontSize", typeof(double), typeof(Badge), new PropertyMetadata(10.0d));
        public static readonly DependencyProperty IsShowProperty =
            DependencyProperty.RegisterAttached("IsShow", typeof(bool), typeof(Badge),
                new PropertyMetadata(false, OnIsBadgeChanged));
        private static FrameworkElement oldFrameworkElement;
        private readonly double _size;
        private readonly string _text;
        public Badge(UIElement adornedElement, string text = null, double size = 0)
            : base(adornedElement)
            _text = text;
            _size = size;
            ToolTip = text;
        public string Text
            get => (string) GetValue(TextProperty);
            set => SetValue(TextProperty, value);
        public double FontSize
            get => (double) GetValue(FontSizeProperty);
            set => SetValue(FontSizeProperty, value);
        public static string GetText(UIElement element)
            if (element == null) throw new ArgumentNullException("Text");
            return (string) element.GetValue(TextProperty);
        public static void SetText(UIElement element, string Text)
            if (element == null) throw new ArgumentNullException("Text");
            element.SetValue(TextProperty, Text);
        public static double GetFontSize(UIElement element)
            if (element == null) throw new ArgumentNullException("FontSize");
            return (double) element.GetValue(FontSizeProperty);
        public static void SetFontSize(UIElement element, string Text)
            if (element == null) throw new ArgumentNullException("FontSize");
            element.SetValue(FontSizeProperty, Text);
        private static void OnIsBadgeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
            if (e.NewValue is bool isBadge && d is FrameworkElement parent)
                if (isBadge)
                    if (!parent.IsLoaded)
                        parent.Loaded += Parent_Loaded;
                        CreateBadge(parent);
                    parent.Loaded -= Parent_Loaded;
                    CreateBadge(parent, true);
        private static void Parent_Loaded(object sender, RoutedEventArgs e)
            if (sender is UIElement element)
                CreateBadge(element);
        private static void CreateBadge(UIElement uIElement, bool isRemove = false)
            var layer = AdornerLayer.GetAdornerLayer(uIElement);
            if (layer == null) return;
            if (isRemove && uIElement != null)
                var adorners = layer.GetAdorners(uIElement);
                if (adorners != null)
                    foreach (var item in adorners)
                        if (item is Badge container)
                            layer.Remove(container);
                return;
            var value = GetText(uIElement);
            var size = GetFontSize(uIElement);
            var badgeAdorner = new Badge(uIElement, value, size);
            layer.Add(badgeAdorner);
        public static bool GetIsShow(DependencyObject obj)
            return (bool) obj.GetValue(IsShowProperty);
        public static void SetIsShow(DependencyObject obj, bool value)
            obj.SetValue(IsShowProperty, value);
        protected override void OnRender(DrawingContext drawingContext)
            var adornedElement = AdornedElement as FrameworkElement;
            var margin = adornedElement.Margin;
            var desiredWidth = adornedElement.DesiredSize.Width - margin.Left - margin.Right;
            var brush = new SolidColorBrush((Color) Application.Current.TryFindResource("WD.DangerColor"));
            brush.Freeze();
            var radius = 5.0;
            var center = new Point(desiredWidth, 0);
            FormattedText formattedText = null;
            if (!string.IsNullOrEmpty(_text))
                formattedText = DrawingContextHelper.GetFormattedText(
                    _text,
                    Brushes.White,
                    FlowDirection.LeftToRight,
                    _size);
            var pen = new Pen(Brushes.White, .3);
            pen.Freeze();
            drawingContext.PushTransform(new MatrixTransform(Matrix.Identity));
            if (formattedText != null)
                var height = formattedText.Height;
                var width = formattedText.Width > 20 ? 20 : formattedText.Width;
                var isSingle = false;
                if (_text.Length == 1)
                    var max = formattedText.Width > formattedText.Height ? formattedText.Width : formattedText.Height;
                    height = max;
                    width = max;
                    isSingle = true;
                var startPoint = new Point(0, 0);
                var endPoint = new Point(0, 0);
                if (!isSingle)
                    startPoint = new Point(center.X - width / 1.4, center.Y - height / 1.8);
                    endPoint = new Point(center.X + width / 1.4 + 6, center.Y + height / 1.8);
                    startPoint = new Point(center.X - width / 2, center.Y - height / 2);
                    endPoint = new Point(center.X + width / 2, center.Y + height / 2);
                var rect = new Rect(startPoint, endPoint);
                drawingContext.DrawRoundedRectangle(brush, pen, rect, 8, 8);
                formattedText.MaxTextWidth = width + 10;
                var centerRect = new Point(rect.Left + rect.Width / 2, rect.Top + rect.Height / 2);
                var textPosition = new Point(centerRect.X - formattedText.Width / 2,
                    centerRect.Y - formattedText.Height / 2);
                drawingContext.DrawText(formattedText, textPosition);
                drawingContext.DrawEllipse(brush, pen, center, radius, radius);
            drawingContext.Pop();
            RenderOptions.SetEdgeMode(this, EdgeMode.Unspecified);

2）新建 BadgeExample.xaml 使用 Badge 控件代码如下:

<UserControl
    x:Class="WPFDevelopers.Samples.ExampleViews.BadgeExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:wd="https://github.com/WPFDevelopersOrg/WPFDevelopers"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <ToggleButton
                x:Name="MyBadgeToggleButton"
                Margin="10"
                HorizontalAlignment="Center"
                Content="显示Badge" />
            <StackPanel
                Grid.Row="1"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
                <Button
                    wd:Badge.IsShow="{Binding ElementName=MyBadgeToggleButton, Path=IsChecked}"
                    wd:Badge.Text="new"
                    Content="Default"
                    Style="{DynamicResource WD.PrimaryButton}" />
                <Button
                    Margin="40,0"
                    wd:Badge.FontSize="12"
                    wd:Badge.IsShow="{Binding ElementName=MyBadgeToggleButton, Path=IsChecked}"
                    wd:Badge.Text="3"
                    Content="Success"
                    Style="{DynamicResource WD.SuccessDefaultButton}" />
                <Button
                    wd:Badge.FontSize="12"
                    wd:Badge.IsShow="{Binding ElementName=MyBadgeToggleButton, Path=IsChecked}"
                    wd:Badge.Text="10+"
                    Content="Warning"
                    Style="{DynamicResource WD.WarningDefaultButton}" />
                <Button
                    Margin="40,0"
                    wd:Badge.IsShow="{Binding ElementName=MyBadgeToggleButton, Path=IsChecked}"
                    wd:Badge.Text="NEW"
                    Content="Danger"
                    Style="{DynamicResource WD.DangerDefaultButton}" />
                <Rectangle
                    Width="100"
                    Height="100"
                    wd:Badge.IsShow="{Binding ElementName=MyBadgeToggleButton, Path=IsChecked}"