MAUI中如何使用Border的StrokeShape属性绘制完美圆形？

你的尝试代码：

<Border Stroke="#649B33"
        StrokeThickness="1"
        StrokeShape="Ellipse 30, 30"
        Padding="8"
        Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
        HorizontalOptions="Center">
        <Label Text="1" FontAttributes="Bold" />
</Border>

问题出在StrokeShape="Ellipse 30, 30"的写法：手动指定椭圆固定尺寸会导致它和Border自身的宽高不匹配，无法形成完美圆形。

正确实现方式 #

要绘制完美圆形，核心是保证Border的宽高相等，同时让StrokeShape自适应Border的尺寸：

方法1：固定宽高实现

<Border Stroke="#649B33"
        StrokeThickness="1"
        StrokeShape="Ellipse"
        WidthRequest="46"
        HeightRequest="46"
        Padding="8"
        Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
        HorizontalOptions="Center">
    <Label Text="1" FontAttributes="Bold" 
           HorizontalTextAlignment="Center" 
           VerticalTextAlignment="Center"/>
</Border>

• 给Border设置相等的宽高（46 = 内部内容所需空间 + 左右/上下Padding）
• StrokeShape="Ellipse"不带参数时，会自动填充整个Border区域，宽高相等时自然形成圆形
• 给Label添加居中对齐，确保文字在圆中心

方法2：自适应内容并保持圆形

如果不想固定宽高，希望根据内容自动调整但保持圆形，可添加Aspect="AspectFill"：

<Border Stroke="#649B33"
        StrokeThickness="1"
        StrokeShape="Ellipse"
        Padding="8"
        Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
        HorizontalOptions="Center"
        Aspect="AspectFill">
    <Label Text="1" FontAttributes="Bold" 
           HorizontalTextAlignment="Center" 
           VerticalTextAlignment="Center"/>
</Border>

• Aspect="AspectFill"会强制Border的宽高保持一致，以内容所需的最大维度为基准，确保StrokeShape始终是圆形

补充说明 #

StrokeShape的Ellipse参数若带数值，是指定椭圆的相对比例或固定尺寸，一般无需手动设置，让它自适应Border的尺寸即可。只要Border宽高相等，配合无参数的Ellipse就能得到完美圆形。

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