效果图:

代码:
/// <summary> /// 头像按钮 /// </summary> public class AvaButton : ButtonBase { public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(AvaButton), new PropertyMetadata(null)); public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(AvaButton), new PropertyMetadata(null)); /// <summary> /// 圆角半径 /// </summary> public CornerRadius CornerRadius { get { return (CornerRadius)GetValue(CornerRadiusProperty); } set { SetValue(CornerRadiusProperty, value); } } /// <summary> /// 图片路径 /// </summary> public ImageSource ImageSource { get { return (ImageSource)GetValue(ImageSourceProperty); } set { SetValue(ImageSourceProperty, value); } } }
MainWindow.xaml
<Window.Resources>
<Style x:Key="AvaButtonStyle1" TargetType="{x:Type controls:AvaButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:AvaButton}">
<Border CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Border.Background>
<ImageBrush ImageSource="{Binding Path=ImageSource, RelativeSource={RelativeSource Mode=TemplatedParent} }" />
</Border.Background>
<Border Background="#DE6738" Width="10" Height="10" CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Right">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<controls:AvaButton Style="{DynamicResource AvaButtonStyle1}" Content="8" FontSize="8" Foreground="White" Margin="20 30 20 10" Width="50" Height="50" BorderThickness="2" BorderBrush="White" CornerRadius="25" ImageSource="pack://application:,,,/Assets/Images/ava.png" />