首页 > 解决方案 > 如何将 ScrollView 内的视觉元素 HeightRequest 绑定为等于页面的高度?

问题描述

我正在尝试将 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 的高度绑定到页面的高度?

标签: c#xamlxamarinxamarin.formsxamarin.essentials

解决方案


使用 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结果(空白是由于安全区域)

在此处输入图像描述

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


推荐阅读