MAUI中Windows平台Border设CornerRadius致Label文本被裁剪

问题重现 #

在Windows平台运行MAUI程序时，给Border控件通过RoundRectangle设置CornerRadius="20"后，内部的Label文本出现了被圆角边缘裁剪的情况，Android平台运行则正常。相关代码如下：

<Grid BindingContext="{TemplateBinding Content}">

    <Border x:Name="foodTypeContainer"
            MinimumWidthRequest="80"
            MaximumHeightRequest="140"
            Padding="8,0,8,0"
            Stroke="Transparent"
            BindingContext="{Binding .}">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="20" />
        </Border.StrokeShape>

        <Label x:Name="foodTypeTextLabel"
               HorizontalOptions="Center"
               VerticalOptions="Center">
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="{Binding Name}" FontFamily="RubikLight"/>
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </Border>
</Grid>

裁剪效果：

解决方案 #

这是因为Windows平台的Border控件默认会根据StrokeShape的圆角对内部内容进行裁剪，Android平台的裁剪逻辑不同所以没有问题。你可以试试以下几种解决办法：

• 给Label添加Margin避开圆角
  给Label设置合适的Margin值，让文本远离Border的圆角区域，比如：

  <Label x:Name="foodTypeTextLabel"
         HorizontalOptions="Center"
         VerticalOptions="Center"
         Margin="4"> <!-- 根据圆角大小调整Margin数值 -->
      <Label.FormattedText>
          <FormattedString>
              <Span Text="{Binding Name}" FontFamily="RubikLight"/>
          </FormattedString>
      </Label.FormattedText>
  </Label>
  

• 关闭Border的内容裁剪
  给Border添加ClipToBounds="False"属性，直接禁用基于StrokeShape的裁剪行为：

  <Border x:Name="foodTypeContainer"
          MinimumWidthRequest="80"
          MaximumHeightRequest="140"
          Padding="8,0,8,0"
          Stroke="Transparent"
          BindingContext="{Binding .}"
          ClipToBounds="False">
      <Border.StrokeShape>
          <RoundRectangle CornerRadius="20" />
      </Border.StrokeShape>
      <!-- Label代码保持不变 -->
  </Border>
  

• 增大Border的Padding值
  调整Border的Padding，给内部内容留出足够空间避开圆角边缘：

  <Border x:Name="foodTypeContainer"
          MinimumWidthRequest="80"
          MaximumHeightRequest="140"
          Padding="12,4,12,4" <!-- 相比原Padding增大了上下左右的空间 -->
          Stroke="Transparent"
          BindingContext="{Binding .}">
      <Border.StrokeShape>
          <RoundRectangle CornerRadius="20" />
      </Border.StrokeShape>
      <!-- Label代码保持不变 -->
  </Border>
  

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