在 CollectionView 的中心显示元素答案

【问题标题】：Display elements in the center of the CollectionView在 CollectionView 的中心显示元素
【发布时间】：2021-07-07 00:57:03
【问题描述】：

我有一个CollectionView，每行有 5 个项目。我总共有 12 个元素，我想在中间插入第三行的最后 2 个元素，而不是在左侧。

<CollectionView 
       x:Name="CollectionIconDiary" 
       SelectionMode="None">
          <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="5" VerticalItemSpacing="3" HorizontalItemSpacing="3"/>
          </CollectionView.ItemsLayout>
          <CollectionView.ItemTemplate>
          <DataTemplate>
                      //OTHER CODE

Example

【问题讨论】：

没有这样的选项。也许可以使用 DataTemplateSelector 伪造它，并为第 11 个项目添加第二个模板，以添加所需的左边距。需要根据 collectionview 宽度和项目宽度动态计算要添加的边距。或者，在第 11 个项目之前的不可见“间隔”项目，具有适当的宽度。或者也许可以继承collectionview，改变它的布局算法。不确定。
如果这是一个固定列表，那么将最后两个图标移出集合。

标签： xaml xamarin.forms

【解决方案1】：

我总共有 12 个元素，我想在中间插入第三行的最后 2 个元素，而不是在左侧。

有一种简单的解决方法，您可以使用一个 CollectionView 和一个 StackLayout 来显示所有数据。使用 StackLayout 显示最后的项目。

<StackLayout Spacing="0">
        <CollectionView
            x:Name="CollectionIconDiary"
            HeightRequest="240"
            ItemsSource="{Binding items}"
            SelectionMode="None">
            <CollectionView.ItemsLayout>
                <GridItemsLayout
                    HorizontalItemSpacing="3"
                    Orientation="Vertical"
                    Span="5"
                    VerticalItemSpacing="3" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Image Source="{Binding imagesource}" />
                        <Label Text="{Binding name}" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <StackLayout
            x:Name="list"
            BindableLayout.ItemsSource="{Binding lastitem}"
            HorizontalOptions="CenterAndExpand"
            Orientation="Horizontal">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Image HeightRequest="80" Source="{Binding imagesource}" />
                        <Label Text="{Binding name}" />
                    </StackLayout>

                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </StackLayout>

  public partial class Page6 : ContentPage
{
    public itemviewmodel1 source { get; set; }
    public Page6()
    {
        InitializeComponent();
        source = new itemviewmodel1();
        this.BindingContext = source;
      
    }
}

public class itemviewmodel1
{
    public ObservableCollection<itemmodel> items { get; set; }
    public ObservableCollection<itemmodel> lastitem { get; set; }
    public itemviewmodel1()
    {
        items = new ObservableCollection<itemmodel>();
        lastitem = new ObservableCollection<itemmodel>();
        for(int i=0;i<13;i++)
        {
            itemmodel model = new itemmodel();
            model.name = "image "+i;
            model.imagesource = "c1.png";
           
            items.Add(model);
        }
        func();
    }

    private void func()
    {
        int value = (items.Count)% 5;
        int count = items.Count;
        if(value>0)
        {
            for(int i=count-1;i>=count-value;i--)
            {
                lastitem.Add(items[i]);
                items.Remove(items[i]);
                
            }
        }

    }
}
public class itemmodel
{
    public string imagesource { get; set; }
    public string name { get; set; }
}

CollectionView需要设置HeightRequest，防止CollectionView和StackLayout之间的空间过大，可以看下面的thread根据items调整HeightRequest。

How to change CollectionView size according sizes of its items

您还需要设置 Image HeightRequest 以使 StackLayout 项目大小。

截图：

【讨论】：