前言
越来越多的开发者选择使用WPF来构建功能丰富、外观精美的桌面应用。而创建一个美观且实用的Badge控件，不仅可以提升用户体验，还能为应用程序增添一抹亮色。
正文
首先看一下效果:
任意控件可以附加一个文字在控件的右上角，并带有红色背景
第一步，新建一个空的WPF项目；
第二步，创建一个类，取名为badge；
第三步，将badge的父类设置成 System.Windows.Documents.Adorner
public class Badge : Adorner
{
public Badge(UIElement adornedElement) : base(adornedElement)
{
}
}
里面的adornedElement表示badge后面附加的对象
关于Adorner这个类的说明，微软给了相应的教程 learn.microsoft.com/zh-cn/dotne…
也可以F11查看Adorner类的说明.
第四步，给badge添加一个Content的附加属性:
public static readonly DependencyProperty ContentProperty;
static Badge()
{
ContentProperty = DependencyProperty.RegisterAttached("Content", typeof(string), typeof(Badge),
new FrameworkPropertyMetadata(string.Empty, new PropertyChangedCallback(ContentChangedCallBack)));
}
public static string GetContent(DependencyObject obj)
{
return (string)obj.GetValue(ContentProperty);
}
public static void SetContent(DependencyObject obj, string value)
{
obj.SetValue(ContentProperty, value);
}
第五步，实现content的回调方法:
private static void ContentChangedCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var target = d as FrameworkElement;
if (target != null)
{
if (target.IsLoaded)
{
var layer = AdornerLayer.GetAdornerLayer(target);
if (layer != null)
{
var Adorners = layer.GetAdorners(target);
if (Adorners != null)
{
foreach (var adorner in Adorners)
{
if (adorner is Badge)
{
layer.Remove(adorner);
}
}
}
layer.Add(new Badge(target));
}
}
else
{
target.Loaded += (sender, ae) =>
{
var layer = AdornerLayer.GetAdornerLayer(target);
if (layer != null)
{
var Adorners = layer.GetAdorners(target);
if (Adorners != null)
{
foreach (var adorner in Adorners)
{
if (adorner is Badge)
{
layer.Remove(adorner);
}
}
}
layer.Add(new Badge(target));
}
};
}
}
}
第六步，重写一下OnRender方法:
protected override void OnRender(DrawingContext drawingContext)
{
var element = this.AdornedElement as FrameworkElement;
Rect adornedElementRect = new Rect(element.DesiredSize);
var point = adornedElementRect.TopRight;
point.X = adornedElementRect.Right - element.Margin.Left - element.Margin.Right;
SolidColorBrush renderBrush = new SolidColorBrush(Colors.Red);
Pen renderPen = new Pen(new SolidColorBrush(Colors.Red), 0.5);
double renderRadius = 5;
var content = this.AdornedElement.GetValue(Badge.ContentProperty).ToString();
FormattedText formattedText = new FormattedText(content, CultureInfo.GetCultureInfo("zh-cn"), FlowDirection.LeftToRight, new Typeface("Verdana"), 10, Brushes.White);
var textWidth = formattedText.Width;
var textHeight = formattedText.Height;
var rectangleSizeWidth = textWidth < 15 ? 15 : textWidth;
var rectangleSizeHeight = textHeight < 15 ? 15 : textHeight;
var size = new Size(rectangleSizeWidth, rectangleSizeHeight);
Rect rect = new Rect(new Point(point.X - rectangleSizeWidth / 2, point.Y - rectangleSizeHeight / 2), size);
drawingContext.DrawRoundedRectangle(renderBrush, renderPen, rect, renderRadius, renderRadius);
drawingContext.DrawText(formattedText, new Point(point.X - textWidth / 2, point.Y - textHeight / 2));
}
这段代码就是在目标控件的右上角绘制一个带圆角的rectangle，背景色为红色，再绘制一个文本用来显示content.
第七步，运用到项目中:
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<cc:CornerButton ButtonType="OutLine" Width="200" Height="30"
cc:Badge.Content="{Binding ElementName=textbox1, Path=Text, UpdateSourceTrigger=PropertyChanged}" Margin="10"/>
<cc:CornerTextBox x:Name="textbox1" Width="200" Height="30" Text="12"
VerticalContentAlignment="Center" WaterText="BadgeContent"/>
</StackPanel>
cc是表示badge所在的命名空间，然后你就会发现，你改变textbox的值的时候，badge会跟着textbox的值发生变化哦.
项目地址
GitHub：github.com/bearhanQ/WP…
最后
如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。
也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！
优秀是一种习惯，欢迎大家留言学习！
作者：BearHan
出处：cnblogs.com/lvpp13/p/18354811
声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！
