CODEWITHSUNDEEP
xamlmauicollectionview
Quentin Guillaume
Quentin Guillaume

Reputation: 209

How can I remove the space between the GroupHeaderTemplate and the ItemTemplate in a CollectionView on Windows .NET MAUI

Having not had an answer to my question, I am relaunching the subject for which I would like to have the solution. I am developing a contact list in .NET MAUI. However I have padding that goes around my GroupHeaderTemplate. This issue only occurs on Windows. As you can see I don't have this problem on Android.

Here is the result on Android and Windows.

Android : List on Android

Windows : List on Windows


                <CollectionView Grid.Row="2"
                                ItemsSource="{Binding Contacts}"
                                SelectionMode="None"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand"
                                VerticalScrollBarVisibility="Always"    
                                IsGrouped="True">
                    
                    <!-- En-tête de groupe -->
                    <CollectionView.GroupHeaderTemplate>
                        <DataTemplate>
                            <Label Text="{Binding Name}" 
                                   FontSize="12" HeightRequest="20"
                                   FontFamily="{x:Static constants:FontFamilies.TEXT_BOLD}"
                                   BackgroundColor="{StaticResource HeaderGrey}"
                                   Padding="20,0,0,4" VerticalTextAlignment="Center"
                                   HorizontalOptions="FillAndExpand"/>
                        </DataTemplate>
                    </CollectionView.GroupHeaderTemplate>

                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:Contact">
                            <VerticalStackLayout>
   
                                <Label HeightRequest="39"
                                       VerticalTextAlignment="Center"
                                       Padding="20,0,0,0">

                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="{Binding Firstname}"/>
                                            <Span Text=" "/>
                                            <Span Text="{Binding Name}"
                                                  FontFamily="{x:Static constants:FontFamilies.TEXT_BOLD}"/>
                                        </FormattedString>
                                    </Label.FormattedText>

                                    <Label.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="ContactSelected" 
                                                              Command="{Binding Source=
                                                                                    {RelativeSource AncestorType={x:Type local:ContactViewModel}}, 
                                                                                                    Path=DisplayContactCommand}"
                                                              CommandParameter="{Binding Id}"/>
                                    </Label.GestureRecognizers>
                                </Label>

                                <BoxView HeightRequest="1" BackgroundColor="{StaticResource SeparatorCellGrey}"/>

                            </VerticalStackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

I have tried everything. Maybe there is a handler to modify for Windows platform but I can't find it. Hoping to have a solution for this problem that I have had for a long time.

Upvotes: 2

Views: 232

Answers (1)

Jessie Zhang -MSFT
Jessie Zhang -MSFT

Reputation: 13879

Yes, it is just the case as you said.

I did a test on my side. The result is that on windows, there is a minimum height by default, even if we set the Label height very small, CollectionView.GroupHeaderTemplate still occupies the default minimum height. We can increase the height of the GroupHeader, but after trying to reduce the height of the GroupHeader, we find that its height cannot be smaller after reaching the minimum height.

And as you said, on Android, everything works fine.

For this problem on windows, you can create a new issue here.

Thanks very much for your support for maui and feedback.

Best regards!

Jessie

Upvotes: 1

Related Questions