如何在垂直堆栈布局中放置图片？答案

【问题标题】：How to fit a picture inside vertical stack layout?如何在垂直堆栈布局中放置图片？
【发布时间】：2016-07-08 04:40:40
【问题描述】：

应该有一个如下所示的页面：

<ContentView>
    <StackLayout Padding="20, 50, 20, 20"
                   VerticalOptions="Start">
      <Image Source=""
             x:Name="selfie"
             VerticalOptions="StartAndExpand"/>
      <StackLayout Orientation="Horizontal"
                   HorizontalOptions="Center"
                   VerticalOptions="End">
        <Button Text="Choose from gallery"
                FontSize="Medium"
                HeightRequest="60"
                x:Name="galleryButton"
                Clicked="OnGalleryButtonClicked" />
        <Button Text="Take a selfie"
                FontSize="Medium"
                HeightRequest="60"
                x:Name="cameraButton"
                Clicked="OnCameraButtonClicked" />
      </StackLayout>
      <Frame Padding="0, 20, 0, 0"
             VerticalOptions="End">
        <Button Text="Submit"
                FontSize="Medium"
                HeightRequest="60"
                x:Name="submitButton" />
      </Frame>
    </StackLayout>
  </ContentView>

当点击galleryButton或cameraButton时，用户会被带到手机图片库或相机，以便选择或拍照。然后，这张图片显示在selife 图像中。问题是，我不知道如何让图像完全填充所有三个按钮显示后留下的空间。我怎样才能做到这一点？如您所见，我尝试了几种VerticalOptions 的组合，但都没有奏效。

【问题讨论】：

我认为您应该使用其中一个选项而不是使用 StartAndExpand，例如 FillAndExpand。记得为水平和垂直添加。
为什么两者都有？水平选项与它有什么关系？
您是否尝试过使用不同的方面？ Image.Aspect = Aspect.Fill?

标签： xamarin xamarin.forms

【解决方案1】：

所以我摆脱了堆栈布局，转而使用网格。希望这不会造成太大的问题。试试这个：

<ContentView>

    <Grid HorizontalOptions="StartAndExpand"
            VerticalOptions="FillAndExpand"
            Padding="20, 50, 20, 20"
    >

            <!-- Grid row and column formatting -->
            <Grid.RowDefinitions>
                <RowDefinition Height="*" /> <!-- Selfie    -->
                <RowDefinition Height="auto" /> <!-- Buttons -->
                <RowDefinition Height="auto" /> <!-- Submit -->
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <!-- End grid row and column formatting -->

            <Image Source="icon.png"
                x:Name="selfie"
                VerticalOptions="Fill"
                HorizontalOptions="Fill"
                Grid.Column="0"
                Grid.Row="0"
                Aspect="Fill"/>

            <Grid HorizontalOptions="Fill"
                VerticalOptions="End"
                Grid.Column="0"
                Grid.Row="1">

                <!-- Grid row and column formatting -->

                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!-- End grid row and column formatting -->

                <Button Text="Choose from gallery"
                    FontSize="Medium"
                    HeightRequest="60"
                    x:Name="galleryButton"
                    HorizontalOptions="CenterAndExpand"
                    Grid.Column="0"
                    Grid.Row="0"
                />

                <Button Text="Take a selfie"
                    FontSize="Medium"
                    HeightRequest="60"
                    x:Name="cameraButton"
                    HorizontalOptions="CenterAndExpand"
                    Grid.Column="1"
                    Grid.Row="0"
                />
        </Grid>
        <Frame Padding="0, 20, 0, 0"
            VerticalOptions="End"
            Grid.Column="0"
            Grid.Row="2">
            <Button Text="Submit"
                FontSize="Medium"
                HeightRequest="60"
                x:Name="submitButton" />
        </Frame>

    </Grid>

</ContentView>

【讨论】：