用边框填充所有水平空间

Question

我里面有一个对象集合

Grid

。每个对象都显示在

Border

内。我需要的是每个

Border

- 瓷砖占据所有可用的水平空间。现在我有一组各种形状和大小的矩形，看起来不太好。

这是内容定义：

Content = new AbsoluteLayout
{
    Children =
    {
        new ScrollView
        {
            Content = new Grid
            {
                Children =
                {
                    collectionView
                        .Bind(ItemsView.ItemsSourceProperty, nameof(_viewModel.Notifications))
                }
            }
        },
        buttonCorner.Text("New")
        .LayoutBounds(1, 1, -1, -1).LayoutFlags(AbsoluteLayoutFlags.PositionProportional)
    }
}.BackgroundColor(Colors.Snow).Margin(20);

这是

CollectionView

的定义

var collectionView = new CollectionView();
collectionView.ItemTemplate = new DataTemplate(() =>
{
    var border = new Border
    {
        Stroke = Colors.LightGray,
        StrokeThickness = 1,
        StrokeShape = new RoundRectangle { CornerRadius = 10 },
        BackgroundColor = Colors.White//,
        //HorizontalOptions = LayoutOptions.FillAndExpand //deprecated, doesn't do anything
    };
    var grid = new Grid
    {
        Padding = 10,
        RowDefinitions = new RowDefinitionCollection
        {
            new RowDefinition(GridLength.Auto),
            new RowDefinition(GridLength.Auto)
        },
        ColumnDefinitions = new ColumnDefinitionCollection
        {
            new ColumnDefinition(GridLength.Auto),
            new ColumnDefinition(GridLength.Auto)
        }
    };

    var titleLabel = new Label
    {
        FontAttributes = FontAttributes.Bold,
        FontSize = 18,
        TextColor = Colors.Black
    };
    titleLabel.SetBinding(Label.TextProperty, "Title");
    var descriptionLabel = new Label
    {
        FontSize = 14,
        TextColor = Colors.Gray
    };
    descriptionLabel.SetBinding(Label.TextProperty, "Description");
    var buttonDelete = new Button
    {
        Text = "Delete",
        BackgroundColor = Colors.Red,
        TextColor = Colors.White,
        Padding = 5,
        FontSize = 12,
    };
    buttonDelete.Clicked += async (sender, e) =>
    {
        if (sender is Button btn && btn.BindingContext is Notification notification)
        {
            await _viewModel.Delete(notification.Id);
            await _viewModel.Initialize();
        }
    };
    buttonDelete.SetBinding(BindableObject.BindingContextProperty, ".");

    grid.Add(titleLabel, 0, 0);
    grid.Add(descriptionLabel, 0, 1);
    grid.Add(buttonDelete, 1, 0);
    border.Content = grid;

    return border;
});
collectionView.ItemsLayout = new GridItemsLayout(1, ItemsLayoutOrientation.Vertical)
{
    Span = 1 //doesn't do anything
};

我没有主意了。一切要么不执行任何操作，要么触发错误/警告。

LayoutOptions.Fill

也没有做任何事情。

如果这里没有人知道如何修复它，我将不得不切换到 XAML 标记，C# 标记缺乏必要的文档。

Answer 1

您在

ScrollView

内使用

AbsoluteLayout

，但没有设置

ScrollView

的大小。所以即使你把

HorizontalOption

的

Border

设置为Fill，它也可能不知道应该占用多少空间。

因此，您可以在

ScrollView

中设置

AbsoluteLayout

的大小，因为它是 AbsoluteLayout 的子元素，例如

    new ScrollView
    {
        Content = new Grid
        {
            Children =
            {
                collectionView
                    .Bind(ItemsView.ItemsSourceProperty, nameof(_viewModel.Notifications))
            }
        }
    }.LayoutBounds(-1, -1, 1, 1).LayoutFlags(AbsoluteLayoutFlags.SizeProportional)

它应该填满所有水平空间。更多信息AbsoluteLayoutFlags，请参阅按比例定位和调整大小