WPF Adorner

Posted 2020-11-21 czly

之前做项目时，为了实现类似微信消息数目的效果

 

image.png

 

，我之前是修改的ControlTemplate。类似于将一个带数字的控件，放在另一个控件的右上角，来实现的这个效果。
原来WPF有个Adorner，也可以实现这样的效果。
WPF中很多控件，都带Adorner层。这相当于一个控件的装饰层。我们在这里面可以做出很多蛮好的效果。比如错误提示等。
我们要实现上图的那种效果，我们可以做一个附加属性。

 public static bool GetShowAdorner(DependencyObject obj)
    {
        return (bool)obj.GetValue(ShowAdornerProperty);
    }
    public static void SetShowAdorner(DependencyObject obj, bool value)
    {
        obj.SetValue(ShowAdornerProperty, value);
    }        
    public static readonly DependencyProperty ShowAdornerProperty =
        DependencyProperty.RegisterAttached("ShowAdorner", typeof(bool), typeof(MainWindow), new PropertyMetadata(false, Method));

    private static void Method(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var ele = d as Visual;

        var adolay = AdornerLayer.GetAdornerLayer(ele);

        if (adolay != null)
        {
            var ados = adolay.GetAdorners(ele as UIElement);
            if (ados == null)
            {
                adolay.Add(new KDAdorner(ele as UIElement));
            }
            ados = adolay.GetAdorners(ele as UIElement);
            if (ados != null && ados.Count() != 0)
            {
                var ado = ados.FirstOrDefault() as KDAdorner;

                if ((bool)e.NewValue)
                {
                    ado.ShowImage();

                }
                else
                {
                    ado.HideImage();
                }
            }

        }

 

继承Adorner，实现我们想要的Adorner效果

 public class KDAdorner : Adorner
    {
        private VisualCollection _visuals;
        private Canvas _grid;
        private Border _br;
        public KDAdorner(UIElement ele)
            : base(ele)
        {
            _visuals = new VisualCollection(this);
            _br = new Border ();
            _br.CornerRadius= new CornerRadius (50);
            _br.Background = Brushes.Red;
            TextBlock _txt = new TextBlock();
            _txt.Text = "4";
            _txt.Width=_txt.Height = 20;
            _txt.Foreground = Brushes.White;
            _txt.TextAlignment = TextAlignment.Center;
            _br.Child = _txt;
            _grid = new Canvas();
            _grid.Children.Add(_br);
            _visuals.Add(_grid);
        }
        protected override Visual GetVisualChild(int index)
        {
            return _visuals[index];
        }
        public void ShowImage()
        {
            _grid.Visibility = System.Windows.Visibility.Visible;
        }
        public void HideImage()
        {
            _grid.Visibility = System.Windows.Visibility.Hidden;
        }
        protected override Size ArrangeOverride(Size finalSize)
        {
            _grid.Arrange(new Rect(finalSize));
            _br.Margin = new Thickness(finalSize.Width - 12.5, -12.5, 0, 0);
            return base.ArrangeOverride(finalSize);
        }
        protected override int VisualChildrenCount
        {
            get
            {
                return _visuals.Count;
            }
        }
    }

 

VIew中给需要添加Adorner效果的控件，添加附加属性

 

 

image.png

CheckBox绑定了Button的附加属性，我们可以通过IsChecked，控制Adorner层的显示，隐藏。

 

 

image.png