如何在Xamarin.Forms中让Rectangle适配Label并增加额外空间？

我有3个文本内容会动态变化的Label控件，希望对应的Rectangle控件能适配文本尺寸（注意：必须使用Rectangle，不可用BoxView替代）。目前已实现Rectangle完美贴合文本，但无法添加额外空间，以下是其中一个标签的XAML代码：

<Rectangle Fill="red"
           Grid.Column="0"
           VerticalOptions="Center"
           HorizontalOptions="Center"
           HeightRequest="{Binding Height, Source={x:Reference TAG1}}" 
           WidthRequest="{Binding Width, Source={x:Reference TAG1}}"/>

<Label Text="{Binding tags[0]}"
       Grid.Column="0"
       TextColor="White"
       FontFamily="Kanit"
       FontSize="12"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       x:Name="TAG1"/>

当前状态：Rectangle完全贴合Label文本，无法留出额外空白
目标：让Rectangle在Label文本的基础上，四周留出指定的额外空间

方法1：自定义值转换器（灵活控制边距） #

这种方式支持给上下、左右设置不同的额外空间，适配多数场景。

1. 编写值转换器类 #

创建一个实现IValueConverter的类，用于给Label的尺寸加上指定的额外空间：

using System;
using Xamarin.Forms; // 使用.NET MAUI则替换为 Microsoft.Maui.Controls

namespace YourAppNamespace
{
    public class AddPaddingConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is double originalSize && double.TryParse(parameter?.ToString(), out double padding))
            {
                return originalSize + padding;
            }
            return value;
        }

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

2. 在XAML中注册转换器 #

在页面的资源字典中添加转换器引用：

<ContentPage.Resources>
    <!-- 替换local为你的项目命名空间对应的XML命名空间 -->
    <local:AddPaddingConverter x:Key="AddPaddingConverter" />
</ContentPage.Resources>

3. 修改Rectangle绑定 #

通过转换器给Height和Width添加额外空间，比如上下加10单位、左右加20单位：

<Rectangle Fill="red"
           Grid.Column="0"
           VerticalOptions="Center"
           HorizontalOptions="Center"
           HeightRequest="{Binding Height, Source={x:Reference TAG1}, Converter={StaticResource AddPaddingConverter}, ConverterParameter='10'}" 
           WidthRequest="{Binding Width, Source={x:Reference TAG1}, Converter={StaticResource AddPaddingConverter}, ConverterParameter='20'}"/>

<Label Text="{Binding tags[0]}"
       Grid.Column="0"
       TextColor="White"
       FontFamily="Kanit"
       FontSize="12"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       x:Name="TAG1"/>

方法2：直接绑定计算（适合同称边距） #

如果需要上下左右对称的额外空间，可以直接用绑定的StringFormat做简单运算（需Xamarin.Forms 4.7+或.NET MAUI支持）：

<Rectangle Fill="red"
           Grid.Column="0"
           VerticalOptions="Center"
           HorizontalOptions="Center"
           HeightRequest="{Binding Height, Source={x:Reference TAG1}, StringFormat='{0}+10'}" 
           WidthRequest="{Binding Width, Source={x:Reference TAG1}, StringFormat='{0}+20'}"/>

<Label Text="{Binding tags[0]}"
       Grid.Column="0"
       TextColor="White"
       FontFamily="Kanit"
       FontSize="12"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       x:Name="TAG1"/>

注意事项 #

• 确保Label的HorizontalOptions和VerticalOptions不要设为Fill，否则Label会拉伸填充父容器，导致Rectangle尺寸异常。
• 若Label存在多行文本，上述方法依然有效，因为绑定的是Label实际渲染后的真实尺寸。

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