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 216

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 216

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.

Answer accepted by question author

Nancy Vo (WICLOUD CORPORATION) 5,700 Microsoft External Staff Moderator

Hi @Kurt K ,

Unfortunately, due to Apple's new iOS 26 Liquid Glass design system, the shadow on the native SearchBar cannot be removed - this is an iOS feature, not a bug. Apple renders this shadow at the system level after all developer code has run, so there is no API or code workaround that can suppress it while still using the native SearchBar control.

If you do not want the shadow, I recommend replacing the native SearchBar with a custom one built from standard MAUI controls (Border + Entry). Since this approach does not use the native iOS UISearchBar underneath, the iOS 26 Liquid Glass effect has nothing to attach to, there is no shadow - now or in future iOS updates.

Thank you.

0 comments

3 additional answers

Your answer

Kurt K 216 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

Hi @Kurt K ,

Thank you for your patience.

Due to Apple’s new iOS 26 Liquid Glass design system, which automatically overrides your SearchBar styling, I recommend opting out of Liquid Glass:

Platform/iOS/Info.plist:

<key>UIDesignRequiresCompatibility</key>
<true/>

You can refer to the following code example:

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;
            textField.BackgroundColor = UIKit.UIColor.White;
#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" BackgroundColor="Transparent"/>
                            <BoxView Grid.Column="1" BackgroundColor="Transparent"/>
                        </Grid>
                    </Grid>
                </ScrollView>

</ContentPage>

I tested this using Digital Color Meter to verify the color values. Both the left and right sections now display RGB (255, 0, 0).

Note: You can change the color of the SearchBar text field by modifying this line in MauiProgram.cs:

textField.BackgroundColor = UIKit.UIColor.White;

User's image

Please test again and let me know the result.

Answer 3

Nancy Vo (WICLOUD CORPORATION) 5,700 Microsoft External Staff Moderator

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 216 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.
Nancy Vo (WICLOUD CORPORATION) 5,700 Reputation points Microsoft External Staff Moderator

2026-06-04T08:12:41.7233333+00:00

Hi @Kurt K ,

I apologize for the delayed response. I have received your sharing regarding the Searchbar issue. I’m not sure if you’ve had a chance to try running my code yet, as I suspect that the highlighted part in my code might be affected by shadowing.

Please share the results, and I'll be happy to help further if needed. Once again, thank you for your patience.
Kurt K 216 Reputation points

2026-06-04T18:18:04.79+00:00

Hi @Nancy Vo (WICLOUD CORPORATION) ,

Thank you; I tried your code. I ran it in Release mode on my iPhone 15 Pro running iOS 26.5. Here is a snapshot of the result:

Ignoring the light red color in the search field area, the left SearchBar side and the right BoxView side still show different "red" colors. Also, there is a shadow around the SearchBar. This result appears to be the same as the screenshot you shared in your June 1 answer.

Is there something else I can try?

Thank you.
Kurt K 216 Reputation points

2026-06-09T23:43:45.1066667+00:00
Hi @Nancy Vo (WICLOUD CORPORATION) ,

Thanks so much for your continued work on this! I tried your suggestions in 2 steps:

Added the UIDesignRequiresCompatibility key setting, and incorporated your MainPage.xaml code into the page. But we commented out all of the MauiProgram.cs Microsoft.Maui.Handlers.SearchBarHandler.Mapper... code after incorporating it.

It worked as you described! However, when looking up the UIDesignRequiresCompatibility setting, I noticed that it says it is a temporary solution, and likely it will only work until the next major revision of iOS comes out. So we should probably bite the bullet now. :)

Then I removed the UIDesignRequiresCompatibility key setting and un-commented your Microsoft.Maui.Handlers.SearchBarHandler.Mapper... code.

The result looks a follows:

The red is darker on the left SearchBar side, and the shadow is still there, as we have seen before. I had been doing some independent experimentation with our production app, and noticed that we could largely eliminate the color difference by adjusting the background color for the SearchBar.

To demonstrate here, I modified this demo app to use the background color (#F7E6F0) of the SearchBar and of the control to the right of it in our production app. The background color settings for the left and right sides now need to be independent. We started with the XAML that you provided, then we added an equal amount (4) to the R, G, and B values for the SearchBar background color. Here is the result (Microsoft.Maui.Handlers.SearchBarHandler... code is the same as you provided):

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" xmlns:pageModels="clr-namespace:MauiSearchBar2.PageModels" xmlns:models="clr-namespace:MauiSearchBar2.Models" xmlns:controls="clr-namespace:MauiSearchBar2.Pages.Controls" xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls" x:Class="MauiSearchBar2.Pages.MainPage" x:DataType="pageModels:MainPageModel" x:Name="OverviewPage"> <ScrollView> <Grid Padding="20" > <Grid.RowDefinitions> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid Grid.Row="0" ColumnDefinitions="*,*" BackgroundColor="#FBEAF4"> <SearchBar Grid.Column="0" BackgroundColor="Transparent"/> <BoxView Grid.Column="1" BackgroundColor="#F7E6F0"/> </Grid> </Grid> </ScrollView> </ContentPage>

The result looks pretty good, at least "good enough", if there is not another solution to the color difference.The SearchBar still emits a shadow. We could live with that, but do know if there is a way to eliminate the shadow?

Thank you!
Kurt K 216 Reputation points

2026-06-10T00:09:18.1033333+00:00

Please excuse the 2 list items both labeled "1.". They should be "1." and "2.", sorry.
Kurt K 216 Reputation points

2026-06-10T04:51:33.3466667+00:00

Hi @Nancy Vo (WICLOUD CORPORATION) ,

Thank you for the final suggestion. That is a good idea; I'll look into that. Thank you for all of your work to help me with this.

Thank you.

Kurt
Nancy Vo (WICLOUD CORPORATION) 5,700 Reputation points Microsoft External Staff Moderator

2026-06-10T06:12:37.7466667+00:00

Hi @Kurt K ,

Thank you for your honest feedback, I’m glad the discussion has been helpful so far.

If any part of the explanation helped address your question, I would greatly appreciate it if you could follow the instructions here. This can help other community members facing similar scenarios.
Bruce (SqlWork.com) 84,086 Reputation points

2026-06-10T14:57:10.4+00:00

It seems like a lot work to make your app look dated. you should be checking apple's current interface guide and try to follow:

https://developer.apple.com/design/human-interface-guidelines/designing-for-ios

navigation and search:

https://developer.apple.com/design/human-interface-guidelines/navigation-and-search
Kurt K 216 Reputation points

2026-06-10T15:46:59.65+00:00

Dear @Bruce (SqlWork.com) ,

Thank you for your advice.
Kurt K 216 Reputation points

2026-06-10T16:02:00.2366667+00:00

Hi @Nancy Vo (WICLOUD CORPORATION) ,

Please convert your comment Jun 9, 2026 9:28 PM to an answer so that I can accept it. It starts out "Unfortunately, due to Apple's new iOS 26 Liquid Glass design system, the shadow on the native SearchBar cannot be removed..."

Thanks you,

Kurt
Nancy Vo (WICLOUD CORPORATION) 5,700 Reputation points Microsoft External Staff Moderator

2026-06-11T02:39:56.2+00:00

Hi @Kurt K ,

I have converted that comment into answer. Thanks for spending time giving feedback.

Share via

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

3 additional answers

Your answer