WPF 如何7步寫一個(gè)badge控件
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
首先看一下效果: 任意控件可以附加一個(gè)文字在控件的右上角,并帶有紅色背景 第一步,新建一個(gè)空的wpf項(xiàng)目: 第二步,創(chuàng)建一個(gè)類,取名為badge: 第三步,將badge的父類設(shè)置成 System.Windows.Documents.Adorner public class Badge : Adorner { public Badge(UIElement adornedElement) : base(adornedElement) { } } 里面的adornedElement表示badge后面附加的對象 關(guān)于Adorner這個(gè)類的說明,微軟給了相應(yīng)的教程 https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/adorners-overview?view=netframeworkdesktop-4.8 也可以F11查看Adorner類的說明.
第4步,給badge添加一個(gè)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) public static void SetContent(DependencyObject obj, string value) 第5步,實(shí)現(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)控件的右上角繪制一個(gè)帶圓角的rectangle,背景色為紅色,再繪制一個(gè)文本用來顯示content. 第7步,運(yùn)用到項(xiàng)目中: <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所在的命名空間,然后你就會(huì)發(fā)現(xiàn),你改變textbox的值的時(shí)候,badge會(huì)跟著textbox的值發(fā)生變化哦. ?轉(zhuǎn)自https://www.cnblogs.com/lvpp13/p/18354811 該文章在 2024/11/7 9:53:34 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |