Why in .net maui 10 ios does the SearchBar control not show the correct background color and emits a shadow?

Question

Why in .net maui 10 ios does the SearchBar control not show the correct background color and emits a shadow?

Kurt K 196

When I upgraded an app from .net maui 9.0.81 to 10.0.70, my SearchBar control did not show the correct background color and emitted a shadow.

I did some extensive research into this issue and tried a lot of the suggested workarounds. Nothing fully worked.

The problem also shows up in a .net maui app project generated by Visual Studio 2026, with the sample code included option. On the MainPage I eliminated all the rows from the main grid and added a single row with a SearchBar. I also made the page background white (in Colors.xaml).

Resulting MainPage.xaml subset:


                <ScrollView>
                    <Grid Padding="{StaticResource LayoutPadding}" RowSpacing="{StaticResource LayoutSpacing}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <Grid Grid.Row="0" ColumnDefinitions="*,*">
                            <SearchBar Grid.Column="0"/>
                            <BoxView Grid.Column="1" Color="Red" />
                        </Grid>
                    </Grid>
                </ScrollView>

Resulting MauiProgram.cs subset:


            Microsoft.Maui.Handlers.SearchBarHandler.Mapper.AppendToMapping("CustomSearchBar", (handler, view) =>
            {
#if IOS
                handler.PlatformView.SearchBarStyle = UIKit.UISearchBarStyle.Minimal;
                handler.PlatformView.BackgroundColor = UIKit.UIColor.Red;
                handler.PlatformView.BarTintColor = UIKit.UIColor.Red;
                handler.PlatformView.Translucent = false;
                handler.PlatformView.Opaque = true;
                handler.PlatformView.Layer.BorderWidth = 0;
                handler.PlatformView.Layer.ShadowOpacity = 0;
                handler.PlatformView.BackgroundImage = new UIKit.UIImage();
#endif
            });

Partial Main page snapshot when running app on an iPhone 15, iOS 26.5:

Notice that the background of the search bar on the left is not the same color as on the right, whereas they are both specified as "Red".

Also, if you sample the colors you will see that there is a light gray shadow around the search bar (except on the right) that gradually filters into the white background color.

What is the proper way to eliminate the "darkening" of the background color on the search bar?

If the shadow cannot be eliminated, that is OK. I'm mainly concerned about the search bar background color.

Thank you.

Kurt K 196

Unfortunately the AI answer dated Jun 1, 2026, 5:16 PM did not work. It looks the same as before.

To make the change, I commented out the code that I placed in MauiProgram.cs, and updated the MainPage.xaml as follows:


                <ScrollView>
                    <Grid Padding="{StaticResource LayoutPadding}" RowSpacing="{StaticResource LayoutSpacing}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <Grid Grid.Row="0" ColumnDefinitions="*,*">
                            <SearchBar Grid.Column="0"
                                       ios:SearchBar.SearchBarStyle="Prominent"
                                       BackgroundColor="Red" />
                            <BoxView Grid.Column="1" Color="Red" />
                        </Grid>
                        <!--<Grid Grid.Row="0" ColumnDefinitions="*,*">
                            <SearchBar Grid.Column="0"/>
                            <BoxView Grid.Column="1" Color="Red" />
                        </Grid>-->
                    </Grid>
                </ScrollView>

Can you suggest another thing to try?

Thanks.

2 answers

Your answer

Kurt K 196 Reputation points

2026-06-02T00:43:34.7166667+00:00

Unfortunately the AI answer dated Jun 1, 2026, 5:16 PM did not work. It looks the same as before.

To make the change, I commented out the code that I placed in MauiProgram.cs, and updated the MainPage.xaml as follows:

<ScrollView> <Grid Padding="{StaticResource LayoutPadding}" RowSpacing="{StaticResource LayoutSpacing}"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid Grid.Row="0" ColumnDefinitions="*,*"> <SearchBar Grid.Column="0" ios:SearchBar.SearchBarStyle="Prominent" BackgroundColor="Red" /> <BoxView Grid.Column="1" Color="Red" /> </Grid>  </Grid> </ScrollView>

Can you suggest another thing to try?

Thanks.

Answer 1

In .NET MAUI 10 on iOS, the visual appearance of SearchBar is controlled by the native UISearchBar, including its style and background behavior. The UISearchBarStyle.Minimal style specifically removes the bar background and renders the search field itself as a translucent element, which causes:

The search field color to be composited with the page background, making the color appear lighter/darker than the solid Red used on the surrounding layout.
A subtle shadow/blur around the control as part of the native iOS rendering.

Setting only handler.PlatformView.BackgroundColor and BarTintColor while using UISearchBarStyle.Minimal does not override this compositing behavior, so the search field will not match the solid Red of the BoxView, and the shadow remains.

To get a solid background color that matches the surrounding layout and avoid the translucent effect, configure the iOS-specific SearchBarStyle to a style that has a background instead of Minimal, for example:

<ContentPage
    xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls">
    <Grid>
        <SearchBar
            ios:SearchBar.SearchBarStyle="Prominent"
            BackgroundColor="Red" />
    </Grid>
</ContentPage>

or in C# using the fluent API:

using Microsoft.Maui.Controls.PlatformConfiguration;
using Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;

searchBar.On<iOS>().SetSearchBarStyle(UISearchBarStyle.Prominent);
searchBar.BackgroundColor = Colors.Red;

Prominent and Default styles keep the bar background and avoid the strong translucency of Minimal, so the BackgroundColor applied to the SearchBar will be much closer to the solid Red of the surrounding view, and the perceived “darkening” caused by the translucent overlay is removed.

The subtle shadow is part of the native control’s visual design and is not removed by MAUI APIs; however, switching away from Minimal eliminates the gray halo effect that comes from the translucent blending with the page background.

References:

Answer 2

Hello @Kurt K ,

Thanks for your question.

Instead of setting BackgroundColor directly on the SearchBar, I recommend setting the BackgroundColor on the parent Grid container and letting the SearchBar be transparent - so both the SearchBar side and the BoxView side pull color from the same single source.

I tested this on my side, and it works. You can refer to my example code below:

MauiProgram.cs

using Microsoft.Extensions.Logging;

namespace SearchBarProject;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>();

        Microsoft.Maui.Handlers.SearchBarHandler.Mapper.AppendToMapping("CustomSearchBar", (handler, view) =>
        {
#if IOS
            var searchBar = handler.PlatformView;

            searchBar.SearchBarStyle = UIKit.UISearchBarStyle.Minimal;
            searchBar.BackgroundImage = new UIKit.UIImage();

            var textField = searchBar.SearchTextField;

            if (textField != null)
            {
                foreach (var subview in textField.Subviews)
                {
                    if (subview is UIKit.UIVisualEffectView)
                        subview.RemoveFromSuperview();
                }

                textField.Layer.CornerRadius = 10;
                textField.Layer.MasksToBounds = true;
            }
#endif
        });

        return builder.Build();
    }
}

MainPage.xaml

<?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"
             x:Class="SearchBarProject.MainPage">

    <ScrollView>
        <Grid Padding="20">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid Grid.Row="0"
                  ColumnDefinitions="*,*"
                  BackgroundColor="Red">

                <SearchBar Grid.Column="0" />

                <BoxView Grid.Column="1"
                         BackgroundColor="Transparent" />

            </Grid>
        </Grid>
    </ScrollView>

</ContentPage>

User's image

Please try this and let me know the results. I’d be happy to investigate further if needed.

I hope this addresses your question. If this response was helpful, please consider following the guidance to provide feedback.

Kurt K 196 Reputation points

2026-06-02T18:20:01.7833333+00:00

Dear @Nancy Vo (WICLOUD CORPORATION) ,

Thank you for your work on this! However, looking at your screenshot, it looks like the red color of the SearchBar does not look the same as the red color of the BoxView. The search bar looks like a "darker" red than the pure red on the box. Sampling the colors, the box color is consistently #ff0000, whereas the search bar is approximately #e4-f90000 depending where your take the sample. I do like your idea of using the grid background to make the color setting in one place.

Also, you can see (and color sampling confirms it) that there is a shadow around the search bar. Again, the shadow is less of a concern for me, but ideally I would like to know a solution for that as well.

Share via

Why in .net maui 10 ios does the SearchBar control not show the correct background color and emits a shadow?

2 answers

Your answer