ListView in popup with auto height

[Hosney]

I have an SfListView control inside an SfPopupLayout with AutoSizeMode set to Height. Regardless of how many items are in the listview the popup always stretches the entire height of the screen.

Is it possible to have the popup height fit the listview content?

[Ranjith Kumar Durairaj]

Hi Hosney

Thank you for contacting syncfusion support

Unfortunately we can’t able to replicate the reported issue, I have attached the sample code snippet for your reference. Can you please provide us the code snippet that you’re used or please modify the below code snippet with issue replication.


 

    <ContentPage.Content> 

        <sfPopup:SfPopupLayout x:Name="popupLayout"> 

            <sfPopup:SfPopupLayout.PopupView> 

                <sfPopup:PopupView> 

                    <sfPopup:PopupView.ContentTemplate> 

                        <DataTemplate> 

                            <sync:SfListView x:Name="listView" AutoFitMode="Height" 

                   ItemsSource="{Binding BookInfo}" 

                   > 

                                <sync:SfListView.ItemTemplate> 

                                    <DataTemplate> 

                                        <Grid Padding="10"> 

                                            <Grid.RowDefinitions> 

                                                <RowDefinition Height="0.4*" /> 

                                                <RowDefinition Height="0.6*" /> 

                                            </Grid.RowDefinitions> 

                                            <Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Teal" FontSize="21" /> 

                                            <Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" FontSize="15"/> 

                                        </Grid> 

                                    </DataTemplate> 

                                </sync:SfListView.ItemTemplate> 

                            </sync:SfListView> 

                        </DataTemplate> 

                    </sfPopup:PopupView.ContentTemplate> 

                </sfPopup:PopupView> 

            </sfPopup:SfPopupLayout.PopupView> 

            <sfPopup:SfPopupLayout.Content> 

                <StackLayout x:Name="layout"> 

                    <Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start"  

               HorizontalOptions="FillAndExpand"  Clicked="ClickToShowPopup_Clicked" /> 

                </StackLayout> 

            </sfPopup:SfPopupLayout.Content> 

        </sfPopup:SfPopupLayout> 

    </ContentPage.Content> 

Regards,
Ranjith Kumar 

[Hosney]

The popup in your example is not set to use AutoSizeMode="Height" and therefore will always be fixed. I want the popup to adjust to the list height if it is less than screen height.

[Lakshmi Natarajan]

Hi Hosney, 

 

Sorry for the inconvenience caused. 

 

We have checked the reported query “I want the popup to adjust to the list height if it is less than screen height” from our side. We would like to inform you that you can achieve your requirement by using the IsScrollingEnabled as False for the SfListView to load the ListView with full height. Also, we suggest you to refresh the popup view to update the PopupView based on its content.  

 

Please refer to our user guidance document to load ListView with full height, 

UG link: https://help.syncfusion.com/xamarin/listview/scrolling#listview-with-full-height 

 

Please refer to the following code snippets for more reference, 

 

Set IsScrollingEnabled as False for SfListView. 

<sfPopup:SfPopupLayout x:Name="popupLayout" Opened="popupLayout_Opened"> 

    <sfPopup:SfPopupLayout.PopupView> 

        <sfPopup:PopupView AutoSizeMode="Height" ShowFooter="False" ShowHeader="False"> 

            <sfPopup:PopupView.ContentTemplate> 

                <DataTemplate> 

                    <StackLayout> 

                        <syncfusion:SfListView x:Name="listView" IsScrollingEnabled="False" ItemsSource="{Binding ContactsInfo}"> 

                            <syncfusion:SfListView.ItemTemplate> 

                                <DataTemplate> 

                                    <Grid x:Name="grid"> 

                                        ... 

                                    </Grid> 

                                </DataTemplate> 

                            </syncfusion:SfListView.ItemTemplate> 

                        </syncfusion:SfListView> 

                   </StackLayout> 

                </DataTemplate> 

            </sfPopup:PopupView.ContentTemplate> 

        </sfPopup:PopupView> 

    </sfPopup:SfPopupLayout.PopupView> 

 

In the SfPopupLayout.Opened event, call the refresh method. 

private void popupLayout_Opened(object sender, EventArgs e) 

{ 

    popupLayout.PopupView.Refresh(); 

} 

 

We have attached the tested sample in the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/166030/ze/ListViewXamarin965686462 

 

 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan