Update a tabbar with gradient on app theme change

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()

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

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>

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();
+ }
+ }
+}

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