How to fit a picture inside vertical stack layout? - xamarin

Question

there should be a page that looks like following:
<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>
When galleryButton or cameraButton are clicked, user is taken to phone image gallery or camera, in order to select or take a picture. Then, this picture is displayed in selife image. The problem is, that I don't know how to make image fill exactly the space left after all three buttons are displayed. How can I do that? I tiried several combinations of VerticalOptions, as you can see, but none of them worked.

Answer 1

So I got rid of the stack layout and worked with a grid instead. Hope that doesn't cause too much of a problem. Try this:
<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>