Margin and padding cutting out Listview in xamarin forms..How to Solve it?

[Sourav]

I am using syncfusion listview for displaying lists.

Normally (Without margin and padding) listview's height is adjusting as per the content of each list.

But, When I am applying margin and padding to listview for a clean distinguishable look , the down portion of the list is getting hided by the margin and padding.

We are using syncfusion trail version in our company and if this issue can be solved then we are looking forward for the syncfusion premium version.

Please help me to resolve this.  

Thanks in Advance.

Xaml Code of that page is here -- 

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"

             xmlns:helper="clr-namespace:Syncfusion.ListView.XForms.Helpers;assembly=Syncfusion.SfListView.XForms"

             xmlns:local="clr-namespace:SchoolProjext.ViewModels;assembly=SchoolProject"

             x:Class="SchoolProject.Views.StudentDetails"

             Title="StudentDetails">

    <ContentPage.BindingContext>

        <local:StudentDetailsListVM/>

    </ContentPage.BindingContext>

    <ContentPage.Resources>

        <ResourceDictionary>

            <helper:InverseBoolConverter x:Key="inverseBoolConverter"/>

        </ResourceDictionary>

    </ContentPage.Resources>

    <StackLayout>

        <StackLayout  Margin="4,4,4,0" >

            <Button HeightRequest="50"

                BorderRadius="5"

                Text="Search"

                HorizontalOptions="FillAndExpand"

                VerticalOptions="Start"

                BackgroundColor="#42CCFF"

                TextColor="#FFFFFF"

                FontSize="20"

                FontFamily="SF-UI-Text-Regular.otf#SF UI Text"                

                Clicked="Button_Clicked" />

        </StackLayout>

        <syncfusion:SfListView x:Name="listView"

                 LoadMoreOption="Auto"

                 LoadMoreCommand="{Binding LoadMoreItemsCommand}"

                 LoadMoreCommandParameter="{Binding Source={x:Reference listView}}"

                 IsBusy="{Binding IsBusy}"

                 ItemsSource="{Binding studentList}"

                 AutoFitMode="Height"

                 Orientation="Vertical">

            <syncfusion:SfListView.ItemTemplate>

                <DataTemplate>

                    <Grid  BackgroundColor="White"

                      VerticalOptions="FillAndExpand"  HorizontalOptions="FillAndExpand">

                        <Label.GestureRecognizers>

                            <TapGestureRecognizer NumberOfTapsRequired="1"

                                                  Command="{Binding Path=BindingContext.TapCommand,

                                                  Source = {x:Reference listView}}"

                                                  CommandParameter="{Binding}"/>

                        </Label.GestureRecognizers>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto"/>

                            <RowDefinition Height="Auto"/>

                            <RowDefinition Height="*"/>

                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="*"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <StackLayout Grid.Column="0" Grid.Row="0"  Grid.ColumnSpan="2" Orientation="Vertical">

                            <Label FormattedText="{Binding FormattedSubject}" VerticalOptions="FillAndExpand" HorizontalOptions="StartAndExpand"></Label>

                        </StackLayout>

                        <StackLayout Grid.Column="0"  Grid.Row ="1" Orientation="Vertical">

                            <Label FormattedText="{Binding FormattedStudentId}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Label>

                            <Label FormattedText="{Binding FormattedSubject}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Label>

                            <Label FormattedText="{Binding FormattedTest}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Label>

                            <Label FormattedText="{Binding FormattedGrade}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Label>

                            <Label FormattedText="{Binding FormattedResult}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Label>

                        </StackLayout>

                        <StackLayout Grid.Column="1" Grid.Row ="1" Orientation="Vertical">

                            <Label FormattedText="{Binding FormattedDate1}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Label>

                            <Label FormattedText="{Binding FormattedDate2}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Label>

                            <Label FormattedText="{Binding FormattedDate3}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Label>

                            <Label FormattedText="{Binding FormattedStreetName}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Label>

                            <Label FormattedText="{Binding FormattedBuildingNo}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Label>

                        </StackLayout>

                        <StackLayout Grid.Column="0" Grid.Row ="2" Orientation="Horizontal" Grid.ColumnSpan="2"

                                     VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand">

                            <Label FormattedText="{Binding FormattedFooter}" VerticalOptions="EndAndExpand"  HorizontalOptions="StartAndExpand">

                            </Label>

                        </StackLayout>

                    </Grid>

                </DataTemplate>

            </syncfusion:SfListView.ItemTemplate>

            <syncfusion:SfListView.LoadMoreTemplate>

                <DataTemplate>

                    <Grid>                                              

                        <syncfusion:LoadMoreIndicator Color="#d6d6d6" IsRunning="{Binding IsBusy, Converter={StaticResource inverseBoolConverter}}" IsVisible="{Binding IsBusy, Converter={StaticResource inverseBoolConverter}}"

                                                      VerticalOptions="Center" HorizontalOptions="Center"/>

                    </Grid>

                </DataTemplate>

            </syncfusion:SfListView.LoadMoreTemplate>

        </syncfusion:SfListView>

    </StackLayout>

</ContentPage>

<!--Margin="15,8,15,8" Padding="15,15,15,0" ItemSize=400-->

[Rawoof Sharief Muthuja Sherif]

Hi Sourav, 

Thanks for contacting Syncfusion support. 

We have checked the reported query “Bottom portion of the list view is clipped when applying margin and padding” from our end. We have prepared the sample based on the given template by you and notice that the LoadMoreIndicator is not visible when listview reaches the end. If you queried about the indicator visible issue we would like to let you know that we have internally handled the visibility of the indicator based on the IsBusy property, So no need to handle it in the converter, also could you please state the purpose of using the converter in the LoadMoreIndicator.  

If you queried about some other visibility issue, Unfortunately the reported issue does not replicated at our end. ListView is loaded in the view as expected. 

For your reference we have attached the sample and you can download it from the below link. 

Sample :  http://www.syncfusion.com/downloads/support/directtrac/138038/ze/Sample69049927  

 

Can you please check whether the reported issue occurs in our sample also? If possible, can you please modify our sample to replicate the reported issue in our sample which would highly help us to analyze the query better.      

  

Please let us know if you require further assistance.  

Regards, 

Rawoof M. 

[Sourav]

 Hi Rawoof,

      First of all thank you for paying attention to my request and provided effort to this issue.I really appreciate that.

      

      The project done and sent me for height adjustment was also fine when I did  that.

       But real problem is when I am providing margin and padding to distinguish each grid in the listview. The down portion data of grid is getting hided by margin and                     padding.I want to adjust the height of grid in listview as per the content of each grid.

      

            I just added margin and padding to the grid in listview.

Code Snippet --

             

                   

                        Margin="0,5,0,5" Padding="10,5,10,5"

                      VerticalOptions="FillAndExpand"  HorizontalOptions="FillAndExpand">

                           

                               

                               

                               

                           

                           

                               

                               

                           

                                                                                                                                                  

        I am providing an image to clearly state that what the problem actually is.

        This is getting the nightmare for me and my company.

        Thanks again and waiting with hope.

    Regards,

       Sourav De

Attachment: ProblemImage_aabab030.zip

[Rawoof Sharief Muthuja Sherif]

Hi Sourav,   

   

Sorry for the inconvenience.     

     

We have confirmed that the issue with “List view Item clipped when apply margin to the parent element of the ItemTemplate even AutoFitMode set as Height” is a defect and we have logged a defect report. The fix for this issue is available in our 2018 Vol 2 SP 1 release which is scheduled to be roll out by the end of July. We will appreciate your patience until then.    

   

Regards,     

Rawoof M 

[Sourav]

Hey Rawoof,

          

                     Thank you for notification.I resolved that issue by myself.

Regards,

        Sourav 

[Rawoof Sharief Muthuja Sherif]

Hi Sourav, 

 

Thanks for the update. 

 

Regards, 

Rawoof M.