Update a tabbar with gradient on app theme change

dotnet · Aug 30, 2024 · f8384bb · f8384bb
1 parent c156658
commit f8384bb
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 2 deletions.
diff --git a/src/Controls/src/Core/Compatibility/Handlers/TabbedPage/iOS/TabbedRenderer.cs b/src/Controls/src/Core/Compatibility/Handlers/TabbedPage/iOS/TabbedRenderer.cs
@@ -29,6 +29,8 @@ public class TabbedRenderer : UITabBarController, IPlatformViewHandler
 		UITabBarAppearance _tabBarAppearance;
 		WeakReference<VisualElement> _element;
 
+		Brush _currentBarBackground;
+
 		IMauiContext MauiContext => _mauiContext;
 		public static IPropertyMapper<TabbedPage, TabbedRenderer> Mapper = new PropertyMapper<TabbedPage, TabbedRenderer>(TabbedViewHandler.ViewMapper);
 		public static CommandMapper<TabbedPage, TabbedRenderer> CommandMapper = new CommandMapper<TabbedPage, TabbedRenderer>(TabbedViewHandler.ViewCommandMapper);
@@ -360,9 +362,26 @@ void UpdateBarBackground()
 			if (Tabbed is not TabbedPage tabbed || TabBar == null)
 				return;
 
-			var barBackground = tabbed.BarBackground;
+			if(_currentBarBackground is GradientBrush oldGradientBrush)
+			{
+				oldGradientBrush.Parent = null;
+				oldGradientBrush.InvalidateGradientBrushRequested -= OnBarBackgroundChanged;
+			}
+
+			_currentBarBackground = tabbed.BarBackground;
 
-			TabBar.UpdateBackground(barBackground);
+			if(_currentBarBackground is GradientBrush newGradientBrush)
+			{
+				newGradientBrush.Parent = tabbed;
+				newGradientBrush.InvalidateGradientBrushRequested += OnBarBackgroundChanged;
+			}
+
+			TabBar.UpdateBackground(_currentBarBackground);
+		}
+
+		void OnBarBackgroundChanged(object sender, EventArgs e)
+		{
+			TabBar.UpdateBackground(_currentBarBackground);
 		}
 
 		void UpdateBarTextColor()

diff --git a/src/Controls/src/Core/Platform/Android/TabbedPageManager.cs b/src/Controls/src/Core/Platform/Android/TabbedPageManager.cs
@@ -574,8 +574,30 @@ internal void UpdateBarBackground()
 			if (_currentBarBackground == Element.BarBackground)
 				return;
 
+			if(_currentBarBackground is GradientBrush oldGradientBrush)
+			{
+				oldGradientBrush.Parent = null;
+				oldGradientBrush.InvalidateGradientBrushRequested -= OnBarBackgroundChanged; 
+			}
+
 			_currentBarBackground = Element.BarBackground;
 
+			if(_currentBarBackground is GradientBrush newGradientBrush)
+			{
+				newGradientBrush.Parent = Element;
+				newGradientBrush.InvalidateGradientBrushRequested += OnBarBackgroundChanged; 
+			}
+
+			RefreshBarBackground();
+		}
+
+		void OnBarBackgroundChanged(object sender, EventArgs e)
+		{
+			RefreshBarBackground();
+		}
+
+		void RefreshBarBackground()
+		{
 			if (IsBottomTabPlacement)
 				_bottomNavigationView.UpdateBackground(_currentBarBackground);
 			else

diff --git a/src/Controls/tests/TestCases.HostApp/Issues/Issue24356.xaml b/src/Controls/tests/TestCases.HostApp/Issues/Issue24356.xaml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+       x:Class="Maui.Controls.Sample.Issues.Issue24356"
+       xmlns:ns="clr-namespace:Maui.Controls.Sample.Issues">
+    <TabbedPage.BarBackground>
+        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
+        <GradientStop Color="{AppThemeBinding Light=Red, Dark=Brown}"
+                        Offset="0.0" />
+        <GradientStop Color="{AppThemeBinding Light=White, Dark=Black}"
+                        Offset="0.5" />
+        <GradientStop Color="{AppThemeBinding Light=Red, Dark=Brown}"
+                        Offset="1.0" />
+        </LinearGradientBrush>
+    </TabbedPage.BarBackground>
+    <ContentPage Title="Tab 1">
+        <Grid>
+            <Label IsVisible="{AppThemeBinding Light=True, Dark=False}" AutomationId="lightThemeLabel" Text="Light theme"/>
+            <Label IsVisible="{AppThemeBinding Light=False, Dark=True}" AutomationId="darkThemeLabel" Text="Dark theme"/>
+        </Grid>
+    </ContentPage>
+    <ContentPage Title="Tab 2"/>
+</TabbedPage>
diff --git a/src/Controls/tests/TestCases.HostApp/Issues/Issue24356.xaml.cs b/src/Controls/tests/TestCases.HostApp/Issues/Issue24356.xaml.cs
@@ -0,0 +1,11 @@
+namespace Maui.Controls.Sample.Issues
+{
+	[Issue(IssueTracker.Github, 24356, "AppThemeBinding BarBackground with Brush in TabbedPage not working", PlatformAffected.All)]
+	public partial class Issue24356 : TabbedPage
+	{	
+		public Issue24356()
+		{
+			InitializeComponent();
+		}
+	}
+}
diff --git a/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue24356.cs b/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue24356.cs
@@ -0,0 +1,34 @@
+#if ANDROID || IOS
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues
+{
+	public class Issue24356 : _IssuesUITest
+	{
+		public Issue24356(TestDevice testDevice) : base(testDevice)
+		{
+		}
+
+		public override string Issue => "AppThemeBinding BarBackground with Brush in TabbedPage not working";
+
+		[Test]
+		[Category(UITestCategories.TabbedPage)]
+		public void GradientInTabBarShouldChange()
+		{
+			try 
+			{
+				App.WaitForElement("lightThemeLabel");
+				App.SetDarkTheme();
+				App.WaitForElement("darkThemeLabel");
+				VerifyScreenshot();
+			}
+			finally
+			{
+				App.SetLightTheme();
+			}
+		}
+	}
+}
+#endif