[iOS/Catalyst] Fix Shell TitleView rendering issues on iOS 16 (#1283… (…

…#14370) * [iOS/Catalyst] Fix Shell TitleView rendering issues on iOS 16 (#12834) Fixes #10128 Fixes #11309 * Fix the issue * Added a sample in the Gallery * Added Device Test * Fix test * Update src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellPageRendererTracker.cs Co-authored-by: Manuel de la Pena <mandel@microsoft.com> --------- Co-authored-by: Rui Marinho <me@ruimarinho.net> Co-authored-by: Manuel de la Pena <mandel@microsoft.com> # Conflicts: # src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellPageRendererTracker.cs # src/Controls/tests/DeviceTests/Elements/Shell/ShellTests.iOS.cs * - add additional call to UpdateFrame
dotnet · Apr 4, 2023 · 572087a · 572087a
1 parent 1d60a27
commit 572087a
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 3 deletions.
diff --git a/src/Controls/samples/Controls.Sample/Pages/AppShell.xaml b/src/Controls/samples/Controls.Sample/Pages/AppShell.xaml
@@ -6,8 +6,36 @@
     xmlns:pages="using:Maui.Controls.Sample.Pages"
     xmlns:shellPages="clr-namespace:Maui.Controls.Sample.Pages.ShellGalleries"
     FlyoutBackground="{AppThemeBinding Dark=Black, Light=White}"
-    Title="Welcome to Shell"
-    >
+    Title="{Binding ShellTitle}">
+    <Shell.TitleView>
+        <Grid
+            BackgroundColor="Red"
+            VerticalOptions="Center"
+            HeightRequest="44">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Label 
+                FontSize="Large"
+                FontAttributes="Bold"
+                HorizontalTextAlignment="Center"
+                VerticalTextAlignment="Center"
+                Text="TitleView" />
+            <HorizontalStackLayout
+                Grid.Column="1"
+                Padding="6">
+                <Label
+                    FontSize="Small"
+                    HorizontalTextAlignment="Center"
+                    VerticalTextAlignment="Center"
+                    Text="{Binding ShellTitle}"/>
+                <Button
+                    Text="Change TabBar BackgroundColor"
+                    Clicked="OnChangeTabBarBackgroundColor" />
+            </HorizontalStackLayout>
+        </Grid>
+    </Shell.TitleView>
     <Shell.FlyoutHeader>
         <Image Source="dotnet_bot.png"></Image>
     </Shell.FlyoutHeader>

diff --git a/src/Controls/samples/Controls.Sample/Pages/AppShell.xaml.cs b/src/Controls/samples/Controls.Sample/Pages/AppShell.xaml.cs
@@ -12,8 +12,18 @@ public partial class AppShell
 		public AppShell()
 		{
 			InitializeComponent();
+			BindingContext = this;
 			SetTabBarBackgroundColor(this, Color.FromRgba(3, 169, 244, 255));
 		}
+
+		public string ShellTitle { get; set; } = "Welcome to Shell";
+
+		void OnChangeTabBarBackgroundColor(object sender, EventArgs e)
+		{
+			var random = new Random();
+
+			SetTabBarBackgroundColor(this, Color.FromRgb(random.Next(0, 255), random.Next(0, 255), random.Next(0, 255)));
+		}
 	}
 
 	public class PageSearchHandler : SearchHandler

diff --git a/src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellPageRendererTracker.cs b/src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellPageRendererTracker.cs
@@ -1,3 +1,4 @@
+#nullable disable
 using System;
 using System.Collections.Generic;
 using System.Collections.Specialized;
@@ -459,9 +460,28 @@ public override CGRect Frame
 				}
 			}
 
+			public override void LayoutSubviews()
+			{
+				if (OperatingSystem.IsIOSVersionAtLeast(16))
+				{
+					if (Height == null || Height == 0)
+					{
+						UpdateFrame(Superview);
+					}
+				}
+
+				base.LayoutSubviews();
+			}
+
 			public override void WillMoveToSuperview(UIView newSuper)
 			{
-				if (newSuper != null)
+				UpdateFrame(newSuper);
+				base.WillMoveToSuperview(newSuper);
+			}
+
+			void UpdateFrame(UIView newSuper)
+			{
+				if (newSuper is not null && newSuper.Bounds != CGRect.Empty)
 				{
 					if (!(OperatingSystem.IsIOSVersionAtLeast(11) || OperatingSystem.IsTvOSVersionAtLeast(11)))
 						Frame = new CGRect(Frame.X, newSuper.Bounds.Y, Frame.Width, newSuper.Bounds.Height);

diff --git a/src/Controls/src/Core/PublicAPI/net-ios/PublicAPI.Unshipped.txt b/src/Controls/src/Core/PublicAPI/net-ios/PublicAPI.Unshipped.txt
@@ -1,4 +1,5 @@
 #nullable enable
 *REMOVED*override Microsoft.Maui.Controls.RefreshView.MeasureOverride(double widthConstraint, double heightConstraint) -> Microsoft.Maui.Graphics.Size
+override Microsoft.Maui.Controls.Platform.Compatibility.ShellPageRendererTracker.TitleViewContainer.LayoutSubviews() -> void
 override Microsoft.Maui.Controls.View.ChangeVisualState() -> void
 ~override Microsoft.Maui.Controls.Platform.Compatibility.ShellSectionRootRenderer.TraitCollectionDidChange(UIKit.UITraitCollection previousTraitCollection) -> void
diff --git a/src/Controls/src/Core/PublicAPI/net-maccatalyst/PublicAPI.Unshipped.txt b/src/Controls/src/Core/PublicAPI/net-maccatalyst/PublicAPI.Unshipped.txt
@@ -1,4 +1,5 @@
 #nullable enable
 *REMOVED*override Microsoft.Maui.Controls.RefreshView.MeasureOverride(double widthConstraint, double heightConstraint) -> Microsoft.Maui.Graphics.Size
+override Microsoft.Maui.Controls.Platform.Compatibility.ShellPageRendererTracker.TitleViewContainer.LayoutSubviews() -> void
 override Microsoft.Maui.Controls.View.ChangeVisualState() -> void
 ~override Microsoft.Maui.Controls.Platform.Compatibility.ShellSectionRootRenderer.TraitCollectionDidChange(UIKit.UITraitCollection previousTraitCollection) -> void
diff --git a/src/Controls/tests/DeviceTests/Elements/Shell/ShellTests.iOS.cs b/src/Controls/tests/DeviceTests/Elements/Shell/ShellTests.iOS.cs
@@ -4,16 +4,20 @@
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using CoreGraphics;
 using Foundation;
 using Microsoft.Maui.Controls;
 using Microsoft.Maui.Controls.Handlers.Compatibility;
 using Microsoft.Maui.Controls.Platform;
 using Microsoft.Maui.Controls.Platform.Compatibility;
 using Microsoft.Maui.Controls.PlatformConfiguration;
 using Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;
+using Microsoft.Maui.Graphics;
 using Microsoft.Maui.Platform;
 using UIKit;
 using Xunit;
+using UIModalPresentationStyle = Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific.UIModalPresentationStyle;
+using ShellHandler = Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer;
 
 namespace Microsoft.Maui.DeviceTests
 {
@@ -200,6 +204,35 @@ void ShellNavigating(object sender, ShellNavigatingEventArgs e)
 			});
 		}
 
+		[Fact(DisplayName = "TitleView renders correctly")]
+		public async Task TitleViewRendersCorrectly()
+		{
+			SetupBuilder();
+
+			var expected = Colors.Red;
+
+			var shellTitleView = new VerticalStackLayout { BackgroundColor = expected };
+			var titleViewContent = new Label { Text = "TitleView" };
+			shellTitleView.Children.Add(titleViewContent);
+
+			var shell = await CreateShellAsync(shell =>
+			{
+				Shell.SetTitleView(shell, shellTitleView);
+
+				shell.CurrentItem = new ContentPage();
+			});
+
+			await CreateHandlerAndAddToWindow<ShellHandler>(shell, async (handler) =>
+			{
+				await Task.Delay(100);
+				Assert.NotNull(shell.Handler);
+				var platformShellTitleView = shellTitleView.ToPlatform();
+				Assert.Equal(platformShellTitleView, GetTitleView(handler));
+				Assert.NotEqual(platformShellTitleView.Frame, CGRect.Empty);
+				Assert.Equal(platformShellTitleView.BackgroundColor.ToColor(), expected);
+			});
+		}
+
 		async Task TapToSelect(ContentPage page)
 		{
 			var shellContent = page.Parent as ShellContent;