SearchPage: Add ScrollableHeader, OnBackButtonPressed, use OnHandlerChanged, remove legacy safe area handling (#819)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Vetle444 <35739538+Vetle444@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Vetle444 <vetle_96@live.no>

Author: 3 people

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [55.3.0]
+- [SearchPage] Added `ScrollableHeader` property to allow consumers to provide a header that scrolls with search results.
+- [SearchPage] Replaced `OnLoaded`/`OnUnloaded` event subscriptions with `OnHandlerChanged` override.
+- [SearchPage] Removed old iOS safe area handling in favor of .NET 10 `SafeAreaEdges` (consumers should set safe area themselves).
+- [SearchPage] Android back button now executes `CancelCommand`, allowing consumers to override close behavior with their own navigation service.
+
 ## [55.2.7]
 - [Android][Modal] Fixed memory leak when popping modal pages wrapped in NavigationPage, caused by StackNavigationManager not clearing references on disconnect (dotnet/maui#34456)
 - [Android][Button] Fixed memory leak caused by strong reference from platform MaterialButton to virtual Button

src/app/Components/ComponentsSamples/Searching/SearchPageSamples.xaml

@@ -19,10 +19,22 @@
     <dui:SearchPage.BindingContext>
         <searching:SearchPageSamplesPageViewModel />
     </dui:SearchPage.BindingContext>
+    <dui:SearchPage.ScrollableHeader>
+        <dui:Label Text="{x:Static localizedStrings:LocalizedStrings.SearchPage_PlaceholderText}"
+                   Style="{dui:Styles Label=SectionHeader}"
+                   Margin="{dui:Thickness Left=content_margin_medium, Top=content_margin_medium}" />
+    </dui:SearchPage.ScrollableHeader>
     <dui:SearchPage.HintView>
-        <dui:Label Text="{x:Static localizedStrings:LocalizedStrings.SearchPage_HintText}"
-                   VerticalOptions="CenterAndExpand"
-                   HorizontalOptions="CenterAndExpand" />
+        <Grid RowDefinitions="Auto, *">
+            <dui:Label Text="{x:Static localizedStrings:LocalizedStrings.SearchPage_PlaceholderText}"
+                       Style="{dui:Styles Label=SectionHeader}"
+                       Margin="{dui:Thickness Left=content_margin_medium, Top=content_margin_medium}" />
+            
+            <dui:Label Text="{x:Static localizedStrings:LocalizedStrings.SearchPage_HintText}"
+                       VerticalOptions="CenterAndExpand"
+                       HorizontalOptions="CenterAndExpand"
+                       Grid.Row="1" />
+        </Grid>
     </dui:SearchPage.HintView>
     <dui:SearchPage.NoResultView>
         <dui:Label Text="{x:Static localizedStrings:LocalizedStrings.SearchPage_NoResultText}"

src/library/DIPS.Mobile.UI/Components/Searching/SearchPage.Properties.cs

@@ -31,6 +31,15 @@ public View FooterView
             set => SetValue(FooterViewProperty, value);
         }
 
+        /// <summary>
+        /// A view displayed at the top of the result list that scrolls with the content.
+        /// </summary>
+        public View? ScrollableHeader
+        {
+            get => (View?)GetValue(ScrollableHeaderProperty);
+            set => SetValue(ScrollableHeaderProperty, value);
+        }
+
         [Obsolete("Setting Content property is the same as setting EmptyResultView")]
         public new View? Content { get; set; }
 
@@ -222,6 +231,12 @@ public bool AutoHideLastDivider
             typeof(SearchPage),
             propertyChanged: (bindable, _, _) => ((SearchPage)bindable).OnFooterViewChanged());
 
+        public static readonly BindableProperty ScrollableHeaderProperty = BindableProperty.Create(
+            nameof(ScrollableHeader),
+            typeof(View),
+            typeof(SearchPage),
+            propertyChanged: (bindable, _, _) => ((SearchPage)bindable).OnScrollableHeaderChanged());
+        
         public static readonly BindableProperty IsAutocorrectEnabledProperty = BindableProperty.Create(
             nameof(IsAutocorrectEnabled),
             typeof(bool),

src/library/DIPS.Mobile.UI/Components/Searching/SearchPage.cs

@@ -1,8 +1,4 @@
-#if __IOS__
-using DIPS.Mobile.UI.Components.Searching.iOS;
-using UIKit;
-#endif
-
+using DIPS.Mobile.UI.Components.Dividers;
 using DIPS.Mobile.UI.Components.Lists;
 using DIPS.Mobile.UI.Extensions;
 using DIPS.Mobile.UI.Internal;
@@ -24,12 +20,10 @@ public abstract partial class SearchPage : ContentPage
 
         public SearchPage()
         {
-            Loaded += OnLoaded;
-            Unloaded += OnUnLoaded;
 
             //Searchbar
             SearchBar = new SearchBar { AutomationId = "SearchBar".ToDUIAutomationId<SearchPage>(), HasCancelButton = true, HasBusyIndication = true, ShouldCloseKeyboardOnReturnKeyTapped = true };
-            SearchBar.SetAppThemeColor(SearchBar.BarColorProperty, ColorName.color_surface_default);
+            SearchBar.SetAppThemeColor(SearchBar.BarColorProperty, Shell.Shell.BackgroundColorName);
 
 #if __ANDROID__ //Colors are different on Android due to no inner white frame
                 SearchBar.SetAppThemeColor(SearchBar.TextColorProperty,
@@ -38,6 +32,8 @@ public SearchPage()
                     ColorName.color_icon_default);
                 SearchBar.SetAppThemeColor(SearchBar.PlaceholderColorProperty,
                     ColorName.color_text_subtle);
+                SearchBar.SetAppThemeColor(SearchBar.CancelButtonTextColorProperty, 
+                    ColorName.color_text_action);
 #else
             SearchBar.SetAppThemeColor(SearchBar.SearchFieldBackgroundColorProperty, 
                 BackgroundColorName);
@@ -75,11 +71,11 @@ public SearchPage()
                 {
                     new()
                     {
-                        Height = GridLength.Auto // Space for safe area ios
-                    },
+                        Height = GridLength.Auto // Space for the search bar
+                    }, 
                     new()
                     {
-                        Height = GridLength.Auto // Space for the search bar
+                        Height = GridLength.Auto // Divider
                     }, 
                     new()
                     {
@@ -93,7 +89,12 @@ public SearchPage()
                 RowSpacing = 0
             };
 
-            m_grid.Add(SearchBar, 0, 1);
+            m_grid.Add(SearchBar, 0, 0);
+            
+            m_grid.Add(new Divider
+            {
+                Margin = new Thickness(0, Sizes.GetSize(SizeName.size_1), 0, 0)
+            }, 0, 1);
 
             OnSearchModeChanged();
 
@@ -109,41 +110,20 @@ private void OnCollectionViewScrolled(object? sender, ItemsViewScrolledEventArgs
             SearchBar.Unfocus();
         }
 
-        private void OnUnLoaded(object? sender, EventArgs e)
+        protected override void OnHandlerChanged()
         {
-            Loaded -= OnLoaded;
-            Unloaded -= OnUnLoaded;
-            m_resultCollectionView.Scrolled -= OnCollectionViewScrolled;
+            base.OnHandlerChanged();
 
-            SearchBar.Focused -= OnSearchBarFocused;
+            if (Handler is null)
+                return;
 
-        }
-
-        private void OnLoaded(object? sender, EventArgs e)
-        {
             SetSearchState(SearchStates.NeedsSearchHint);
             if (ShouldAutoFocus)
             {
                 SearchBar.Focus();    
             }
 
             SearchBar.Focused += OnSearchBarFocused;
-
-#if __IOS__
-            if (OperatingSystem.IsIOSVersionAtLeast(14, 1))
-            {
-                var safeAreaInsetsTop = UIApplication.SharedApplication.KeyWindow.SafeAreaInsets.Top;
-                
-                var topBoxView = new BoxView
-                {
-                    BackgroundColor = SearchBar.BarColor, HeightRequest = safeAreaInsetsTop
-                };
-                
-                m_grid.Children.Insert(0, topBoxView);
-
-                topBoxView.Margin = new Thickness(0, -safeAreaInsetsTop, 0, 0);
-            }
-#endif
         }
 
         private void OnSearchBarFocused(object? sender, EventArgs eventArgs)
@@ -162,7 +142,19 @@ private void TextWasClearedFromClick()
 
         private static void OnCancel()
         {
-            Application.Current!.MainPage!.Navigation.PopAsync();
+            Application.Current?.Windows[0].Navigation.PopModalAsync();
+        }
+
+        /// <inheritdoc />
+        protected override bool OnBackButtonPressed()
+        {
+            if (CancelCommand.CanExecute(null))
+            {
+                CancelCommand.Execute(null);
+                return true;
+            }
+
+            return base.OnBackButtonPressed();
         }
 
         private void SearchBarOnTextChanged(object? sender, TextChangedEventArgs e)
@@ -264,6 +256,11 @@ private void OnSearchModeChanged()
                 ReturnType.Search;
         }
 
+        private void OnScrollableHeaderChanged()
+        {
+            m_resultCollectionView.Header = ScrollableHeader;
+        }
+
         private void OnFooterViewChanged()
         {
             if (m_footerView is not null)