Xamarin.Forms 居中 ListView 项目

Question

如何在 Xamarin.Forms 应用中将列表视图项目居中？列表视图项当前是左对齐的。我希望它们居中对齐。

我有以下代码：

    <ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Results}" HorizontalOptions="Center">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <Grid HorizontalOptions="Center">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>

                            <Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" />
                            <Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" />
                        </Grid>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Answer 1

也许这样：

<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" HorizontalOptions="Center"/>

已编辑：

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="5*" />
  <ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>

<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" HorizontalOptions="Center"/>

Answer 2

没有真正尝试过...

您的单元格视图是 <Grid HorizontalOptions="Center">，但网格本身已扩展以适合单元格，因此 HorizontalOptions 无关紧要。

您需要在将居中的网格中放置一个辅助容器，类似于：

<ViewCell.View>
  <Grid>
    <StackPanel Orientation="Horizontal" HorizontalOptions="Center"> 
      <Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" />
      <Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" />
    </StackPanel>
  </Grid>
</ViewCell.View>

您也可以尝试（如果以上方法不起作用）将 3 列（和 3 行用于垂直对齐）添加到尺寸为 (auto)-(*)-(auto) 的 Grid 并将 StackPanel 放入中心单元格。

Answer 3

Scott the Grid 总是扩展到占用 100% 的可用空间 space。据我所知，没有办法覆盖它，即使在网格上明确设置 widthrequest 似乎也无济于事。

我假设您有更大的布局要求，您试图满足在 listView 中以名字和姓氏居中的方式使用 Stacklayout 而不是网格可以更好地完成。即

<ViewCell.View>    
<StackLayout Orientation="Horizontal">
    <Label Text="{Binding FirstName}" HorizontalOptions="EndAndExpand"/>
    <Label Text="{Binding LastName}" HorizontalOptions="StartAndExpand"/>
</StackLayout>
</ViewCell.View>

但假设您真的需要一个网格，那么我只能提供 Tomasz 的建议的 1 个补充。

<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition />
<ColumnDefinition/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding FirstName}" HorizontalOptions="End"/>
<Label Grid.Row="0" Grid.Column="2" Text="{Binding LastName}" />
</Grid>

这会在外面创建两个列来吃掉 space 迫使名称位于中间。

Answer 4

只需将 HorizontalOptions="Center" 添加到 Label 就可以了，祝你好运

<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Results}" HorizontalOptions="Center">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                    <Grid HorizontalOptions="Center">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="auto" />
                        </Grid.ColumnDefinitions>

                        <Label HorizontalOptions="Center" Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" />
                        <Label HorizontalOptions="Center" Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" />
                    </Grid>
                </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Xamarin.Forms 居中 ListView 项目

Xamarin.Forms Center ListView Items

xaml

xamarin.forms