Collectionview中的 Xaml 和column格式

Question

我下面这个 CollectionView 的列没有正确左对齐。我怎样才能将其清理干净，使列中的标签正确对齐。谢谢！

<CollectionView.ItemTemplate>
<DataTemplate>
<Grid WidthRequest="900" x:Name="PersItem" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<VerticalStackLayout>
<HorizontalStackLayout Spacing="6" >
<Label Text="{Binding Id}" FontSize="Medium"  
                       TextColor="Purple"  Grid.Row="0" Grid.Column="0" Margin="0,0,45,0"/>
<Label Text="{Binding Name}" FontSize="Medium" 
                       Grid.Row="0" Grid.Column="1"/>
<Label Text="{Binding Address}" FontSize="Medium" 
                       Grid.Row="0" Grid.Column="2" Margin="0,0,45,0"/>
<Label Text="{Binding City}" FontSize="Medium" 
                       Grid.Row="0" Grid.Column="3" Margin="0,0,45,0"/>
</HorizontalStackLayout>
</VerticalStackLayout>
 
                </Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
 
 
</CollectionView>

 

此问题整理于：  Xaml and column format in CollectionView - Microsoft Q&A

Answer 1

你好，

您为Grid设置了 WidthRequest=“900”，而所有列的宽度都是自动的，因此列没有左对齐。请为标签设置准确的宽度，并删除 VerticalStackLayout 和 HorizontalStackLayout。

有关 Grid 的更多详情，请参阅 Grid - .NET MAUI | Microsoft Learn

<CollectionView  ItemsSource="{Binding ModelItems}">

    <CollectionView.ItemTemplate>

        <DataTemplate>

            <Grid WidthRequest="900" x:Name="PersItem" >

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="auto" />

                    <ColumnDefinition Width="280"/>

                    <ColumnDefinition Width="420"/>

                    <ColumnDefinition Width="auto"/>

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto"/>

                </Grid.RowDefinitions>

                <!--<VerticalStackLayout>-->

                <!--<HorizontalStackLayout Spacing="6" >-->

                <Label Text="{Binding Id}" FontSize="Medium"  

                   TextColor="Purple"  Grid.Row="0" Grid.Column="0" Margin="0,0,45,0"/>

                <Label Text="{Binding Name}" FontSize="Medium"

                   Grid.Row="0" Grid.Column="1"/>

                <Label Text="{Binding Address}" FontSize="Medium"

                   Grid.Row="0" Grid.Column="2" Margin="0,0,45,0"/>

                <Label Text="{Binding City}" FontSize="Medium"

                   Grid.Row="0" Grid.Column="3" Margin="0,0,45,0"/>

                <!--</HorizontalStackLayout>-->

                <!--</VerticalStackLayout>-->

        </Grid>

    </DataTemplate>

</CollectionView.ItemTemplate>

---

如果答案是正确的，请点击“接受答案”并点赞。 如果您对此答案还有其他疑问，请点击“评论”。

注意：如果您想接收相关电子邮件，请按照我们的文档中的步骤启用电子邮件通知 此线程的通知。