Question

我希望图像能够占用StackLayout中的剩余空间，但是在XAML中这似乎不可能。图像始终会尝试以最大可用尺寸显示自己。

<StackLayout>
  <Image Source="{Binding ProfileImage}" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Start" />
  <StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="EndAndExpand">
    <Button HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonShare" Text="Share" />
    <Button HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonExternalLinks" Text="External links"/>
  </StackLayout>
</StackLayout>

我尝试了不同的Vertical-和HorizontalOptions来实现这一点，但第二个按钮总是被推出视图。使用特定高度也不是最佳解决方案。

似乎可以使用相对布局，但这意味着我必须绑定相对值，如果我定位不同的设备（如iPhone4S和iPhone5），这不是一个好主意。

<RelativeLayout>
  <Image Source="{Binding ProfileImage}" Aspect="AspectFit"
         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.7}"/>
  <StackLayout Orientation="Vertical"
         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8}"
         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2}">
    <Button HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonShare" Text="Share" />
    <Button HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonExternalLinks" Text="External links"/>
  </StackLayout>
</RelativeLayout>

我该如何正确地做到这一点？

Answer 1

我认为你要找的是一个网格。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  Source="{Binding ProfileImage}" Aspect="AspectFit" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
        <Button Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonShare" Text="Share" />
        <Button Grid.Row="1" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="End" x:Name="_ButtonExternalLinks" Text="External links"/>
    </Grid>

让图像只占用剩余空间

1 个答案: