之前做项目时，为了实现类似微信消息数目的效果
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