wpf how to write a badge control in 7 steps

First look at the effect.

Arbitrary ControlsIt is possible to attach a text in the upper right corner of the control with thered (color)contexts

Step 1: Create a new empty wpf project:.

In the second step, create a class named badge:.

In the third step, set the parent class of badge to the

    public class Badge : Adorner
    {
        public Badge(UIElement adornedElement) : base(adornedElement)
        {

        }
    }

The adornedElement inside represents the object attached after the badge.

For a description of the class Adorner, Microsoft gives the appropriate tutorials/zh-cn/dotnet/desktop/wpf/controls/adorners-overview?view=netframeworkdesktop-4.8

You can also see the description of the Adorner class at F11.

Step 4: Add an additional attribute of Content to the badge:.

        public static readonly DependencyProperty ContentProperty;

        static Badge()
        {
            ContentProperty = ("Content", typeof(string), typeof(Badge),
                new FrameworkPropertyMetadata(string.Empty, new PropertyChangedCallback(ContentChangedCallBack)));
        }

public static string GetContent(DependencyObject obj)
{
return (string)(ContentProperty);
}

public static void SetContent(DependencyObject obj, string value)
{
(ContentProperty, value);
}

Step 5: Implement the callback method for content.

private static void ContentChangedCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var target = d as FrameworkElement;
    if (target != null)
    {
        if ()
        {
            var layer = (target);
            if (layer != null)
            {
                var Adorners = (target);
                if (Adorners != null)
                {
                    foreach (var adorner in Adorners)
                    {
                        if (adorner is Badge)
                        {
                            (adorner);
                        }
                    }
                }
                (new Badge(target));
            }
        }
        else
        {
             += (sender, ae) =>
            {
                var layer = (target);
                if (layer != null)
                {
                    var Adorners = (target);
                    if (Adorners != null)
                    {
                        foreach (var adorner in Adorners)
                        {
                            if (adorner is Badge)
                            {
                                (adorner);
                            }
                        }
                    }
                    (new Badge(target));
                }
            };
        }
    }
}

Step 6: Rewrite the OnRender method.

        protected override void OnRender(DrawingContext drawingContext)
        {
            var element = this.AdornedElement as FrameworkElement;
            Rect adornedElementRect = new Rect();
            var point = ;
             =  -  - ;

            SolidColorBrush renderBrush = new SolidColorBrush();
            Pen renderPen = new Pen(new SolidColorBrush(), 0.5);
            double renderRadius = 5;

            var content = this.().ToString();
            FormattedText formattedText = new FormattedText(content, ("zh-cn"), , new Typeface("Verdana"), 10, );
            var textWidth = ;
            var textHeight = ;
            var rectangleSizeWidth = textWidth < 15 ? 15 : textWidth;
            var rectangleSizeHeight = textHeight < 15 ? 15 : textHeight;
            var size = new Size(rectangleSizeWidth, rectangleSizeHeight);
            Rect rect = new Rect(new Point( - rectangleSizeWidth / 2,  - rectangleSizeHeight / 2), size);

            (renderBrush, renderPen, rect, renderRadius, renderRadius);
            (formattedText, new Point( - textWidth / 2,  - textHeight / 2));
        }

This code draws a rectangle with rounded corners in the upper right corner of the target control, with a red background color, and then draws a text to display the content.

Step 7: Apply to the project.

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <cc:CornerButton ButtonType="OutLine" Width="200" Height="30"
                         cc:="{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 is the namespace where the badge is located, and then you will find that when you change the value of the textbox, the badge will change with the value of the textbox.

Project github address:bearhanQ/WPFFramework: Share some experience ()

QQ technical exchange group: 332035933;