如何居中ListView的列表项？Header占满宽度且列表项设固定宽度

方法一：固定宽度居中列表项 #

修改ItemTemplate的ViewCell根布局为Grid，让Grid占满ListView宽度，再在Grid中放置内容容器并设置居中，既不使用margin，也能实现列表项居中且固定宽度：

<Grid>
    <ListView HorizontalOptions="FillAndExpand">
        <ListView.Header>
            <StackLayout HorizontalOptions="Fill"
                         BackgroundColor="Yellow"
                         HeightRequest="300">
                <Label Text="Header"
                       FontSize="72"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"
                       TextColor="Black"/>
            </StackLayout>
        </ListView.Header>

        <ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
                <x:String>One</x:String>
            </x:Array>
        </ListView.ItemsSource>

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <!-- 用Grid作为根布局，占满ListView宽度 -->
                    <Grid HorizontalOptions="FillAndExpand">
                        <!-- 内容容器设置固定宽度并水平居中 -->
                        <StackLayout HorizontalOptions="Center"
                                     WidthRequest="800"
                                     BackgroundColor="Green">
                            <Label Text="{Binding . }"
                                   HeightRequest="20"
                                   BackgroundColor="DimGray"
                                   HorizontalOptions="Center"
                                   TextColor="Black"/>
                        </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

方法二：按屏幕百分比设置宽度 #

如果需要列表项宽度为屏幕的60%，可以通过绑定屏幕宽度的比例实现，无需硬编码数值：

1. 在页面代码后台添加属性（假设页面名为MainPage）：

public partial class MainPage : ContentPage
{
    public double ScreenWidth => DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density;
    public double ItemWidth => ScreenWidth * 0.6;

    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
    }
}

2. 修改XAML中的列表项布局：

<Grid>
    <ListView HorizontalOptions="FillAndExpand">
        <ListView.Header>
            <StackLayout HorizontalOptions="Fill"
                         BackgroundColor="Yellow"
                         HeightRequest="300">
                <Label Text="Header"
                       FontSize="72"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"
                       TextColor="Black"/>
            </StackLayout>
        </ListView.Header>

        <ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>One</x:String>
                <!-- 其他项省略 -->
            </x:Array>
        </ListView.ItemsSource>

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid HorizontalOptions="FillAndExpand">
                        <StackLayout HorizontalOptions="Center"
                                     WidthRequest="{Binding ItemWidth}"
                                     BackgroundColor="Green">
                            <Label Text="{Binding . }"
                                   HeightRequest="20"
                                   BackgroundColor="DimGray"
                                   HorizontalOptions="Center"
                                   TextColor="Black"/>
                        </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

原理说明 #

ListView的ViewCell默认会强制内容占满ListView的可用宽度，直接在ViewCell内设置内容的HorizontalOptions="Center"不会生效，因为父容器（ViewCell的内容区域）是满宽的。通过添加一个占满宽度的Grid作为ViewCell的根布局，再让内容在Grid中居中，就能实现列表项居中且不拉伸的效果，这种方式不会使用margin，对性能没有负面影响。

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