c# - 如何将 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绑定Height滚动视图父级（ContentPage 的直接子级）的属性。它对我有用。

<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>

iOS中的UI结果（空白是由于安全区域）

希望这可以帮助你。如果这不是您的要求，请发表评论。

Answer 2

您没有bindingContext在后面设置 in 代码，因此HeightRequest="{Binding height}"将无法正常工作。

另外，请记住，您应该将高度定义为Property。

public partial class MainPage : ContentPage
{

    public Double height { get; set; }

    public MainPage()
    {
        InitializeComponent();

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

        BindingContext = this;
    }
}

我做了一个测试，在添加 bindingContext 并将高度定义为Property之后，你的代码运行良好:)。