WPF中带有圆形色彩背景的自定义文本控件CircleTextBlock

(一）说明

为了显示类似于以下这样的带有圆形色彩的文本，可以又很多办法，最简单的就是直接画个圈再写个文字。由于经常用到，每次都自己来做比较麻烦，所以自定义了一个控件叫做CircleTextBlock，该控件继承自UserControl，对外暴露了Size、Text、Fill三个关键的依赖项属性，它们的数据类型分别为double,string,SolidColorBrush。此外，文字的颜色依然由基类UserControl的依赖项属性Foreground控制。

使用方法如下：

<zctrls:CircleTextBlock Text="5" Size="80" Fill="Yellow" Foreground="Red"/>

说明：zctrls是自定义的命名控件，根据需要自己确当就可以了。

显示效果如下：

以下是代码：

（二）自定义元素的代码

cs文件：

public partial class CircleTextBlock : UserControl
{
public CircleTextBlock()
{
InitializeComponent();
}
static CircleTextBlock()
{
TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(CircleTextBlock));
FillProperty = DependencyProperty.Register("Fill", typeof(SolidColorBrush), typeof(CircleTextBlock),new PropertyMetadata(new SolidColorBrush(Colors.White)));
SizeProperty = DependencyProperty.Register("Size", typeof(double), typeof(CircleTextBlock),new FrameworkPropertyMetadata(new Double?(20.0),new PropertyChangedCallback(OnSizeChanged)));
TextSizeProperty = DependencyProperty.Register("TextSize", typeof(double), typeof(CircleTextBlock));
}
private static void OnSizeChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
CircleTextBlock ctb = (CircleTextBlock)sender;
double size = ctb.Size;
//以下是根据圆形直径估算的比较合适的文字大小。圆形直径在20以上时，感觉对单个数字的大小还是比较合适的
if (size > 20)
ctb.TextSize = size - 8;
else if (size > 10)
ctb.TextSize = size - 6;
else ctb.TextSize = 5;
}

/// <summary>
/// Size should be equal or greater to 20
/// </summary>
public double Size
{
get
{
return (double)GetValue(SizeProperty);
}
set
{
SetValue(SizeProperty, value);
}
}
private double TextSize
{
get
{
return (double)GetValue(TextSizeProperty);
}
set
{
SetValue(TextSizeProperty, value);
}
}
public SolidColorBrush Fill
{
get
{
return (SolidColorBrush)GetValue(FillProperty);
}
set
{
SetValue(FillProperty, value);
}
}
public string Text
{
get
{
return (string)GetValue(TextProperty);
}
set
{
SetValue(TextProperty, value);
}
}
public static DependencyProperty TextProperty;
public static DependencyProperty FillProperty;
public static DependencyProperty SizeProperty;
public static DependencyProperty TextSizeProperty;
}

xaml文件：