CollectionView Header & Footer not showing

[sesitosvdx]

Description

When trying to add any content inside a Header/Footer to a CollectionView, it is not being displayed. Only happens in Windows. Works well for Android and iOS.

Steps to Reproduce

Create new project
Add CollectionView with a ItemsSource
Add a Header/Footer to the CollectionView

    <CollectionView x:Name="collectionview"
                    ItemsSource="{Binding Monkeys}">            
        <CollectionView.Header>
        <VerticalStackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Monkeys"
                       FontSize="12"
                       FontAttributes="Bold" />
            </VerticalStackLayout>
        </CollectionView.Header>
        <CollectionView.Footer>
            <VerticalStackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Friends of Xamarin Monkey"
                       FontSize="12"
                       FontAttributes="Bold" />
            </VerticalStackLayout>
        </CollectionView.Footer>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                ...
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

Link to public reproduction project repository

https://github.com/sesitosvdx/CollectionViewHeaderFooterWindowsBug

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows10.0.19041.0

Did you find any workaround?

#14557 (comment)

Relevant log output

No response

[drasticactions]

I can reproduce this.

If you look at the raw Live Visual Tree for WinUI (Not MAUIs, but the WinUI Controls that MAUI creates) you can see the header and footer for the view. There's nothing rendered in them. If I hack them with Live Property Explorer, you can force them to appear, but whatever is there when compiled doesn't work.

[HobDev]

facing same issue on windows after updating visual studio to Version 17.5.4

[drasticactions]

#14603

This seems to be happening on Android too. Checking this sample on Android, I believe something similar is happening there.

[Strypper]

Mine happing too
Visual studio I'm using also 17.5.4

[pwisk]

The same is happening in my project on Windows. On Android view is generated but events are firing incorrectly when I have sublist with CollectionView.
I suspect it's caused by Windows App SDK 1.3.
I use Visual Studio 17.6.0 Preview 2.0. Preview 3.0 i broken for .NET MAUI.

[alizorlu]

Hello to everyone,

I ran into the same problem a while ago. The problem is, when we assign a value to the "EmptyView" property as a template, the header template in the collectionview gets corrupted. You can try it in Android environment.

Example;

With (Set emptyview property)

Without(not set emptyview property)

[nephesh]

I have the same issue only in Windows. I'm using Visual Studio 17.5.5, and it was working on the previous VS version 17.5.2.

[williambohrmann3]

Able to repro missing header on Windows with VS 17.5.4. Same control displays header just fine when deploying to Android, iOS, and MacCatalyst.

[dimustriz]

As a workaround, it is possible to subscribe to Scrolled event of a CollectionView and then show/hide separately placed header/fooler views based on a scroll direction.

Though I am looking forward the issue fix. :-)

[jsuarezruiz]

Tried https://github.com/sesitosvdx/CollectionViewHeaderFooterWindowsBug on main branch and cannot reproduce the issue on Windows.

Could someone attach a sample where reproduce the issue? @drasticactions Maybe I am missing something?

[williambohrmann3]

@jsuarezruiz here is a pretty simple sample; notice the header and footer is visible on Android but not visible on Windows. On VS 17.5.4

[githubgoucho]

2.3k issues + 1;
My Testbed: https://github.com/githubgoucho/CollectionViewTest

[AathifMahir]

Noticing Same Issue in Windows, Not Sure about Other Platforms. Therefore, Going with Custom Header and Footer for Now

[drossoft]

Same issue after updating VS to version 17.6.0

[SteveMaier-IRT]

Same issue.

[ne0rrmatrix]

I am having the same issue. If anyone has a work around I would love to know about it. I use a header for when loading data and I am unable to use it on windows atm. It works fine on android and ios.

[GerhardMauerberger]

Same issue on VS 17.6.2 on Windows. No problem on Android.

[NunoBem]

Is this only gonna be fixed in .NET 8? Have a production app that needs this...

[dimustriz]

As a workaround it is possible to use ItemTemplateSelector and move Header/Footer to the first/last element.

[samhouts]

Still a problem as of 8.0-preview 6.

[enisn]

Still continues on Windows

[samhouts]

It might be helpful to know that it does show on Windows if you use a text value. It fails when you try to use a View or a DataTemplate (using HeaderTemplate). So it looks like our ViewTemplate or the ViewToHandler converter is not working in this scenario.

maui/src/Controls/src/Core/Handlers/Items/StructuredItemsViewHandler.Windows.cs

Line 118 in b5204f0

case View view:

[MegaEgorik]

To make the CollectionView.Header work on Windows, you need to write this code in App.xaml.cs:
CollectionViewHandler.Mapper.AppendToMapping("Header", (handler, _) => _.AddLogicalChild(handler.PlatformView.Header as Element));

[MegaEgorik]

I thought the code above only works for header, but it works for footer too:

CollectionViewHandler.Mapper.AppendToMapping("HeaderAndFooterFix", (_, collectionView) =>
{
    collectionView.AddLogicalChild(collectionView.Header as Element);
    collectionView.AddLogicalChild(collectionView.Footer as Element);
});

[Blinchik91]

same on android, collectionview header not visible, iOS is fine

[CarlosGod]

I write this code in my app.xaml.cs,but it still not work.Can u show me code

[ne0rrmatrix]

I write this code in my app.xaml.cs,but it still not work.Can u show me code

You may have copied it into App.xaml.cs in the main directory. You need to copy it into the Windows devices specific area in /Platforms/Windows/App.xaml.cs.

Sample app with fix to help you. Look in Platforms/Windows/App.xaml.cs
https://github.com/ne0rrmatrix/HeaderSample

Or just copy past this into constructor for App.xaml.cs

 // Below is code to make Headers work for CollectionView for windows. Also works for footers.
        // All credit is due to MegaEgorik https://github.com/dotnet/maui/issues/14557#issuecomment-1651575327
        CollectionViewHandler.Mapper.AppendToMapping("HeaderAndFooterFix", (_, collectionView) =>
        {
            collectionView.AddLogicalChild(collectionView.Header as Element);
            collectionView.AddLogicalChild(collectionView.Footer as Element);
        });

[WithoutAnAce]

Hmm, I tried @MegaEgorik's fix and it worked for my header but not my footer. Can work around it for now, but interesting nonetheless

[MegaEgorik]

Hmm, I tried @MegaEgorik's fix and it worked for my header but not my footer. Can work around it for now, but interesting nonetheless

Maybe you just didn't set a HeightRequest for the footer and that's why it's not showing up.
This code works fine for me and all headers and footers for each CollectionView are displayed.

[WithoutAnAce]

Hmm, I tried @MegaEgorik's fix and it worked for my header but not my footer. Can work around it for now, but interesting nonetheless

Maybe you just didn't set a HeightRequest for the footer and that's why it's not showing up. This code works fine for me and all headers and footers for each CollectionView are displayed.

Entirely possible! I'm a relatively new dev - would this be an OK place to ask where I'm going wrong here implementing this workaround?

...
        <CollectionView
            Margin="1"
            ItemsSource="{Binding AgendaItems}"
            VerticalScrollBarVisibility="Always">
            <CollectionView.Header>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="NameColumn" Width="*" />
                        <ColumnDefinition x:Name="LocationColumn" Width="*" />
                        <ColumnDefinition x:Name="StartTimeColumn" Width="*" />
                        <ColumnDefinition x:Name="EndTimeColumn" Width="*" />
                        <ColumnDefinition x:Name="RecurrenceColumn" Width="*" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0" Text="Event Name" />
                    <Label Grid.Column="1" Text="Location" />
                    <Label Grid.Column="2" Text="StartTime" />
                    <Label Grid.Column="3" Text="EndTime" />
                    <Label Grid.Column="4" Text="Recurs?" />
                </Grid>
            </CollectionView.Header>
            <CollectionView.Footer>
                <Label Text="TestMessage" HeightRequest="24" MinimumHeightRequest="16"/>
            </CollectionView.Footer>
...

but this only shows the header, not the footer

[MegaEgorik]

...
        <CollectionView
            Margin="1"
            ItemsSource="{Binding AgendaItems}"
            VerticalScrollBarVisibility="Always">
            <CollectionView.Header>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="NameColumn" Width="*" />
                        <ColumnDefinition x:Name="LocationColumn" Width="*" />
                        <ColumnDefinition x:Name="StartTimeColumn" Width="*" />
                        <ColumnDefinition x:Name="EndTimeColumn" Width="*" />
                        <ColumnDefinition x:Name="RecurrenceColumn" Width="*" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0" Text="Event Name" />
                    <Label Grid.Column="1" Text="Location" />
                    <Label Grid.Column="2" Text="StartTime" />
                    <Label Grid.Column="3" Text="EndTime" />
                    <Label Grid.Column="4" Text="Recurs?" />
                </Grid>
            </CollectionView.Header>
            <CollectionView.Footer>
                <Label Text="TestMessage" HeightRequest="24" MinimumHeightRequest="16"/>
            </CollectionView.Footer>
...

but this only shows the header, not the footer

Try updating .NET MAUI to the latest version.
I have the latest version and the fix works fine.

[WithoutAnAce]

@MegaEgorik Thank you for the assistance. Working forwards from your example, I was able to figure out that the footer wasn't displaying because I had added an Init() event listener listening to the Loaded event of the view, and in that event listener I was updating AgendaItems without being on the main thread. My init method now looks like this:

        public override void Init()
        {
            Application.Current?.Dispatcher.Dispatch(()=>
            AgendaItems = new ObservableCollection<IAgendaItem>()
            );
            _timeService.StartTimer();
            ResetInputFields();
            base.Init();
        }

and your workaround in App.xaml is working correctly (though I will note for MSFT's sake that it is still a workaround, and the underlying issue is not fixed) Thank you so much!

[samhouts]

Woohoo! Thanks for the team effort finding workarounds, friends! I assure you this is still a top priority to fix!

[MegaEgorik]

I also made workaround for this issue on Windows -> #12499

[xx7Ahmed7xx]

I thought the code above only works for header, but it works for footer too:

CollectionViewHandler.Mapper.AppendToMapping("HeaderAndFooterFix", (_, collectionView) =>
{
    collectionView.AddLogicalChild(collectionView.Header as Element);
    collectionView.AddLogicalChild(collectionView.Footer as Element);
});

This code works, I put it in the main App.xaml.cs (Under App.xaml) and immediately saw the header.
I'm super sad that MAUI has alot of design issues although it is kinda more than 2 years old ..

[drossoft]

The solution proposed by @MegaEgorik works, but in my case, the footer is only shown the second time you navigate to the page, the first time only the header appears.

Also, the first time you navigate to the page, neither the header nor the footer have the BindingContext set, I had to set it in the OnAppearing method of the page.