We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

8 Replies

DB Dinesh Babu Yadav Syncfusion Team December 21, 2016 06:00 AM UTC

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



MS Madhav Shenoy December 21, 2016 11:37 PM UTC

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?


DB Dinesh Babu Yadav Syncfusion Team December 22, 2016 06:59 AM UTC

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



MS Madhav Shenoy December 22, 2016 10:55 PM UTC

Hi,
       The code you've given doesn't scroll at all!!!!. Android Screenshot 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>


MS Madhav Shenoy December 22, 2016 11:32 PM UTC

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.


DB Dinesh Babu Yadav Syncfusion Team December 23, 2016 10:06 AM UTC

Hi Madhav, 
 
Thanks for the suggestion. We will update the same in our UG documentation.  
 
Regards, 
Dinesh Babu Yadav 



FR Francesco June 30, 2020 11:22 PM UTC

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




LN Lakshmi Natarajan Syncfusion Team July 1, 2020 06:44 AM UTC

Hi Francesco, 
 
 
Regards, 
Lakshmi Natarajan 
 


Loader.
Live Chat Icon For mobile
Up arrow icon