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?

What happens as the number of items grows? How is it supposed to center that? — Jason
just conceptually I don't think you can center content in a scrolling container - just like you can't vertically center a vertical list — Jason
Okay I was lookinga a CarouselView, but I have a quick question. Is it possible to show for example 3 items at the same time? — A. Vreeswijk
I don't know why you wouldn't use a vertical list/collection with 2 columns? — Jason

zafar zafar · Accepted Answer · 2020-06-02T22:13:50

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:

Xamarin Forms Center CollectionView content

1 Answers