Xamarin.Forms布局问题：如何使View高度与宽度相等

看起来你遇到的核心问题是元素的宽高绑定上下文错误，加上布局容器的嵌套逻辑影响了尺寸计算，导致无法实现正方形菜单效果。我来帮你拆解问题并给出具体解决方案：

问题根源分析 #

1. 绑定上下文错误：你给Frame设置了HeightRequest="{Binding WidthRequest}"，但默认绑定上下文是页面的ViewModel，而非Frame自身，所以这个绑定根本没生效，高度不会跟随宽度变化。
2. ScrollView的冗余嵌套：你的Grid已经被RelativeLayout设置为占满父容器，再套ScrollView会让Grid的宽度计算逻辑混乱（ScrollView会优先适配内容宽度，而非强制继承父容器宽度）。
3. Grid行高未约束：RowDefinition用auto会让行高跟随内容高度收缩，无法强制和列宽保持一致。

解决方案一：修正绑定+简化布局 #

直接调整现有代码，修复绑定并简化容器嵌套：

<?xml version="1.0" encoding="UTF-8"?>
<mvvm:BaseContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
                      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                      xmlns:mvvm="clr-namespace:SharpLibrary.Forms.Source.MVVM;assembly=SharpLibrary.Forms" 
                      xmlns:cc="clr-namespace:Gorilla.Forms.Source.UI.CustomControls" 
                      x:Class="Gorilla.Forms.Source.UI.Guest.GuestMainPage">
    <ContentPage.Content>
        <RelativeLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Image Style="{StaticResource StandardBackgroundImage}" />
            <!-- 去掉冗余的ScrollView，让Grid直接占满父容器 -->
            <Grid RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                  RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!-- 用RelativeLayout包裹GridMenuItem，强制宽高相等 -->
                <RelativeLayout Grid.Row="0" Grid.Column="0">
                    <cc:GridMenuItem x:Name="testBox" 
                                     BackgroundColor="Red" 
                                     Title="Test" 
                                     Icon="Text"
                                     RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" />
                </RelativeLayout>

                <!-- 修正Frame的绑定，指定源为自身 -->
                <Frame x:Name="testFrame" 
                       Grid.Row="0" 
                       Grid.Column="1" 
                       BackgroundColor="Gray"
                       WidthRequest="{Binding Width, Source={RelativeSource AncestorType={x:Type Grid}}, Converter={StaticResource HalfWidthConverter}}"
                       HeightRequest="{Binding WidthRequest, Source={RelativeSource Self}}">
                    <Label Text="gdjfgzhg" HorizontalOptions="Center" VerticalOptions="Center" />
                </Frame>
            </Grid>
        </RelativeLayout>
    </ContentPage.Content>
</mvvm:BaseContentPage>

注：如果需要给Frame绑定Grid一半的宽度，可以添加一个简单的转换器HalfWidthConverter，把Grid的宽度除以2返回。

解决方案二：自定义SquareView（更优雅的复用方案） #

如果你的项目中有多个需要正方形的元素，建议创建一个自定义View来统一处理：

using Xamarin.Forms;

namespace YourNamespace
{
    public class SquareView : ContentView
    {
        protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
        {
            // 取宽度和高度中的较小值，确保始终是正方形
            var squareSize = Math.Min(widthConstraint, heightConstraint);
            return new SizeRequest(new Size(squareSize, squareSize));
        }
    }
}

然后在XAML中直接使用：

<!-- 先声明命名空间 -->
xmlns:local="clr-namespace:YourNamespace"

<!-- Grid部分 -->
<Grid RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
      RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <local:SquareView Grid.Row="0" Grid.Column="0">
        <cc:GridMenuItem x:Name="testBox" BackgroundColor="Red" Title="Test" Icon="Text" />
    </local:SquareView>

    <local:SquareView Grid.Row="0" Grid.Column="1">
        <Frame x:Name="testFrame" BackgroundColor="Gray">
            <Label Text="gdjfgzhg" HorizontalOptions="Center" VerticalOptions="Center" />
        </Frame>
    </local:SquareView>
</Grid>

这个方案的优势是代码复用性强，所有需要正方形的地方套上SquareView即可，无需重复写约束或绑定。

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