Search code examples
listviewxamarinspace

Want to remove Space Before and after ListView GroupHeader Xamarin Forms-iOS


After an each GroupHeader in listview there is space before and after. I want to remove all those spaces. This happening only iOS Simulator and Device. Just for further information it was working properly previously but now Listview groupheader coming with space after an each row.

Below Image -This is what i want to achieve and previously it was working also as accepted This is what i want to achieve and previously it was working also as accepted

This what is happening now after a every GroupHeader there is space coming only in ios. This what is happening now after a every GroupHeader there is space coming only in ios

                    <Grid Padding="0,0,0,0">
                    <ListView
                        x:Name="listView"
                        Margin="0,20,0,0"
                        ios:ListView.GroupHeaderStyle="Grouped"
                        GroupDisplayBinding="{Binding GroupDetailName}"
                        IsGroupingEnabled="true"
                        SeparatorVisibility="None">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <StackLayout Orientation="Vertical" VerticalOptions="Center">
                                        <StackLayout.GestureRecognizers>
                                            <TapGestureRecognizer
                                                CommandParameter="{Binding .}"
                                                NumberOfTapsRequired="1"
                                                Tapped="TapGestureRecognizer_Tapped" />
                                        </StackLayout.GestureRecognizers>
                                        <StackLayout Orientation="Horizontal">
                                            <Label
                                                Margin="50,10,0,10"
                                                FontSize="16"
                                                Text="{Binding GroupAppName}"
                                                VerticalOptions="Center"
                                                VerticalTextAlignment="Center" />
                                        </StackLayout>
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.GroupHeaderTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <StackLayout BackgroundColor="Red" Orientation="Horizontal">
                                        <StackLayout.GestureRecognizers>
                                            <TapGestureRecognizer
                                                CommandParameter="{Binding .}"
                                                NumberOfTapsRequired="1"
                                                Tapped="Groupnameclicked" />
                                        </StackLayout.GestureRecognizers>
                                        <ImageButton
                                            Margin="20,12,8,6"
                                            BackgroundColor="Red"
                                            CommandParameter="{Binding .}"
                                            HeightRequest="14"
                                            Source="{Binding StateIcon}"
                                            WidthRequest="15">
                                            <!--<Image.Triggers>
                                                    <DataTrigger
                                                        Binding="{Binding Isvisible}"
                                                        TargetType="Image"
                                                        Value="True">
                                                        <Setter Property="Source" Value="arrowdownnew.png" />
                                                    </DataTrigger>
                                                </Image.Triggers>-->
                                        </ImageButton>
                                        <Label
                                            Margin="0,0,0,0"
                                            FontSize="18"
                                            HorizontalOptions="Start"
                                            Text="{Binding GroupName}"
                                            TextColor="White"
                                            VerticalOptions="Center"
                                            VerticalTextAlignment="Center" />
                                    </StackLayout>

                                </ViewCell>
                            </DataTemplate>
                        </ListView.GroupHeaderTemplate>
                    </ListView>
                </Grid>

Solution

  • You can use Custom Renderer to remove the space.

    Please refer to the following code:

    [assembly:ExportRenderer(typeof(ListView),typeof(MyRenderer))]
    namespace Formssss.iOS
    {
    public class MyRenderer : ListViewRenderer
    {
        public MyRenderer()
        {
        }
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
            if(Control != null)
            {
                Control.SectionHeaderTopPadding = new nfloat(0);
            }
        }
    }
    }
    

    Below is the official documentation for custom-renderer: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/