Display elements in the center of the CollectionView - xaml

Question

I have a CollectionView with 5 items per row. In all I have 12 elements and I would like to insert the last 2 elements of the third row in the center, and not in the left side.
<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

Answer 1

In all I have 12 elements and I would like to insert the last 2 elements of the third row in the center, and not in the left side.
There is one simple workaround, you can use one CollectionView and one StackLayout to display all datas. Using the StackLayout to display the last items.
<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; }
}
You need to set HeightRequest for CollectionView, to prevent the large space between CollectionView and StackLayout, you can take a look the following thread to adjust HeightRequest according to items.
How to change CollectionView size according sizes of its items
You also need to set Image HeightRequest to make StackLayout item size.
The screenshot: