Постройте пирамиду с Рамками - PullRequest
Новая
       8

Постройте пирамиду с Рамками

0 голосов
/ 22 декабря 2018

Я бы хотел построить пирамиду из Frame элементов в Xamarin.Forms.Я хотел бы использовать макет Grid, но это сложно, поскольку кадры в следующем ряду будут перекрываться.Какой макет лучше всего использовать в этой ситуации?StackLayout, AbsoluteLayout или что-то еще?

Pyramid like this

1 Ответ

0 голосов
/ 22 декабря 2018

Я бы подошел к этому с помощью AbsoluteLayout и сгенерировал бы пирамиду в коде позади.Это сэкономит вам много времени на печать и будет еще быстрее.

Примерный код для этого будет: 

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));
        }
    }
}

Результат:

Result

В качестве примечания: если вы ищете подход, основанный только на XAML - подход Grid также возможен, но вы должны сделать трюк здесь - вы должны добавить дваждымного столбцов, поскольку у вас есть ячейки в самом широком ряду, чтобы использовать половину ширины ячейки для макета, а также использовать Grid.ColumnSpan, чтобы Frames всегда занимал 2 столбца одновременно: 

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

Выход:

Sample Grid

...