MAUI技术问询：如何通过XAML样式创建圆形按钮

要实现仅通过设置WidthRequest就能自动生成宽高相等、圆角为宽度一半的圆形按钮，可以通过数据绑定+值转换器的方式在样式中完成，无需自定义控件。

核心思路 #

1. 用RelativeSource Self绑定按钮自身的WidthRequest到HeightRequest，保证宽高一致
2. 同样通过绑定，结合值转换器将WidthRequest转为一半数值，赋值给CornerRadius实现圆形

步骤1：创建值转换器 #

首先实现一个将数值减半的转换器，用于计算圆角半径：

public class HalfValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is double width ? width / 2 : 0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

步骤2：定义圆形按钮样式 #

在页面或应用的资源字典中声明样式，结合绑定和转换器实现自动适配：

<ContentPage.Resources>
    <local:HalfValueConverter x:Key="HalfValueConverter" />

    <Style x:Key="CircleButton" TargetType="Button">
        <!-- 绑定HeightRequest到自身WidthRequest，确保宽高相等 -->
        <Setter Property="HeightRequest" 
                Value="{Binding Source={RelativeSource Self}, Path=WidthRequest}" />
        <!-- 绑定CornerRadius为WidthRequest的一半，实现圆形 -->
        <Setter Property="CornerRadius" 
                Value="{Binding Source={RelativeSource Self}, Path=WidthRequest, Converter={StaticResource HalfValueConverter}}" />
        <!-- 可选：设置默认WidthRequest，避免未指定时按钮过小 -->
        <Setter Property="WidthRequest" Value="60" />
        <!-- 可自定义基础样式（背景、文字颜色等） -->
        <Setter Property="Background" Value="#2196F3" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="FontSize" Value="16" />
        <Setter Property="HorizontalOptions" Value="Center" />
        <Setter Property="VerticalOptions" Value="Center" />
    </Style>
</ContentPage.Resources>

步骤3：使用样式 #

直接设置WidthRequest即可生成对应大小的圆形按钮：

<Button WidthRequest="120" Style="{StaticResource CircleButton}" Text="圆形按钮" />
<Button WidthRequest="80" Style="{StaticResource CircleButton}" Text="小按钮" />

为什么之前的自引用失效？ #

你之前尝试的样式自引用失败，是因为默认绑定的是控件的DataContext而非控件本身。通过Source={RelativeSource Self}明确指定绑定源为当前按钮控件，才能正确获取到设置的WidthRequest值。

内容的提问来源于stack exchange，提问作者Moniker