Xaml and column format in CollectionView

Question

Hi Friends, I have this CollectionView below where my columns are not left aligned properly. How do I clean this up so that my labels in the columns are aligned correctly. Thanks ! Screenshot 2024-02-12 104906.png

    <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>

Answer 1

Hello,

You set WidthRequest="900" for the Grid and all columns' width are auto, so the columns are not left aligned. Please set an accurate width for the label and you could remove the VerticalStackLayout and HorizontalStackLayout.

For more details about Grid, you can see 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>

Best Regards, Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.