Question

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

<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的几种组合，但它们都没有用。

Answer 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>

如何在垂直堆栈布局内放置图片？

1 个答案: