一种自定义圆角按钮

发布时间 2023-10-10 14:10:12作者: 学而时习

效果图:

 

代码:

/// <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" />