.NET MAUI How to make a proper Gridlayout in Collectionview with Header?

Question

I'm trying to build a table in .NET MAUI based on a Grid Layout. This is the code:

<CollectionView ItemsSource="{Binding digitalInputs}">
    <CollectionView.Header>
        <Grid ColumnDefinitions="*,*,*,*">
            <Label Text="Name" Grid.Column="0"/>
            <Label Text="Typ" Grid.Column="1"/>
            <Label Text="Status" Grid.Column="2"/>
            <Label Text="Aktiv" Grid.Column="3"/>
        </Grid>
    </CollectionView.Header>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="services:DigitalInput">
            <Grid ColumnDefinitions="*,*,*,*">
                <Label Text="{Binding pName}" Grid.Column="0"/>
                <Label Text="{Binding pDigitalType}" Grid.Column="1"/>
                <Label Text="{Binding pValueText}" Grid.Column="2"/>
                <Label Text="{Binding pActive}" Grid.Column="3"/>
             </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

This is the result when running in Debug Mode on MacCatalyst (Visual Studio for Mac):

Now I wonder how I can align the header grid properly to the grid in the data template? Does someone have a suggestion on how I can improve the code to build a proper table?

Edit: This seems to be a bug in the IDE. When I change the HorizontalOptions property on the Grid in the CollectionView.Header, as a comment suggested, the XAML Hot-Reload triggers a re-rendering of the view and all of a sudden the header grid aligns correctly with the grid in the ItemTemplate.

Answer 1

I tested the code you provided in iOS, Windows in MAUI. And it can align the header grid properly to the grid in the data template in CollectionView. So the issue could be related with the services:DigitalInput retrieving the data, they should be correctly formatted with no blank space in those properties.

Below are the code sample and running output, hope it can shed some light for you!

XAML:

<CollectionView ItemsSource="{Binding digitalInputs}"> 

        <CollectionView.Header>
 
            <Grid ColumnDefinitions="*,*,*,*">
                <Label Text="Name" Grid.Column="0"/>
                <Label Text="Typ" Grid.Column="1"/>
                <Label Text="Status" Grid.Column="2"/>
                <Label Text="Aktiv" Grid.Column="3"/>
            </Grid>
        </CollectionView.Header>

        <CollectionView.ItemTemplate>

            <DataTemplate >

                <Grid ColumnDefinitions="*,*,*,*">

                    <Label Text="{Binding pName}" Grid.Column="0"/>

                    <Label Text="{Binding pDigitalType}" Grid.Column="1"/>

                    <Label Text="{Binding pValueText}" Grid.Column="2"/>

                    <Label Text="{Binding pActive}" Grid.Column="3"/>

                </Grid>

            </DataTemplate>

        </CollectionView.ItemTemplate>

    </CollectionView>

Code-behind:

    public ObservableCollection<Model> digitalInputs { get; set; } 
    public NewPage1()
      {
            InitializeComponent();

            //assign data
            digitalInputs = new ObservableCollection<Model>()
            {

                  new Model{pName="KipSchalter", pDigitalType="Zustand",pActive="OFF", pValueText="True" },
                  new Model{pName="KipSchalter", pDigitalType="Zustand",pActive="OFF", pValueText="True" },
                  new Model{pName="Digital In 3", pDigitalType="Zustand",pActive="OFF", pValueText="FALSE" },
                  new Model{pName="Digital In 4", pDigitalType="Zustand",pActive="OFF", pValueText="FALSE" }
        }
            ;

            BindingContext = this;
      }

iOS output:

Windows output:

Update:

This seems to be a potential issue in the IDE. When changing the HorizontalOptions property on the Grid as Jason suggested, the header grid aligns correctly with the grid in the ItemTemplate.