SfListView disappears when its put inside a nested Stacklayout or a nested Grid

[Madhav Shenoy]

HI,

      First of all great job with the ListView. With the current Xamarin ListView having issues, in my eyes this control was really welcome. The control has 1 issue. If I place the control under more than 1 Stacklayout or Grid, it disappears. I'm attaching a sample project.  If you look at the file MvDetail.xaml

<StackLayout>

        <Grid>

            <xForms:SfListView BackgroundColor="Transparent"

You will see that the listview is under a Grid and a stacklayout. If you run the project, you will see that the screen is blank. Now, remove the stacklayout or the grid (any 1) and run the project again, now you will see that the listview is now visible. Could you please fix this?

It would also be nice if you could add Commands for all the events.

Kind Regards,

Madhav Shenoy                 

Attachment: TestListView_69892d78.zip

[Dinesh Babu Yadav]

Hi Madhav, 

 

Thanks for contacting Syncfusion Support. 

 

In order to achieve your requirement “SfListView is not visible under nested layouts”, you have to set the HorizontalOptions and VerticalOptions of the Grid to “LayoutOption.FillAndExpand” like below code example. 

 

Code snippet[XAML]: 

<StackLayout> 

<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 

<xForms:SfListView BackgroundColor="Transparent" 

   ItemTapped="SfListView_OnItemTapped" 

   ItemsSource="{Binding PublicProp}" 

   SelectedItem="{Binding SelectedCard}" 

   SelectionBackgroundColor="Transparent" 

   SelectionGesture="Tap" 

   SelectionMode="Single"/> 

</Grid> 

</StackLayout> 

 

For your reference we have modified the sample. Please find the sample link below. 

 

Sample : http://www.syncfusion.com/downloads/support/forum/127947/ze/Forum_1279471765918422  

 

Currently we do not have any immediate plan to add commands in SfListView, however we will consider your request and will implement it in any of our upcoming releases. 

 

Please let us know if you have any query. 

 

Regards, 

Dinesh Babu Yadav 

 

[Madhav Shenoy]

Thanks. Yes that did work. So here's the next problem I'm facing. In the app I'm building what I want to do is give the listview a fixed height. And make the items scroll. I could do this using Xamarin ListView. I give the listview a height and the items will scroll. How do I get that effect in the SfListView? If I give the sflistView a height, it just chops off the rest of the content. I could put it inside a scrollview, but how do I make its height dynamically increase as the number of items increase?

[Dinesh Babu Yadav]

Hi Madhav, 

  

Sorry for the inconvenience caused. 

 

We have checked the reported query “Defining fixed height to SfListView inside the ScrollView” in our end, you can achieve your requirement by setting StackLayout inside the ScrollView and then set the SfListView and define the height for the SfListView. 

 

Code snippet[XAML]: 

<ScrollView> 

<StackLayout> 

<sync:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" HeightRequest="200" ItemSize="100"/> 

</StackLayout> 

</ScrollView> 

 

 

For your reference we have attached the sample. Please find the sample link below  

  

Sample: http://www.syncfusion.com/downloads/support/forum/127947/ze/GettingStarted1646208519  

  

If the issue still reproduces at your end, please modify the above sample to reproduce the issue and update us with replication procedure or video link. So, that we could able to analyze the issue better and update you with appropriate solution. 

 

Please let us know if you have any concern.   

  

Regards,  

Dinesh Babu Yadav  

 

[Madhav Shenoy]

Hi,

       The code you've given doesn't scroll at all!!!!.  My requirement is that you add a stacklayout outside the scrollview and make it scroll. Something like this

<StackLayout>

        <ScrollView>

            <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                <sync:SfListView x:Name="listView"

                                 HeightRequest="200"

                                 ItemSize="100"

                                 ItemsSource="{Binding BookInfo}">

                    <sync:SfListView.ItemTemplate>

                        <DataTemplate>

                            <ViewCell>

                                <ViewCell.View>

                                    <StackLayout Orientation="Vertical">

                                        <Label FontAttributes="Bold"

                                               Text="{Binding BookName}"

                                               TextColor="Teal">

                                            <Label.FontSize>

                                                <OnPlatform x:TypeArguments="x:Double">

                                                    <OnPlatform.WinPhone>

                                                        <OnIdiom x:TypeArguments="x:Double"

                                                                 Phone="21"

                                                                 Tablet="22" />

                                                    </OnPlatform.WinPhone>

                                                    <OnPlatform.Android>

                                                        <OnIdiom x:TypeArguments="x:Double"

                                                                 Phone="20"

                                                                 Tablet="22" />

                                                    </OnPlatform.Android>

                                                    <OnPlatform.iOS>

                                                        <OnIdiom x:TypeArguments="x:Double"

                                                                 Phone="20"

                                                                 Tablet="22" />

                                                    </OnPlatform.iOS>

                                                </OnPlatform>

                                            </Label.FontSize>

                                        </Label>

                                        <Label Text="{Binding BookDescription}" TextColor="Teal">

                                            <Label.FontSize>

                                                <OnPlatform x:TypeArguments="x:Double">

                                                    <OnPlatform.WinPhone>

                                                        <OnIdiom x:TypeArguments="x:Double"

                                                                 Phone="16"

                                                                 Tablet="17" />

                                                    </OnPlatform.WinPhone>

                                                    <OnPlatform.Android>

                                                        <OnIdiom x:TypeArguments="x:Double"

                                                                 Phone="14"

                                                                 Tablet="16" />

                                                    </OnPlatform.Android>

                                                    <OnPlatform.iOS>

                                                        <OnIdiom x:TypeArguments="x:Double"

                                                                 Phone="14"

                                                                 Tablet="16" />

                                                    </OnPlatform.iOS>

                                                </OnPlatform>

                                            </Label.FontSize>

                                        </Label>

                                    </StackLayout>

                                </ViewCell.View>

                            </ViewCell>

                        </DataTemplate>

                    </sync:SfListView.ItemTemplate>

                </sync:SfListView>

                <Button Clicked="Button_Clicked"

                        HeightRequest="100"

                        Text="Click to Add Item"

                        TextColor="Blue"

                        WidthRequest="100" />

                <Label FontSize="16"

                       HeightRequest="100"

                       Text="Get the Book Details"

                       TextColor="Black" />

                <Label FontSize="16"

                       HeightRequest="100"

                       Text="Purchase the Books"

                       TextColor="Black" />

            </StackLayout>

        </ScrollView>

    </StackLayout>

[Madhav Shenoy]

Ok, I think I managed to get it done. Had to add HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"

to all stacklayout above the SfListView :).

Do you think you could document this? Maybe in getting started, this is a basic requirement and its not really obvious.

[Dinesh Babu Yadav]

Hi Madhav, 

 

Thanks for the suggestion. We will update the same in our UG documentation.  

 

Regards, 

Dinesh Babu Yadav 

[Francesco]

Hi had the same problem , using a tabview nested in another tabview and inside it a list view.
This is not happened if the list view is in the a single tabview , i have tried all the solutions above and nothing seems to work with my problem.

So i have solved simply setting as  VerticalOptions="EndAndExpand".

This will fix the problem ;)

Hope this helps someone.

To replicate the problem use a listview with a stickyheader and a sticky headergroup inside a tabview nested to another tabview.

Alex

[Lakshmi Natarajan]

Hi Francesco, 

 

That's great!!! Thank you for the solution. 

 

Regards, 

Lakshmi Natarajan