如何使MAUI中CollectionView的Border控件填充全部水平空间？

核心修改点 #

• 确保CollectionView自身占满父容器水平空间
• 让ItemTemplate中的Border和内部Grid都填充可用水平空间
• 调整Grid的列定义，让内容列占满剩余宽度

修改后的代码 #

CollectionView定义修改 #

var collectionView = new CollectionView
{
    HorizontalOptions = LayoutOptions.Fill // 让CollectionView占满父容器水平空间
};
collectionView.ItemTemplate = new DataTemplate(() =>
{
    var border = new Border
    {
        Stroke = Colors.LightGray,
        StrokeThickness = 1,
        StrokeShape = new RoundRectangle { CornerRadius = 10 },
        BackgroundColor = Colors.White,
        HorizontalOptions = LayoutOptions.Fill // 让Border占满CollectionView的水平空间
    };
    var grid = new Grid
    {
        Padding = 10,
        HorizontalOptions = LayoutOptions.Fill, // 让Grid占满Border的水平空间
        RowDefinitions = new RowDefinitionCollection
        {
            new RowDefinition(GridLength.Auto),
            new RowDefinition(GridLength.Auto)
        },
        ColumnDefinitions = new ColumnDefinitionCollection
        {
            new ColumnDefinition(GridLength.Star), // 修改为Star，让该列占满剩余水平空间
            new ColumnDefinition(GridLength.Auto) // 按钮列自适应宽度
        }
    };

    // 以下Label和Button代码保持不变
    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 LinearItemsLayout(ItemsLayoutOrientation.Vertical); // 单列垂直布局用LinearItemsLayout更简洁

内容容器定义修改 #

Content = new AbsoluteLayout
{
    Children =
    {
        new ScrollView
        {
            HorizontalOptions = LayoutOptions.Fill, // 确保ScrollView占满父容器水平空间
            Content = new Grid
            {
                HorizontalOptions = LayoutOptions.Fill, // 确保Grid占满ScrollView水平空间
                Children =
                {
                    collectionView
                        .Bind(ItemsView.ItemsSourceProperty, nameof(_viewModel.Notifications))
                }
            }
        },
        buttonCorner.Text("New")
        .LayoutBounds(1, 1, -1, -1).LayoutFlags(AbsoluteLayoutFlags.PositionProportional)
    }
}.BackgroundColor(Colors.Snow).Margin(20);

说明 #

1. LayoutOptions.Fill：在.NET MAUI中该属性仍有效，用于让控件填充所在布局的可用空间（替代已废弃的FillAndExpand）。
2. GridLength.Star：让第一列占满剩余水平空间，保证标题和描述能充分利用宽度，同时Delete按钮只占用自身所需宽度。
3. LinearItemsLayout：单列垂直布局时，使用该布局比GridItemsLayout更简洁，效果一致。

内容的提问来源于stack exchange，提问作者Aveyron2033