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

Question

Evening All,

Having an issue with the UI on my ios. Working fine on android -

On Admin page, which shows a list of orders, when user clicks on the '*' to the right of each order it opens a popUp window...showing order details...the issue is with the layout inside the popup

So as you can see from the below images for order details screen. On Android the order details appear as a popUp and everything is nice and tidy in the layout....however same screen on ios results in listview header appearing below where it should...leaving white space at the top of the popup?

tried changing the layout but cant seem to figure it out...does anyone see what I am doing wrong please? Ta

    //AdminPage.xaml  
    <Button Grid.Column="4" Grid.Row="0" VerticalOptions="Start"  Clicked="ShowMore" Text="*" CommandParameter="{Binding OrderModel_Id}"/>  
      
    //AdminPage.cs  
     private void ShowMore(object Sender, EventArgs e)  
            {  
                Button button = (Button)Sender;  
                string OrderId = button.CommandParameter.ToString();  
      
                PopupNavigation.Instance.PushAsync(new PopupView(int.Parse(OrderId)));  
            }  
      
    //popUp.cs  
     public partial class PopupView   
        {  
            public ObservableCollection<OrderDetails_Model> PreviousOrderDetails_ForUser { get; set; }  
      
            OrdersDatabase_Controller RecentOrders_Controller = new OrdersDatabase_Controller();  
      
            public PopupView(int Id)  
            {  
                try  
                {  
                    InitializeComponent();  
      
                    List<OrderDetails_Model> RecentOrderDetails_List = RecentOrders_Controller.GetAllOrderDetails_ById(Id);  
                    PreviousOrderDetails_ForUser = new ObservableCollection<OrderDetails_Model>(RecentOrderDetails_List as List<OrderDetails_Model>);  
      
                    int countOfOrderDetailRecords = PreviousOrderDetails_ForUser.Count;  
                    int startingHeight = 100;  
                    var tempHeightofStack_SearchResults = countOfOrderDetailRecords * 40;  
      
                    //height of popup is adjusted depending on amount of products in order  
                    StackSearchResultsOuter.HeightRequest = startingHeight + tempHeightofStack_SearchResults;  
      
                    BindingContext = this;  
                }  
                catch (Exception ex)  
                {  
                    Crashes.TrackError(ex);  
                }  
            }  
        }  
      
    //PopUp.Xaml  
     <StackLayout x:Name="StackSearchResultsOuter" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Center" >  
            <StackLayout.Resources>  
                <converters:ProductIdToProductNameConverter x:Key="converter"/>  
            </StackLayout.Resources>  
                <ListView ItemsSource="{Binding PreviousOrderDetailsForUser}" HasUnevenRows="True" SeparatorVisibility="None">  
      
                    <ListView.Header>  
                        <Frame>  
                            <Grid>  
      
                                <Grid.RowDefinitions>  
                                    <RowDefinition Height="*"/>  
                                    <RowDefinition Height="Auto"/>  
                                </Grid.RowDefinitions>  
      
                                <Grid.ColumnDefinitions>  
                                    <ColumnDefinition Width="30*" />  
                                    <ColumnDefinition Width="25*" />  
                                    <ColumnDefinition Width="25*" />  
                                    <ColumnDefinition Width="20*" />  
                                </Grid.ColumnDefinitions>  
      
                                <Label Grid.Column="0" Grid.Row="0" Text="Product"  
                               HorizontalOptions="Center"/>  
                            <Label Grid.Column="1" Grid.Row="0"   
                           Text="Quantity"  
                               HorizontalOptions="Center"/>  
                            <Label Grid.Column="2" Grid.Row="0"   
                           Text="Price"  
                               HorizontalOptions="Center"/>  
                            <Label Grid.Column="3" Grid.Row="0"   
                           Text="Sub"  
                               HorizontalOptions="Center"/>  
      
                                <BoxView Grid.Row="1"  
                                 Grid.ColumnSpan="4"  
                                 HeightRequest="1"  
                                 BackgroundColor="LightGray"/>  
      
      
                            </Grid>  
                        </Frame>  
                    </ListView.Header>  
      
                    <ListView.ItemTemplate>  
                        <DataTemplate>  
                            <ViewCell>  
                                <Grid Padding="10" RowSpacing="10" ColumnSpacing="10">  
                                    <Grid.RowDefinitions>  
                                        <RowDefinition Height="Auto"/>  
                                        <RowDefinition Height="*"/>  
                                    </Grid.RowDefinitions>  
                                    <Grid.ColumnDefinitions>  
                                        <ColumnDefinition Width="43*" />  
                                        <ColumnDefinition Width="8*" />  
                                        <ColumnDefinition Width="25*" />  
                                        <ColumnDefinition Width="24*" />  
                                    </Grid.ColumnDefinitions>  
                                    <Label Grid.Column="0" Text="{Binding OrderModel_Id}" VerticalOptions="End"/>  
                                <Label Grid.Column="1" Grid.Row="0" Text="{Binding User_Name}" VerticalOptions="End"/>  
                                <Label Grid.Column="0" Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Text="{Binding Product_Id, Converter={StaticResource converter}}"/>  
                                    <Label Grid.Column="1" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding Quantity}"/>  
                                    <Label Grid.Column="2" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding PriceOf_Item, StringFormat='£{0:0.00}'}"/>  
                                    <Label Grid.Column="3" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding SubtotalForThis_Item, StringFormat='£{0:0.00}'}"/>  
                                </Grid>  
                            </ViewCell>  
                        </DataTemplate>  
                    </ListView.ItemTemplate>  
                </ListView>  
            </StackLayout>  
      
      
        </pages:PopupPage>  

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

tried changing the layout but cant seem to figure it out...does anyone see what I am doing wrong please

I tested the code in a basic demo and reproduce the issue. It's related to the frame, it'll work as expected while removing the frame. This is the difference of the platform setting by default. According to the posted code, it's unnessary to use the frame. It's suggested to remove the frame in this case.

   <ListView HasUnevenRows="True" SeparatorVisibility="None">  
       <ListView.Header>  
           <Grid>  
               ...  
           </Grid>  
       </ListView.Header>  
       <ListView.ItemTemplate>  
           ...  
       </ListView.ItemTemplate>  
   </ListView>  

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

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.