Build a pyramid with Frames - xaml

Question

I would like to build a pyramid with Frame elements in Xamarin.Forms. I would like to use a Grid layout, but it is difficult since the frames on the next row will overlap. What is the best layout to use in this situation? StackLayout, AbsoluteLayout or something else?

Answer 1

I would approach this using AbsoluteLayout and would generate the pyramid in the code-behind. It will save you a lot of typing and will be even faster.
The rough code for this would be:
private void BuildPyramid()
{
int cellSize = 40;
int height = 8;
for (int row = 0; row < height - 1; row++) //one less to have two cells on top row
{
//add "empty" space equal to a multiple of half-size of a cell
int startX = row * cellSize / 2;
var numberOfColumns = height - row; //each row has one less cell
for (int column = 0; column < numberOfColumns; column++)
{
var x = column * cellSize + startX;
var y = (height - row - 1) * cellSize; //y-axis decreases going down
var frame = new Frame()
{
WidthRequest = cellSize,
HeightRequest = cellSize,
Margin = new Thickness(2),
BorderColor = Color.CornflowerBlue
};
AbsLayout.Children.Add(frame);
AbsoluteLayout.SetLayoutBounds(frame, new Rectangle(x, y, cellSize, cellSize));
}
}
}
The result:
As a side note, if you are looking for a XAML-only approach - the Grid approach is also possible, but you have to do a trick here - you must add twice as many columns as you have cells in the widest row, to use half-width of a cell for layout and also utilize Grid.ColumnSpan to make the Frames always span 2 columns at once:
<Grid HorizontalOptions="Center" ColumnSpacing="0" RowSpacing="0">
<Grid.Resources>
<Style TargetType="Frame">
<Setter Property="BorderColor" Value="CornflowerBlue" />
<Setter Property="Margin" Value="2" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="15" />
</Grid.ColumnDefinitions>
<!-- top row -->
<Frame Grid.Column="1" Grid.ColumnSpan="2" />
<Frame Grid.Column="3" Grid.ColumnSpan="2" />
<!-- bottom row -->
<Frame Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" />
<Frame Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" />
<Frame Grid.Row="1" Grid.Column="4" Grid.ColumnSpan="2" />
</Grid>
Yields: