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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

127947 Dec 20,2016 07:03 PM Dec 23,2016 05:06 AM Xamarin.Forms 6
loading
Tags: SfListView
Madhav Shenoy
Asked On December 20, 2016 07:03 PM

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 [Syncfusion]
Replied On December 21, 2016 01:00 AM

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 
 


Madhav Shenoy
Replied On December 21, 2016 06:37 PM

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 [Syncfusion]
Replied On December 22, 2016 01:59 AM

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  
 


Madhav Shenoy
Replied On December 22, 2016 05:55 PM

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>

Madhav Shenoy
Replied On December 22, 2016 06:32 PM

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 [Syncfusion]
Replied On December 23, 2016 05:06 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;