xamarin forms - ios - listview header appearing below where it should... showing whitespace?

Question

Hope everyone is well. I'm running into a UI problem with my cross platform app for xamarin.forms. Basically it shows different on ios when compared to android.

I have a function on the AdminPage that when button clicks opens the PopupView, the popUp will either contain details on the user, or the order, for this example we are using orderDetails

  private void ShowUserDetails_Clicked(object Sender, EventArgs e)  
    {  
        Button button = (Button)Sender;  
        string UserId = button.CommandParameter.ToString();  
  
        PopupNavigation.Instance.PushAsync(new PopupView(-1, int.Parse(UserId)));  
    }

The problem lies in the UI of the popUp, if you notice the android phone on the left of the image below. It loads the way I want it to. Displaying lable for email | phone number, followed by listview of OrderDetails below. As you can see it looks fine on the android. The problem is on the ios. Where is the whitespace coming from at the top of the PopUpView?

If you take a close look at the PopUpView on the iphone 11, there is a scroll bar to the right of the popUp . It starts where the text starts, and I cant scroll any further up. Its almost as if there is an extra row placed before anything else. I have looked extensively through the code and can't figure it out. So I want to remove the whitespace, have even tried listview.scrollTo for the listview but with no success..any help would be great thank you

  
  
  
         
              
                  
              
  
  
              
  
              
                  
  
                      
                          
  
                              
                              
                              
                          
  
                              
                                  
                                  
                                  
                                  
                              
  
  
                          
  
                         
  
                          
                              
                              
                              
                              
  
  
                          
                      
  
                      
                          
                              
                                  
                                      
                                          
                                          
                                      
                                      
  
                                          
                                          
                                          
                                          
  
                                      
                                      
                                      
                                      
                                      
                                  
                              
                          
                      
                  
              
  
              
                  
                      
                          
  
                              
                                  
                                  
                              
  
                              
                                  
                                  
                                  
                                  
                              
  
                              
                          
                              
                              
                              
  
  
                          
                      
  
                      
                          
                              
                                  
                                      
                                          
                                          
                                      
                                      
  
                                          
                                          
                                          
                                          
  
                                      
                                  
                                  
                                  
                                  
                                  
                              
                          
                      
                  
              
  
  
  
          
     
  
  
using BottleShop.Data;  
using BottleShop.Models;  
using Microsoft.AppCenter.Crashes;  
using System;  
using System.Collections.Generic;  
using System.Collections.ObjectModel;  
using Xamarin.Forms.Xaml;  
  
namespace BottleShop.Views  
{  
    [XamlCompilation(XamlCompilationOptions.Compile)]  
    public partial class PopupView //: ContentView  
    {  
        public ObservableCollection PreviousOrderDetailsForUserLV { get; set; }  
  
        OrdersDatabaseController RecentOrdersController = new OrdersDatabaseController();  
  
        public ObservableCollection AllExistingUsersLV { get; set; }  
        UserDatabaseController UserController = new UserDatabaseController();  
  
        public bool SLOrders { get; set; }  
        public bool SLUsers { get; set; }  
  
    public PopupView(int OrderId, int UserId)  
        {  
            try  
            {  
                InitializeComponent();  
  
  
                //Show Orders PopUp  
                if (OrderId != -1)  
                {  
                    SLOrders = true;  
                    SLUsers = false;  
  
                    List RecentOrderDetailsList = RecentOrdersController.GetAllOrderDetailsByOrderId(OrderId);  
                    PreviousOrderDetailsForUserLV = new ObservableCollection(RecentOrderDetailsList as List);  
  
                    int startingHeightOfSL = 180;  
                    int countOfOrderDetailRecords = PreviousOrderDetailsForUserLV.Count;  
                    var tempHeightofStackSearchResults = countOfOrderDetailRecords * 40;  
  
                    if (countOfOrderDetailRecords > 1)  
                    {  
                        StackSearchResultsOuter.HeightRequest = startingHeightOfSL + tempHeightofStackSearchResults;  
                    }  
                    else  
                    {  
                        StackSearchResultsOuter.HeightRequest = startingHeightOfSL;  
                    }  
                      
                    UserInfoLabel.Text = "Email: " + PreviousOrderDetailsForUserLV[0].UserName + " | " + "Mobile: " + PreviousOrderDetailsForUserLV[0].UserMobileNumber;  
  
                }  
                else //Show Users PopUp  
                {  
                    if(UserId != -1)  
                    {  
                        var a = 1;  
  
                        SLOrders = false;  
                        SLUsers = true;  
  
                        List UsersList = UserController.GetUserWithId(UserId);  
                        if (UsersList != null)  
                        {  
                            AllExistingUsersLV = new ObservableCollection(UsersList as List);  
                        }  
  
                        StackSearchResultsOuter.HeightRequest = 180;  
                    }  
                }  
  
                BindingContext = this;  
  
            }  
            catch (Exception ex)  
            {  
                Crashes.TrackError(ex);  
            }  
        }  
    }  
}

Answer

Hello,

Welcome to our Microsoft Q&A platform!

there is a scroll bar to the right of the popUp . It starts where the text starts, and I cant scroll any further up. Its almost as if there is an extra row placed before anything else.

You set HasUnevenRows="True", so the listview has uneven rows, but the height of each row is calculated according to the fixed 40.

 var tempHeightofStackSearchResults = countOfOrderDetailRecords * 40;

Then the listview will not be fully expanded , UITableview(listview) extends UIScrollview, it needs to be scrolled and the scroll bar appears.

I'm afraid you have to change the height and disable scrolling.

use CustomRenderer to disable scrolling

[assembly: ExportRenderer(typeof(ListView), typeof(ListViewRenderer_iOS))]  
namespace ListViewHeaderViewDemo.iOS  
{  
    public class ListViewRenderer_iOS: ListViewRenderer  
    {  
        ListView mListView;  
        protected override void OnElementChanged(ElementChangedEventArgs e)  
        {  
            base.OnElementChanged(e);  
            if (e.OldElement != null)  
            {  
                // Unsubscribe  
            }  
  
            if (e.NewElement != null)  
            {  
                //Control.ContentInsetAdjustmentBehavior= UIScrollViewContentInsetAdjustmentBehavior.Never;  
                Control.ScrollEnabled = false;  
            }  
        }  
    }  
}

Best Regards,
Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

xamarin forms - ios - listview header appearing below where it should... showing whitespace?

1 answer