设置CornerRadius的Frame未呈现圆角，如何实现Label外围圆形？

看起来你遇到了Frame圆角不生效的问题，我帮你分析下原因并给出修复方案：

核心问题分析 #

你的代码里有两个关键问题导致圆角无法正常渲染：

1. 圆角半径超出控件尺寸范围：你设置的CornerRadius="30"远大于Frame的HeightRequest和WidthRequest（都是20）。圆角半径的合理最大值应该是控件短边的一半（也就是10，20/2=10），超过这个值的话，多数平台的渲染引擎会直接忽略该设置，导致圆角不显示。
2. 标签语法错误：你的<Label Text="..."</Label>没有正确闭合，语法错误会干扰控件的正常渲染。

修正后的完整代码 #

<StackLayout Grid.Row="0" BackgroundColor="White" Padding="0,40,0,0">
    <Label Text="Your total score is" 
           FontSize="30" 
           HorizontalTextAlignment="Center" 
           Style="{DynamicResource FontBold-Bold}"/>
    <Frame BackgroundColor="White" 
           CornerRadius="10"  <!-- 修改为控件尺寸的一半 -->
           OutlineColor="#03A9F4" 
           HeightRequest="20" 
           WidthRequest="20" 
           HorizontalOptions="CenterAndExpand" 
           VerticalOptions="CenterAndExpand" 
           Margin="0" 
           Padding="0">
        <Label Text="..." /> <!-- 修正标签闭合语法 -->
    </Frame>
</StackLayout>

额外优化建议（打造完美圆形） #

如果你的目标是创建一个标准圆形Frame，还可以做这些调整：

• 确保HeightRequest和WidthRequest完全相等，保证是正圆形
• 可以通过绑定让圆角半径自动适配控件尺寸，避免硬编码：

  <Frame BackgroundColor="White" 
         OutlineColor="#03A9F4" 
         HeightRequest="20" 
         WidthRequest="20" 
         HorizontalOptions="CenterAndExpand" 
         VerticalOptions="CenterAndExpand" 
         Margin="0" 
         Padding="0">
      <Frame.CornerRadius>
          <OnPlatform x:TypeArguments="x:Double">
              <On Platform="iOS, Android" Value="10" />
              <!-- 进阶方案：用值转换器绑定到宽度的一半，适配动态尺寸 -->
              <!-- <On Platform="iOS, Android" Value="{Binding Source={RelativeSource Self}, Path=WidthRequest, Converter={StaticResource HalfValueConverter}}" /> -->
          </OnPlatform>
      </Frame.CornerRadius>
      <Label Text="..." />
  </Frame>
  

• 检查布局属性是否影响Frame实际尺寸：比如HorizontalOptions或VerticalOptions的设置可能让Frame实际大小和你设置的Height/WidthRequest不一致，这也会导致圆角显示异常。

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