wpf 如何7步写一个badge控件

技术分享 1年前 (2024-08-13) 0 999+

首先看一下效果:

任意控件可以附加一个文字在控件的右上角，并带有红色背景

第一步，新建一个空的wpf项目:

第二步，创建一个类，取名为badge:

第三步，将badge的父类设置成 System.Windows.Documents.Adorner

    public class 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的附加属性:

        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);
　　　　　　}

第5步，实现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));                 }             };         }     } }

第6步，重写一下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.

第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>