Xaml and column format in CollectionView

Ronald Rex 1,666 Reputation points
2024-02-12T16:51:53.02+00:00

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>

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,606 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
9,972 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
744 questions
0 comments No comments
{count} votes

Accepted answer
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 24,531 Reputation points Microsoft Vendor
    2024-02-13T05:59:18.2433333+00:00

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful