Header does not appear in a MAUI collectionView

Question

I want to show a header in a MAUI CollectionView on the Windows platform. So I write :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppControlsDemo.Pages.CollectionViewPage"
             Title="CollectionViewPage">
    <StackLayout>
        <CollectionView x:Name="myCollectionView" SelectionMode="Single" ItemsSource="{Binding Maliste}">
            <CollectionView.Header>
                <Label Text="Here is my collectionView" />
            </CollectionView.Header>
            <CollectionView.ItemTemplate>
            <DataTemplate>
                    <Frame Margin="10" >
                        <Grid ColumnDefinitions=".1*,.9*">
                         <Image Source="wind_icon_scale.png" Grid.Row="0" Grid.Column="0" HeightRequest="20" WidthRequest="20" />
                         <Label Text="{Binding CountryName}" Grid.Row="0" Grid.Column="1"  FontSize="Small" FontAttributes="Bold"/>
                        </Grid>
                    </Frame>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
 </StackLayout>
</ContentPage>

But no header appears on the windows when I write:

<CollectionView x:Name="myCollectionView"
                Header="Here is my collectionView"
                SelectionMode="Single"
                ItemsSource="{Binding Maliste}">

Have you an explanation?

Thanks for some idea...

I look at many examples on that forum, it seems very simple to do, but why it does't run for me?

Answer 1

On Winodws platform, there's a known issue: CollectionView Header & Footer not showing #14557 on displaying the header.

To fix it, just put below code into the constructor of App.xaml.cs in /Platforms/Windows/App.xaml.cs.

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