(一)说明
为了显示类似于以下这样的带有圆形色彩的文本,可以又很多办法,最简单的就是直接画个圈再写个文字。由于经常用到,每次都自己来做比较麻烦,所以自定义了一个控件叫做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文件:
<UserControl x:Class="ZCtrls.CircleTextBlock"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ZCtrls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Width="{Binding Path=Size,RelativeSource={RelativeSource Self}}"
Height="{Binding Path=Size,RelativeSource={RelativeSource Self}}"
>
<Grid >
<Ellipse Fill="{Binding Path=Fill,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}">
</Ellipse>
<Label Margin="0" Padding="0" VerticalAlignment="Center" HorizontalAlignment="Center"
FontSize="{Binding Path=TextSize,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}"
Content="{Binding Path=Text,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}"
Foreground="{Binding Path=Foreground,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}"
/>
</Grid>
</UserControl>