让图像只占用剩余空间答案

【问题标题】：Let image take only the remaining space让图像只占用剩余空间
【发布时间】：2017-01-31 08:15:10
【问题描述】：

我希望图像占用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>

我怎样才能正确地做到这一点？

【问题讨论】：

一个网格可以做到这一点。问题是堆栈布局没有适合的宽度

标签： xamarin xamarin.forms

【解决方案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>

【讨论】：