MAUI CollectionView 标题未显示

Question

学习 MAUI，来自有限的 WPF 经验。

我有一个包含 2 列数据的 CollectionView。我想在每列数据上放置一个标题。以下代码不显示任何标题

            
            <CollectionView EmptyView="No data available" HorizontalOptions="Center" HeightRequest="150" ItemsSource="{Binding PropertyDetails}"  >
                
                <CollectionView.Header>
                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <Label Text="Address" Grid.Column="0"/>
                            <Label Text="Cost" Grid.Column="1"/>
                        </Grid>
                </CollectionView.Header>
                
               

The following code snips do show a header

            <CollectionView EmptyView="No data available" HorizontalOptions="Center" HeightRequest="150" ItemsSource="{Binding PropertyDetails}"  Header="My header">```


OR

                <CollectionView.Header>
                    My Header                 
                </CollectionView.Header>

but this only gives me a simple unformattable header for the whole collectionview and not for each column of data.


I have read a couple of posts on SO and google put they don't quite fit my issue.

I have also tried with a CollectionView.HeaderTemplate but that failed as well

Ideally I want to get better formatting for the headers but for now I will be glad to get them visible.

What, if anything have I missed?

Many thanks

Kevin

Answer 1

在 Android 和 iOS 上，可以将

HeaderTemplate

属性设置为用于格式化标头的

DataTemplate

对象。在这种情况下，

Header

属性必须绑定到当前源才能应用模板，如下例所示：

<CollectionView     Header="{Binding .}"
                    ItemsSource="{Binding Monkeys}"
                    ItemsLayout="VerticalGrid, 2">
            <CollectionView.HeaderTemplate>
                <DataTemplate>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Label  Grid.Column="0" Margin="10,0,0,0" 
                                Text="Address"  BackgroundColor="LightGray"  
                                FontSize="12" FontAttributes="Bold"/>

                        <Label Grid.Column="1" Margin="10,0,0,0"  
                                Text="Cost" BackgroundColor="LightGray"   
                                FontSize="12" FontAttributes="Bold"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.HeaderTemplate>
              
             //Omitted for brevity

在 Winodws 上，有一个已知问题：CollectionView 页眉和页脚在显示 header 时未显示 #14557，您可以在那里跟进：https://github.com/dotnet/maui/issues/14557 .

输出：

更新：

问题已修复，参见：

https://github.com/dotnet/maui/pull/16870