之前做项目时，为了实现类似微信消息数目的效果
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() != )
{
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 ();
_br.Background = Brushes.Red;
TextBlock _txt = new TextBlock();
_txt.Text = "";
_txt.Width=_txt.Height = ;
_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, , );
return base.ArrangeOverride(finalSize);
}
protected override int VisualChildrenCount
{
get
{
return _visuals.Count;
}
}
}
VIew中给需要添加Adorner效果的控件，添加附加属性
image.png
CheckBox绑定了Button的附加属性，我们可以通过IsChecked，控制Adorner层的显示，隐藏。
image.png