Xamarin Forms Center CollectionView content

Question

I have a problem. I created a page that looks like this:

Now I want the content of the CollectionView to be centered. I already tried things to set on HorizontalOptions=Center, but no luck!

Here is the code of that part:

<StackLayout HorizontalOptions="CenterAndExpand">
    <CollectionView ItemsSource="{Binding coinDataList}" ItemsLayout="HorizontalList" Margin="0" HorizontalOptions="CenterAndExpand" BackgroundColor="Red">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid RowSpacing="0" Margin="20,0,20,0" HorizontalOptions="CenterAndExpand" Padding="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20" />
                        <RowDefinition Height="5" />
                        <RowDefinition Height="20" />
                        <RowDefinition Height="10" />
                        <RowDefinition Height="20" />
                    </Grid.RowDefinitions>

                    <Label Grid.Row="0" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" Text="{Binding Coin}" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
                    <Label Grid.Row="2" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" Text="{Binding Price, StringFormat='{0:F2}'}" TextColor="White" FontSize="18"/>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

How can I do that?

Answer 1

You can achieve this by using BindableLayout in conjunction with the StackLayout with horizontal orientation. This will not be as performant as CollectionView, but from your UI, it looks like you will not be having a lot of items in your ItemSource collection, but you your need UI to be dynamic and evenly spaced and centered when there are fewer items. As the item list grows, the UI will look more like the horizontal list view.

So here is the minimal working XAML which you can modify to fit into your project. For sake of simplicity, I have added everything in the XAML (no code behind), so you can plug this XAML right into the content page and test it out!

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:generic="clr-namespace:System.Collections.Generic;assembly=netstandard"
             mc:Ignorable="d"
             x:Class="Playground.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <generic:List x:Key="SymbolNames" x:TypeArguments="x:String">
                <x:String>BTC</x:String>
                <x:String>LTC</x:String>
                <x:String>ETH</x:String>
                <x:String>OT1</x:String>
                <x:String>OT2</x:String>
                <x:String>OT3</x:String>
                <x:String>OT4</x:String>
                <x:String>OT5</x:String>
                <x:String>OT6</x:String>
            </generic:List>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ScrollView Orientation="Horizontal" HeightRequest="60" VerticalOptions="Start">
        <StackLayout BindableLayout.ItemsSource="{Binding Source={StaticResource SymbolNames}}" Orientation="Horizontal">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding}" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Margin="10"/>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </ScrollView>
</ContentPage>

UI when 3 Items:

UI When multiple overflowing items: