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

  • Question

  • User369939 posted

    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 --

    <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>
    

    Tuesday, June 19, 2018 10:14 AM

Answers

  • User189275 posted

    Hi @daisyrowley First of all your using to much StackLayout , Ill recommend you to refactor your view with a single grid youll get the same result with a better performance. About your problem you can surround your main StackLayout with a ScrollView that should give you the space your losing with the padding and margin. Hope it helps :smile:

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, June 19, 2018 10:56 AM

All replies

  • User189275 posted

    Hi @daisyrowley First of all your using to much StackLayout , Ill recommend you to refactor your view with a single grid youll get the same result with a better performance. About your problem you can surround your main StackLayout with a ScrollView that should give you the space your losing with the padding and margin. Hope it helps :smile:

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, June 19, 2018 10:56 AM
  • User369939 posted

    thank you David!

    Tuesday, June 19, 2018 11:21 AM