c# - Xamarin.Forms - View 高度等于宽度

我正在尝试将我的 native Xamarin.iOS 转换为 Xamarin.Forms 并努力解决一个简单的布局问题。我想要实现的是一个像红色网格这样的菜单:



所以每个 Gridelement 的 高度 应该是 等于 宽度 但我得到的是这个:



我的 Xaml 看起来像这样:

<?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
            RelativeLayout.WidthConstraint = "{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.HeightConstraint = "{ConstraintExpression Type=RelativeToParent, Property=Height}"
            >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <cc:GridMenuItem
                    x:Name="testBox"
                    Grid.Row="0" Grid.Column="0"
                    BackgroundColor="Red"
                    Title="Test"
                    Icon="Text" />
                <Frame
                    x:Name="testFrame"
                    Grid.Row="0" Grid.Column="1"
                    BackgroundColor="Gray"
                    HeightRequest="{Binding WidthRequest}">
                        <Label Text="gdjfgzhg" />
                </Frame>
            </Grid>
        </ScrollView>
    </RelativeLayout>
</ContentPage.Content>
</mvvm:BaseContentPage>

我不知道我做错了什么，我还发现了一些 Threads，人们想在其中实现与我相同的目标，但它没有达到我的预期。

希望有人知道答案

最佳答案

我建议您根据需要使用以下布局:

    <!-- No need to use AbsoluteLayout or Constraint-->
    <Grid>
        <Image Style="{StaticResource StandardBackgroundImage}" />
        <ScrollView>
           <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

               <!-- Width responsive dependending on Screen, and Width (not WidthRequest) equals (Binding with source equals to itself)-->
               <cc:GridMenuItem x:Name="testBox"
                Grid.Row="0" Grid.Column="0"
                HeightRequest="{Binding Width, Source={x:Reference testBox}}"
                BackgroundColor="Red"
                Title="Test"
                Icon="Text" />

                <Frame x:Name="testFrame"
                Grid.Row="0" Grid.Column="1"
                BackgroundColor="Gray"
                HeightRequest="{Binding Width, Source={x:Reference testFrame}}">
                    <Label Text="gdjfgzhg" />
            </Frame>
           </Grid>
        <ScrollView>
    </Grid>

关于c# - Xamarin.Forms - View 高度等于宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48378080/