首先看一下效果:
任意控件可以附加一个文字在控件的右上角，并带有红色背景
第一步，新建一个空的wpf项目:
第二步，创建一个类，取名为badge:
第三步，将badge的父类设置成 System.Windows.Documents.Adorner
publicclass Badge : Adorner { public Badge(UIElement adornedElement) : base(adornedElement) { } }
里面的adornedElement表示badge后面附加的对象
关于Adorner这个类的说明，微软给了相应的教程 https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/adorners-overview?view=netframeworkdesktop-4.8
也可以F11查看Adorner类的说明.
第4步，给badge添加一个Content的附加属性:
publicstaticreadonly DependencyProperty ContentProperty; static Badge() { ContentProperty = DependencyProperty.RegisterAttached("Content",typeof(string),typeof(Badge),newFrameworkPropertyMetadata(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);
}
第5步，实现content的回调方法:
privatestaticvoid ContentChangedCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e){ var target = d asFrameworkElement;if (target != null) { if (target.IsLoaded) { var layer =AdornerLayer.GetAdornerLayer(target);if (layer != null) { var Adorners =layer.GetAdorners(target);if (Adorners != null) { foreach(varadornerin Adorners) { if(adorneris 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(varadornerin Adorners) { if(adorneris Badge) { layer.Remove(adorner); } } } layer.Add(new Badge(target)); } }; } }}
第6步，重写一下OnRender方法:
protectedoverridevoid OnRender(DrawingContext drawingContext) { var element = this.AdornedElementas FrameworkElement; Rect adornedElementRect =newRect(element.DesiredSize);var point = adornedElementRect.TopRight; point.X = adornedElementRect.Right - element.Margin.Left - element.Margin.Right; SolidColorBrush renderBrush =new SolidColorBrush(Colors.Red); Pen renderPen =newPen(newSolidColorBrush(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, newTypeface("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 =newRect(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.
第7步，运用到项目中:
<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地址：bearhanQ/WPFFramework: Share some experience (github.com)
QQ技术交流群：332035933；