[Bug] [UWP] SearchBar BackgroundColor not used, always transparent

[bmacombe]

Description

UWP search bar does not honor background-color property.

Steps to Reproduce

Set the background color on a search bar and view in a UWP app.

Expected Behavior

Uses the color set in the SearchBar BackgroundColor property

Actual Behavior

Appears to be transparent

Basic Information

• Version with issue: 4.8.0.1364
• Last known good version: Not sure
• IDE: VS19
• Platform Target Frameworks:
  • UWP:

Screenshots

Search bar background should be red.

Android works fine

UWP always transparent

Reproduction Link

https://github.com/bmacombe/UwpSearchBarTest

[bmacombe]

I'll look into this and likely submit a PR, just wanted to get it logged

[bmacombe]

It appears it's only when it has focus that the background color is always transparent.

[bmacombe]

I think I might have to do with the dark mode support in 6ed7472

[bmacombe]

I think the dark mode settings is overriding a user set background color. Not sure what the best fix is here.

[bmacombe]

I've fixed this with a custom renderer in my app for now, I'm not sure what the best long term fix is for XF. All I'm doing is setting the embedded FormsTextBox BackgroundFocusBrush property to be the same as the Background for now.

[jlf0dev]

I've fixed this with a custom renderer in my app for now, I'm not sure what the best long term fix is for XF. All I'm doing is setting the embedded FormsTextBox BackgroundFocusBrush property to be the same as the Background for now.

@bmacombe could you provide an example of your workaround for this?

[bmacombe]

@jlf0dev Here you go, I don't remember how or why I did it :)

using AS.Mobile.Common.UI;
using AS.Mobile.Common.UWP.CustomRenderers;
using Windows.UI.Xaml;
using Xamarin.Forms.Platform.UWP;
using VisualTreeHelper = Windows.UI.Xaml.Media.VisualTreeHelper;

[assembly: ExportRenderer(typeof(AdvSearchBar), typeof(AdvSearchBarRenderer))]
namespace AS.Mobile.Common.UWP.CustomRenderers
{
	public class AdvSearchBarRenderer : SearchBarRenderer
	{
		private FormsTextBox _queryTextBox;

		protected override void UpdateBackgroundColor()
		{
			base.UpdateBackgroundColor();

			// Handle focus color
			T GetFirstDescendant<T>(DependencyObject element) where T : FrameworkElement
			{
				var count = VisualTreeHelper.GetChildrenCount(element);
				for (var i = 0; i < count; i++)
				{
					var child = VisualTreeHelper.GetChild(element, i);

					var target = child as T ?? GetFirstDescendant<T>(child);
					if (target != null)
						return target;
				}

				return null;
			}

			if (_queryTextBox == null)
				_queryTextBox = GetFirstDescendant<FormsTextBox>(Control);

			if (_queryTextBox == null)
				return;

			var backgroundColor = Element.BackgroundColor;

			if (!backgroundColor.IsDefault)
				_queryTextBox.BackgroundFocusBrush = _queryTextBox.Background;
			else
				_queryTextBox.ClearValue(FormsTextBox.BackgroundFocusBrushProperty);
		}

		// TODO override background when XF >= 4.8
	}
}