如何将 ScrollView 内的可视元素 HeightRequest 绑定为等于页面的高度？

Question

我正在尝试将 BoxView 的高度设置为页面的高度（为此我正在使用 Xamarin Essentials）。 BoxView 包含在 StackLayout 中，StackLayout 包含在 ScrollView 中，如下所示：

<ScrollView Orientation="Vertical">
    <StackLayout>
        <BoxView HeightRequest="{Binding height}" x:Name="TestBox" BackgroundColor="Orange" />
        <BoxView BackgroundColor="Red" HeightRequest="200" />
    </StackLayout>
</ScrollView>

BoxView 的 HeightRequest 正在我的代码隐藏中定义。

我已经尝试在我的 OnAppearing() 和页面的构造函数中将此变量设置为设备的高度，但是两次 boxview 都没有填满整个页面，这是我尝试过的：

public Double height;

public MainPage()
{  
    InitializeComponent();
    height = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
}

结果：

我也试过在设置高度后添加以下内容，但这也没有用：

this.ForceLayout();

但是，如果我手动设置 HeightRequest，我会得到我想要的结果（但是，这只适用于我的特定设备）：

<BoxView HeightRequest="720" x:Name="TestBox" BackgroundColor="Orange" />

如果 BoxView 包含在 ScrollView 中，如何将 BoxView 的高度绑定到页面的高度？

Answer 1

使用 x:reference 绑定滚动视图父级（ContentPage 的直接子级）的 Height 属性。它对我有用。

<ScrollView x:Name="parentLayout">
    <StackLayout>
        <BoxView
            BackgroundColor="LightBlue"
            HeightRequest="{Binding Height, Source={x:Reference parentLayout}}"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
        <Label
            Text="Below BoxView"/>
    </StackLayout>
</ScrollView>

UI导致iOS（白色space是由于安全区）

希望对您有所帮助。如果这不是您的要求，请发表评论。

Answer 2

您没有在后面的代码中设置 bindingContext，因此 HeightRequest="{Binding height}" 将不起作用。

此外，请记住您应该将高度定义为属性。

public partial class MainPage : ContentPage
{

    public Double height { get; set; }

    public MainPage()
    {
        InitializeComponent();

        height = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;

        BindingContext = this;
    }
}

我做了一个测试，在添加 bindingContext 并将高度定义为属性后，您的代码运行良好:).

如何将 ScrollView 内的可视元素 HeightRequest 绑定为等于页面的高度？

How to Bind a visual element HeightRequest which is inside a ScrollView to equal to the Height of the Page?

c#

xaml

xamarin

xamarin.forms

xamarin.essentials