首页 > 极客资料 博客日记

wpf 如何7步写一个badge控件

2024-08-12 14:00:04极客资料围观25次

本篇文章分享wpf 如何7步写一个badge控件，对你有帮助的话记得收藏一下，看极客之家收获更多编程知识

首先看一下效果:

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

第一步，新建一个空的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>




cc是表示badge所在的命名空间，然后你就会发现，你改变textbox的值的时候，badge会跟着textbox的值发生变化哦.


 


项目github地址：bearhanQ/WPFFramework: Share some experience (github.com)


QQ技术交流群：332035933；


 



版权声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！




标签：

        

      
上一篇：为了给Javaer落地DDD，我们不得不写开源组件
下一篇：2024 年了，IT 运维监控系统都有哪些推荐？

        

         
      

    

        

      
相关文章

      
    
									

      

    
 


    

  
  

  

      
最新发布

      

    

    

      
点击排行


    

    

      
本站推荐


      
    

             


    

    

      
     

    

    

      
标签云