.NET Maui中替代RelativeLayout的方案：实现元素占父容器比例布局

在.NET Maui里，RelativeLayout被弃用后，针对你需要让元素占父容器百分比空间（比如80%）的需求，有以下几种实用替代方案：

1. 使用Grid（最推荐） #

Grid的Star（*）比例机制可以完美替代RelativeLayout的Factor属性，实现百分比布局，这也是官方推荐的布局方式，性能最优。

示例：让元素占父容器80%宽度（水平居中） #

<!-- 父容器Grid -->
<Grid>
    <!-- 目标元素，放在第一列 -->
    <Frame BackgroundColor="Blue"
           HorizontalOptions="Center" />
</Grid>

<!-- 定义Grid列比例：80% + 20%空白 -->
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.8*"/>
    <ColumnDefinition Width="0.2*"/>
</Grid.ColumnDefinitions>

如果需要元素占父容器80%的宽高且居中，可以用Grid的行列比例组合：

<Grid>
    <Frame BackgroundColor="Blue"
           HorizontalOptions="Center"
           VerticalOptions="Center" />
</Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.2*"/>
    <ColumnDefinition Width="0.8*"/>
    <ColumnDefinition Width="0.2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="0.2*"/>
    <RowDefinition Height="0.8*"/>
    <RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>

2. 绑定父容器尺寸+值转换器 #

如果需要在非Grid容器（比如StackLayout）中实现百分比布局，可以通过绑定父容器的ActualWidth/ActualHeight，配合自定义转换器计算百分比尺寸。

步骤1：定义百分比转换器 #

public class PercentageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double parentSize && double.TryParse(parameter?.ToString(), out double percentage))
        {
            return parentSize * percentage;
        }
        return 0;
    }

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

步骤2：在XAML中使用 #

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

<!-- 父容器StackLayout -->
<StackLayout x:Name="ParentContainer">
    <!-- 元素占父容器80%宽高 -->
    <Frame BackgroundColor="Red"
           WidthRequest="{Binding Source={x:Reference ParentContainer}, Path=ActualWidth, Converter={StaticResource PercentageConverter}, ConverterParameter=0.8}"
           HeightRequest="{Binding Source={x:Reference ParentContainer}, Path=ActualHeight, Converter={StaticResource PercentageConverter}, ConverterParameter=0.8}" />
</StackLayout>

3. 自定义百分比布局 #

如果上述方案无法满足复杂布局需求，可以自定义一个简单的百分比布局，直接控制子元素的尺寸占比。

步骤1：定义附加属性 #

public static class PercentageLayoutProps
{
    public static readonly BindableProperty WidthPercentProperty =
        BindableProperty.CreateAttached("WidthPercent", typeof(double), typeof(PercentageLayoutProps), 1.0);

    public static double GetWidthPercent(BindableObject view) => (double)view.GetValue(WidthPercentProperty);
    public static void SetWidthPercent(BindableObject view, double value) => view.SetValue(WidthPercentProperty, value);

    public static readonly BindableProperty HeightPercentProperty =
        BindableProperty.CreateAttached("HeightPercent", typeof(double), typeof(PercentageLayoutProps), 1.0);

    public static double GetHeightPercent(BindableObject view) => (double)view.GetValue(HeightPercentProperty);
    public static void SetHeightPercent(BindableObject view, double value) => view.SetValue(HeightPercentProperty, value);
}

步骤2：实现自定义布局 #

public class PercentageLayout : Layout<View>
{
    protected override void LayoutChildren(double x, double y, double width, double height)
    {
        foreach (var child in Children)
        {
            double widthPercent = PercentageLayoutProps.GetWidthPercent(child);
            double heightPercent = PercentageLayoutProps.GetHeightPercent(child);
            
            double childWidth = width * widthPercent;
            double childHeight = height * heightPercent;

            // 自定义元素位置，这里设置为居中
            double childX = x + (width - childWidth) / 2;
            double childY = y + (height - childHeight) / 2;
            
            LayoutChildIntoBoundingRegion(child, new Rect(childX, childY, childWidth, childHeight));
        }
    }
}

步骤3：XAML中使用 #

<local:PercentageLayout>
    <Frame BackgroundColor="Green"
           local:PercentageLayoutProps.WidthPercent="0.8"
           local:PercentageLayoutProps.HeightPercent="0.8" />
</local:PercentageLayout>

注意事项 #

不需要手动根据设备分辨率计算尺寸，.NET Maui的布局系统已经基于设备无关单位（DP）处理了不同分辨率的适配，上述方案都是基于父容器的DP尺寸计算百分比，天然适配各种设备。

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