Question

我们需要一个横幅，在下面的代码中称为bannerView，以根据设备的高度进行缩放。

但是此横幅高度：

不能小于60个单位
不能大于146个单位

代码：

<AbsoluteLayout>
    <StackLayout
        Padding="0"
        AbsoluteLayout.LayoutBounds="0,0,1,1"
        AbsoluteLayout.LayoutFlags="SizeProportional"
        HorizontalOptions="FillAndExpand">
        <AbsoluteLayout
            x:Name="bannerView">
            <Image
                AbsoluteLayout.LayoutBounds="0,0,1.05,1"
                AbsoluteLayout.LayoutFlags="SizeProportional"
                Aspect="AspectFill"
                Source="banner.jpg">
            </Image>
            <Label
                Margin="16,18,16,36"
                AbsoluteLayout.LayoutBounds="0,1,-1,-1"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                Text="{Binding Name}">
            </Label>
            <Label
                Margin="16,18,16,18"
                AbsoluteLayout.LayoutBounds="0,1,-1,-1"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                Text="{Binding EmployeeId}">
            </Label>
        </AbsoluteLayout>
        <StackLayout>
            <!-- Dynamic content -->
        </StackLayout>
    </StackLayout>
</AbsoluteLayout>

注意：我们需要外部AbsoluteLayout在屏幕上添加渐变效果

Answer 1

您是否考虑过使用包含横幅视图元素的FlexLayout并将这种具有HeightRequest属性的对象绑定到视图模型的可能性？

我使用了类似于ControlTemplate的方法来实现自定义页面的标题，具体取决于设备导航栏的高度：

<FlexLayout Direction="Column" JustifyContent="Center">
    <!--HEADER-->
    <Grid IsVisible="{TemplateBinding BindingContext.ToolbarVisibled}" HeightRequest="{TemplateBinding BindingContext.ToolbarHeight}">
        <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".8*"/>
        <ColumnDefinition Width=".2*"/>
        </Grid.ColumnDefinitions>
        <!--...-->
    </Grid>
    <!--CONTENT HERE-->
    <FlexLayout Direction="Column" JustifyContent="Center">
        <ContentPresenter FlexLayout.Grow="1"/>
    </FlexLayout>
</FlexLayout>

具有绝对高度和最小和最大高度的AbsoluteLayout

1 个答案: