如何適應垂直堆棧佈局中的圖片？

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>