Xamarin.Forms - how to stop image from expanding grid?

Question

I have a layout like this: Stack (vert options: start) -Grid (vert options: start) [Row Star] -Image (Aspect.AspectFill) [Row Star] [Row Star]

The 2 second rows are just empty. I also tried doing this in c# with 2 rows with length of 1 and 2, but am having the same problem.

My intention, is to have the first row take up 1/3rd of the vertical space of the current stack size. Then the image should fill this space entirely.

However, instead of the image just taking up the 1/3rd of the row of the stack, the image ends up expanding the grid and the stack and the stack is much larger.

What is the best method to achieve this?

Answer 1

For the empty Rows with Star row height, layout engine will allocate no space.

Proportional() – sizes columns and rows as a proportion of the remaining space. Specified as a value and GridUnitType.Star in C# and as # in XAML, with # being your desired value. Specifying one row/column with * will cause it to fill the available space.

For empty rows to occupy space you have to use Absolute in a grid.

If you want to occupy only 1/3rd of the parent container, then use a relative layout which fills the parent container and inside that have your image to be only 1/3 by specifying its x and y as 0 (to start from orgin of parent) and width to be 100% of parent and height to be 33% of parent.