Xamarin.Forms Размеры элементов в WrapLayout

Question

Текущий: Цель:

Попытка реализовать WrapLayout для добавления динамического добавления кнопки в чистом формате с горизонтальным добавлением, какпоказано на рисунке «Гол».Однако, как видно из «Текущего», размеры кнопок в WrapLayout далеки от идеальных.

Обнаружили с помощью простого метода проб и ошибок, что использование запросов высоты и ширины в любом из элементов (scrollView, wrapLayout,Кнопки) не приводят к изменению форматов кнопок.

HeightRequest = xx;
WidthRequest = xx;

Единственный способ, который я нашел до сих пор, изменить размер элементов wrapLayout, это добавить большое количество дочерних элементов, например:

Как показано, мое понимание того, как форматировать детей WrapLayout, довольно слабое.Итак, как отформатировать количество дочерних элементов, разрешенных в каждой строке, и как правильно отформатировать дочерние элементы WrapLayout?

Текущая реализация, разработанная в соответствии с классом WrapLayout, показанным в Xamarin Developer Sample для WrapLayout

ScrollView scrollView = new ScrollView {
    Margin = new Thickness(20, 20, 20, 20),
};
WrapLayout wrapLayout;
wrapLayout = new WrapLayout {
     ColumnSpacing = 12,
};
scrollView.Content = wrapLayout;
wrapLayout.Children.Add(
    new Button
    {
        Text = "9 ° (?)",
        BackgroundColor = Color.Yellow,
        BorderColor = Color.Black,
    }
);
wrapLayout.Children.Add(
    new Button
    {
        Text = "10.5 ° (?)",
        BackgroundColor = Color.Gray,
        BorderColor = Color.Black,
    }
);

Answer 1

Вы должны взглянуть на Пакет NuView CollectionView

Вы можете использовать GridCollectionView, который основан на WrapLayout.

Там вы можете использовать:

UniformGrid

Указано количество столбцов, расположенных в каждой строке.Ширина каждого столбца становится шириной, полученной делением ширины строки на это значение.Это количество столбцов можно установить в свойствах PortraitColumns и LandscapeColumns."

AutoSpacingGrid

Как только ширина столбца указана, каждый столбец размещается до подгонки в каждой строке и автоматически корректируется в каждом интервале. Ширина столбца может быть установлена ​​с помощью свойства ColumnWidth и свойства SpacingType.изменить способ настройки интервала.

Пример:

<ai:GridCollectionView 
        ItemsSource="{Binding ItemsSource}" TouchFeedbackColor="Yellow"
        ColumnWidth="100" ColumnHeight="1.0" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ai:ContentCell>
                    <Label Text="{Binding Name}" />
                </ai:ContentCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ai:GridCollectionView>