互赞 发表于 2024-8-12 15:17:44

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)));
      }<br>       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)
                  {
    <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>if (adorner is Badge)
    <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>{
    <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>    layer.Remove(adorner);
    <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>}
                  }
                }
                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)
                  {
    <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>foreach (var adorner in Adorners)
    <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>{
    <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>    if (adorner is Badge)
    <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>    {
    <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>      layer.Remove(adorner);
    <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>    }
    <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>}
                  }
                  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;
 

来源:https://www.cnblogs.com/lvpp13/p/18354811
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: wpf 如何7步写一个badge控件