xamarin collectionview cell custom border - xamarin

Question

How to add custom border to the collectionview cell like the image?
<CollectionView HeightRequest="100" ItemsSource="{Binding Test}">
<CollectionView.ItemsLayout >
<GridItemsLayout Orientation="Vertical" Span="4"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid >
<Image Source="{Binding Image}" ></Image>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

Answer 1

Put the collection view into a colored container could do that, and set margin for the collection view as the width of border, like
<StackLayout BackgroundColor="Black" HorizontalOptions="FillAndExpand">
<CollectionView Margin="4,0">
</CollectionView>
</StackLayout>

Answer 2

I use a sub-class frame to add border, please take a look at the following code:
Creating custom frame in .Net standard library project(shared code).
public class MyFrame : Xamarin.Forms.Frame
{
}
Custom renderer in Android platform.
[assembly: ExportRenderer(typeof(MyFrame), typeof(MyFrameRenderer))]
namespace demo3.Droid
{
[Obsolete]
class MyFrameRenderer : VisualElementRenderer<Frame>
{
public MyFrameRenderer()
{
SetBackgroundDrawable(Resources.GetDrawable(Resource.Drawable.blue_rect));
}
}
}
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand">
<control:MyFrame Padding="5">
<CollectionView BackgroundColor="Transparent" ItemsSource="{Binding Test}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="4" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="Transparent" BorderColor="Gray">
<Label Text="{Binding .}" TextColor="Black" />
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</control:MyFrame>
</StackLayout>
</ContentPage.Content>
The screenshot: