.NET MAUI如何实现百分比内边距/外边距？

.NET MAUI 本身没有直接提供像 CSS 那样的百分比 Padding/Margin 语法，但可以通过以下几种实用方式实现类似效果：

1. 绑定转换器（推荐） #

写一个自定义的 IValueConverter，把百分比数值转换成对应容器尺寸的实际厚度值，配合绑定使用，适配动态布局场景。

转换器代码： #

using System.Globalization;
using Microsoft.Maui.Controls;

public class PercentageToThicknessConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double parentSize && parameter is string percentageStr)
        {
            var parts = percentageStr.Split(',');
            return parts.Length switch
            {
                1 => ParseSinglePercentage(parentSize, percentageStr),
                2 => ParseVerticalHorizontalPercentage(parentSize, parts),
                4 => ParseFourSidesPercentage(parentSize, parts),
                _ => new Thickness(0)
            };
        }
        return new Thickness(0);
    }

    private Thickness ParseSinglePercentage(double parentSize, string percent)
    {
        return double.TryParse(percent, out var p) ? new Thickness(parentSize * p / 100) : new Thickness(0);
    }

    private Thickness ParseVerticalHorizontalPercentage(double parentSize, string[] parts)
    {
        if (double.TryParse(parts[0], out var topBottom) && double.TryParse(parts[1], out var leftRight))
        {
            return new Thickness(parentSize * leftRight / 100, parentSize * topBottom / 100, parentSize * leftRight / 100, parentSize * topBottom / 100);
        }
        return new Thickness(0);
    }

    private Thickness ParseFourSidesPercentage(double parentSize, string[] parts)
    {
        if (double.TryParse(parts[0], out var left) && double.TryParse(parts[1], out var top) &&
            double.TryParse(parts[2], out var right) && double.TryParse(parts[3], out var bottom))
        {
            return new Thickness(
                parentSize * left / 100,
                parentSize * top / 100,
                parentSize * right / 100,
                parentSize * bottom / 100
            );
        }
        return new Thickness(0);
    }

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

XAML 用法： #

先在页面资源中声明转换器：

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

绑定父容器实际宽度，设置上下0%、左右5%的 Padding：

<StackLayout x:Name="ParentContainer" BackgroundColor="LightGray">
    <Label Text="测试百分比Padding" 
           Padding="{Binding Source={x:Reference ParentContainer}, Path=ActualWidth, Converter={StaticResource PercentToThickness}, ConverterParameter='0,0,0,5'}"
           BackgroundColor="White" />
</StackLayout>

2. 自定义控件封装 #

如果需要频繁使用百分比边距，封装一个自带百分比属性的控件，自动监听尺寸变化更新边距：

public class PercentageContentView : ContentView
{
    public static readonly BindableProperty PaddingPercentProperty = BindableProperty.Create(
        nameof(PaddingPercent), typeof(Thickness), typeof(PercentageContentView), new Thickness(0),
        propertyChanged: (bindable, _, __) => ((PercentageContentView)bindable).UpdatePadding());

    public Thickness PaddingPercent
    {
        get => (Thickness)GetValue(PaddingPercentProperty);
        set => SetValue(PaddingPercentProperty, value);
    }

    protected override void OnSizeAllocated(double width, double height)
    {
        base.OnSizeAllocated(width, height);
        UpdatePadding();
    }

    private void UpdatePadding()
    {
        Padding = new Thickness(
            Width * PaddingPercent.Left / 100,
            Height * PaddingPercent.Top / 100,
            Width * PaddingPercent.Right / 100,
            Height * PaddingPercent.Bottom / 100
        );
    }
}

XAML 用法： #

<local:PercentageContentView PaddingPercent="0,5,0,5" BackgroundColor="LightGray">
    <Label Text="自定义控件的百分比Padding" BackgroundColor="White" />
</local:PercentageContentView>

3. RelativeLayout 布局约束 #

如果仅在布局层面控制，直接用 RelativeLayout 的约束实现百分比边距，无需额外代码：

<RelativeLayout BackgroundColor="LightGray">
    <Label Text="RelativeLayout百分比边距" BackgroundColor="White"
           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.05}"
           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.9}"
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.05}"
           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.9}" />
</RelativeLayout>

这里通过设置左右各5%的宽度约束，间接实现了类似左右5% Margin的效果。

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