Search bar not showing

Question

In my page, on Windows Machine the search bar is displayed correctly, however on mobile iOS when I test it is not displayed

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:root="clr-namespace:Orbis.Mobile"
             x:Class="Orbis.Mobile.ActivitiePage"
             xmlns:viewmodel="clr-namespace:Orbis.Mobile.ViewModels"
             Title="">

    <ContentPage.Resources>
        <root:BytesToImageConverter x:Key="ToImage" />
    </ContentPage.Resources>
    <ContentPage.Content>
        <ScrollView>
            <StackLayout Orientation="Vertical">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <BoxView x:Name="Box" BackgroundColor="White" />
                    <!--<SearchBar 
                    HorizontalOptions="Center"
                    WidthRequest="300"/>-->
                    <SearchBar x:Name="SearchBar" Placeholder="Search activities by Location" TextChanged="OnSearchBarTextChanged" WidthRequest="300" />
                    <ListView x:Name="LocationSuggestionsListView" ItemsSource="{Binding Suggestions}">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Label Text="{Binding .}" />
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>


                    <ImageButton Grid.Row="0" Source="ic_add.png" x:Name="Plus" Clicked="Plus_Clicked"
                     VerticalOptions="Center" HorizontalOptions="End" HeightRequest="35" Aspect="AspectFit" />

                    <!--<Picker x:Name="Location" HorizontalOptions="Center"
                 Title="Location"
                 ItemsSource="{Binding ItemsWithLocation}" ItemDisplayBinding="{Binding Location}"  />-->

                    <StackLayout Grid.Row="4" HeightRequest="600" HorizontalOptions="FillAndExpand" Margin="0">
                        <RefreshView Command="{Binding LoadItemsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
                            <CollectionView x:Name="ItemsListView"                ItemsSource="{Binding FilteredItems}"                SelectionMode="None">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate>
                                        <StackLayout Padding="10" >
                                            <StackLayout.GestureRecognizers>
                                                <TapGestureRecognizer Tapped="OnItemTapped" />
                                            </StackLayout.GestureRecognizers>
                                            <StackLayout Orientation="Horizontal">
                                                <Image Source="{Binding Image, Converter={StaticResource ToImage}}" 
                                                   HeightRequest="50" WidthRequest="70"/>
                                                <Label Text="{Binding Text}" LineBreakMode="WordWrap" 
                                                   Style="{DynamicResource ListItetextStyle}" FontSize="16" 
                                                   TextColor="Black"/>
                                            </StackLayout>

                                        </StackLayout>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
                        </RefreshView>
                    </StackLayout>
                </Grid>
            </StackLayout>

        </ScrollView>

    </ContentPage.Content>

</ContentPage>

There are two ways for this to appear: put the searchbar at the very top of the code or remove the code who is in this block ListView

I also tried setting a background color or text color but it doesn't change anything.

First change

 <StackLayout Orientation="Vertical">
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="auto"/>
             <RowDefinition Height="*" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
         <BoxView Grid.Row="0" x:Name="Box" BackgroundColor="White" />
         <!--<SearchBar 
         HorizontalOptions="Center"
         WidthRequest="300"/>-->
         <SearchBar Grid.Row="1" x:Name="SearchBar" Placeholder="Search activities by Location" TextChanged="OnSearchBarTextChanged" WidthRequest="300" />
         <ListView Grid.Row="2" x:Name="LocationSuggestionsListView" ItemsSource="{Binding Suggestions}">
             <ListView.ItemTemplate>
                 <DataTemplate>
                     <ViewCell>
                         <Label Text="{Binding .}" />
                     </ViewCell>
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>

Answer 1

I can reproduce the issue that the the SearchBar is shown correctly on Windows, however, it fails to display on iOS.

According to your code snippet, you may need to add HeightRequest="50" property for the SearchBar like below:

<Grid> 
       <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="50" />
              <RowDefinition Height="*" />                  
       </Grid.RowDefinitions>

      <BoxView Grid.Row="0" x:Name="Box" HeightRequest="100" Color="White" />            
      <SearchBar  Grid.Row="1" x:Name="SearchBar" Placeholder="Search activities by Location" WidthRequest="300" HeightRequest="50"/>
       <ListView  Grid.Row="2"  x:Name="LocationSuggestionsListView" ItemsSource="{Binding Suggestions}" >
               <ListView.ItemTemplate>
                    <DataTemplate>
                           <TextCell Text="{Binding .}"/>
                     </DataTemplate>
                </ListView.ItemTemplate>
       </ListView>
</Grid>

PS:

Consider using <TextCell Text="{Binding .}"/> for the DataTemplate of the ListView.