&

WPF 如何7步寫一個badge控件

當(dāng)前位置：點晴教程→知識管理交流 →『技術(shù)文檔交流』

freeflydom

2024年11月7日 9:51 本文熱度 605

首先看一下效果:

任意控件可以附加一個文字在控件的右上角，并帶有紅色背景

第一步，新建一個空的wpf項目:

第二步，創(chuàng)建一個類，取名為badge:

第三步，將badge的父類設(shè)置成 System.Windows.Documents.Adorner

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

里面的adornedElement表示badge后面附加的對象

關(guān)于Adorner這個類的說明，微軟給了相應(yīng)的教程 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步，實現(xiàn)content的回調(diào)方法:

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

這段代碼就是在目標(biāo)控件的右上角繪制一個帶圓角的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所在的命名空間，然后你就會發(fā)現(xiàn)，你改變textbox的值的時候，badge會跟著textbox的值發(fā)生變化哦.

?轉(zhuǎn)自https://www.cnblogs.com/lvpp13/p/18354811

該文章在 2024/11/7 9:53:34 編輯過

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務(wù)都免費，不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。