如何使Xamarin.Forms中CollectionView的项水平居中？

我懂你现在的困扰——明明给CollectionView和Label都加了HorizontalOptions="Center"，但整个字母列表还是靠左对齐，没达到屏幕水平居中的效果对吧？这其实是因为CollectionView默认会自适应内容宽度，导致它本身的宽度刚好包裹所有项，即使父布局让它居中，里面的项还是会从左开始排列，看起来就没居中。

下面是修改后的代码，能完美实现你要的效果：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="App1.MainPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
  <StackLayout BackgroundColor="Aqua" HorizontalOptions="Fill">
    <CollectionView BackgroundColor="Beige" HorizontalOptions="Fill">
      <CollectionView.ItemsSource>
        <x:Array Type="{x:Type x:String}">
          <x:String>A</x:String>
          <x:String>B</x:String>
          <x:String>C</x:String>
          <x:String>D</x:String>
          <x:String>E</x:String>
          <x:String>F</x:String>
          <x:String>G</x:String>
          <x:String>H</x:String>
        </x:Array>
      </CollectionView.ItemsSource>
      <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" 
                           ItemSpacing="20"
                           HorizontalAlignment="Center"/>
      </CollectionView.ItemsLayout>
      <CollectionView.ItemTemplate>
        <DataTemplate>
          <Label Text="{Binding .}" 
                 HorizontalOptions="Center"
                 FontSize="Large"/>
        </DataTemplate>
      </CollectionView.ItemTemplate>
    </CollectionView>
  </StackLayout>
</ContentPage>

关键修改点说明： #

• 调整父布局与CollectionView的宽度：把StackLayout的HorizontalOptions设为Fill，同时将CollectionView的HorizontalOptions也设为Fill，这样CollectionView会占满整个屏幕宽度，为项的居中提供足够的空间。另外去掉了StackLayout的Orientation="Horizontal"（因为我们不需要横向排列StackLayout内的元素，CollectionView自身会横向排列项）。
• 设置ItemsLayout的水平对齐：在LinearItemsLayout中添加HorizontalAlignment="Center"，这是核心——它会让整个横向排列的字母组在CollectionView的范围内水平居中，这正是你要的整体居中效果。
• 保留Label的居中设置：原来的Label的HorizontalOptions="Center"可以继续保留，它会让每个字母在自己的Item单元格内居中，和ItemsLayout的居中配合，实现完美的视觉效果。

内容的提问来源于stack exchange，提问作者TheBlueSky