WPF|WPF Adorner



之前做项目时,为了实现类似微信消息数目的效果 WPF|WPF Adorner
文章图片
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效果的控件,添加附加属性

WPF|WPF Adorner
文章图片
image.png 【WPF|WPF Adorner】CheckBox绑定了Button的附加属性,我们可以通过IsChecked,控制Adorner层的显示,隐藏。

WPF|WPF Adorner
文章图片
image.png

    推荐阅读