Translucent and Transparent NavigationBar on iOS

src/Controls/samples/Controls.Sample.UITests/Issues/Issue17022.xaml

@@ -0,0 +1,31 @@
+<?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"
+             AutomationId="NavBarTranslucentPage"
+             x:Class="Maui.Controls.Sample.Issues.Issue17022"
+             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls">
+    <VerticalStackLayout>
+        <Button FontSize="12" Text="Push NavigationPage" AutomationId="NewNavigationPageButton" Clicked="NewNavigationPagePressed"/>
+        <Button FontSize="12" Text="Push NavigationPage (transparent)" AutomationId="NewNavigationPageTransparentButton" Clicked="NewNavigationPageTransparentPressed"/>
+        <Button FontSize="12" Text="Push NavigationPage (translucent)" AutomationId="NewNavigationPageTranslucentButton" Clicked="NewNavigationPageTranslucentPressed"/>
+        <Button FontSize="12" Text="Push NavigationPage (transparent and translucent)" AutomationId="NewNavigationPageTransparentTranslucentButton" Clicked="NewNavigationPageTransparentTranslucentPressed"/>
+        <Button FontSize="12" Text="Push NavigationPage (grid SA)" AutomationId="NewNavigationPageGridButton" Clicked="NewNavigationPageGridPressed"/>
+        <Button FontSize="12" Text="Push NavigationPage (transparent and grid SA)" AutomationId="NewNavigationPageGridTransparentButton" Clicked="NewNavigationPageGridTransparentPressed"/>
+        <Button FontSize="12" Text="Push NavigationPage (translucent and grid SA)" AutomationId="NewNavigationPageGridTranslucentButton" Clicked="NewNavigationPageGridTranslucentPressed"/>
+        <Button FontSize="12" Text="Push NavigationPage (transparent, translucent, and grid SA)" AutomationId="NewNavigationPageGridTransparentTranslucentButton" Clicked="NewNavigationPageGridTransparentTranslucentPressed"/>
+
+        <Button FontSize="12" Text="Push FlyoutPage" AutomationId="NewFlyoutPageButton" Clicked="NewFlyoutPagePressed"/>
+        <Button FontSize="12" Text="Push FlyoutPage (transparent)" AutomationId="NewFlyoutPageTransparentButton" Clicked="NewFlyoutPageTransparentPressed"/>
+        <Button FontSize="12" Text="Push FlyoutPage (translucent)" AutomationId="NewFlyoutPageTranslucentButton" Clicked="NewFlyoutPageTranslucentPressed"/>
+        <Button FontSize="12" Text="Push FlyoutPage (transparent and translucent)" AutomationId="NewFlyoutPageTransparentTranslucentButton" Clicked="NewFlyoutPageTransparentTranslucentPressed"/>
+        <Button FontSize="12" Text="Push FlyoutPage (grid SA)" AutomationId="NewFlyoutPageGridButton" Clicked="NewFlyoutPageGridPressed"/>
+        <Button FontSize="12" Text="Push FlyoutPage (transparent and grid SA)" AutomationId="NewFlyoutPageGridTransparentButton" Clicked="NewFlyoutPageGridTransparentPressed"/>
+        <Button FontSize="12" Text="Push FlyoutPage (translucent and grid SA)" AutomationId="NewFlyoutPageGridTranslucentButton" Clicked="NewFlyoutPageGridTranslucentPressed"/>
+        <Button FontSize="12" Text="Push FlyoutPage (transparent, translucent, and grid SA)" AutomationId="NewFlyoutPageGridTransparentTranslucentButton" Clicked="NewFlyoutPageGridTransparentTranslucentPressed"/>
+
+        <Button FontSize="12" Text="Push Semi-Transparent NavigationPage BackgroundColor" AutomationId="SemiTransparentNavigationPageBackgroundColor" Clicked="SemiTransparentNavigationPageBackgroundColorPressed"/>
+        <Button FontSize="12" Text="Push Semi-Transparent NavigationPage Brush" AutomationId="SemiTransparentNavigationPageBrush" Clicked="SemiTransparentNavigationPageBrushPressed"/>
+        <Button FontSize="12" Text="Push Semi-Transparent FlyoutPage BackgroundColor" AutomationId="SemiTransparentFlyoutPageBackgroundColor" Clicked="SemiTransparentFlyoutPageBackgroundColorPressed"/>
+        <Button FontSize="12" Text="Push Semi-Transparent FlyoutPage Brush" AutomationId="SemiTransparentFlyoutPageBrush" Clicked="SemiTransparentFlyoutPageBrushPressed"/>
+    </VerticalStackLayout>
+</ContentPage>

src/Controls/samples/Controls.Sample.UITests/Issues/Issue17022.xaml.cs

@@ -0,0 +1,274 @@
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Controls.Xaml;
+using Microsoft.Maui.Graphics;
+using Microsoft.Maui.Controls.PlatformConfiguration;
+using Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;
+using NavigationPage = Microsoft.Maui.Controls.NavigationPage;
+using FlyoutPage = Microsoft.Maui.Controls.FlyoutPage;
+
+namespace Maui.Controls.Sample.Issues;
+
+[XamlCompilation(XamlCompilationOptions.Compile)]
+[Issue(IssueTracker.Github, 17022, "UINavigationBar is Translucent", PlatformAffected.iOS)]
+public partial class Issue17022 : ContentPage
+{
+	public Issue17022()
+	{
+		InitializeComponent();
+	}
+
+	readonly string _topOfScreenText = "Green boxview should be behind navbar and touching very top of screen.";
+	readonly string _notTopOfScreenText = "Green boxview should NOT be behind navbar and NOT touching very top of screen.";
+
+	async void NewNavigationPagePressed(System.Object sender, System.EventArgs e)
+	{
+		var mainPage = CreateMainPage(true, _notTopOfScreenText);
+		var navPage = new NavigationPage(mainPage);
+		await Navigation.PushModalAsync(navPage);
+	}
+
+	async void NewNavigationPageTransparentPressed(System.Object sender, System.EventArgs e)
+	{
+		var mainPage = CreateMainPage(true, _notTopOfScreenText);
+		var navPage = new NavigationPage(mainPage)
+		{
+			BarBackgroundColor = Colors.Transparent,
+		};
+		await Navigation.PushModalAsync(navPage);
+	}
+
+	async void NewNavigationPageTranslucentPressed(System.Object sender, System.EventArgs e)
+	{
+		var mainPage = CreateMainPage(true, _notTopOfScreenText);
+		var navPage = new NavigationPage(mainPage);
+		navPage.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(navPage);
+	}
+
+	async void NewNavigationPageTransparentTranslucentPressed(System.Object sender, System.EventArgs e)
+	{
+		var mainPage = CreateMainPage(true, _notTopOfScreenText);
+		var navPage = new NavigationPage(mainPage)
+		{
+			BarBackgroundColor = Colors.Transparent,
+		};
+		navPage.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(navPage);
+	}
+
+	async void NewNavigationPageGridPressed(System.Object sender, System.EventArgs e)
+	{
+		var mainPage = CreateMainPage(false, _notTopOfScreenText);
+		var navPage = new NavigationPage(mainPage);
+		await Navigation.PushModalAsync(navPage);
+	}
+
+	async void NewNavigationPageGridTransparentPressed(System.Object sender, System.EventArgs e)
+	{
+		var mainPage = CreateMainPage(false, _notTopOfScreenText);
+		var navPage = new NavigationPage(mainPage)
+		{
+			BarBackgroundColor = Colors.Transparent,
+		};
+		await Navigation.PushModalAsync(navPage);
+	}
+
+	async void NewNavigationPageGridTranslucentPressed(System.Object sender, System.EventArgs e)
+	{
+		var mainPage = CreateMainPage(false, _notTopOfScreenText);
+		var navPage = new NavigationPage(mainPage);
+		navPage.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(navPage);
+	}
+
+	async void NewNavigationPageGridTransparentTranslucentPressed(System.Object sender, System.EventArgs e)
+	{
+		var mainPage = CreateMainPage(false, _topOfScreenText);
+		var navPage = new NavigationPage(mainPage)
+		{
+			BarBackgroundColor = Colors.Transparent,
+		};
+		navPage.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(navPage);
+	}
+
+	async void NewFlyoutPagePressed(System.Object sender, System.EventArgs e)
+	{
+		var detail = new NavigationPage(CreateMainPage(true, _notTopOfScreenText));
+		var flyoutPage = new FlyoutPage()
+		{
+			Flyout = new ContentPage(){Title = "FlyoutPage"},
+			Detail = detail
+		};
+		detail.BarBackgroundColor = Colors.Transparent;
+		detail.On<iOS>().SetHideNavigationBarSeparator(true);
+		detail.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(flyoutPage);
+	}
+
+	async void NewFlyoutPageTransparentPressed(System.Object sender, System.EventArgs e)
+	{
+		var detail = new NavigationPage(CreateMainPage(true, _notTopOfScreenText));
+		var flyoutPage = new FlyoutPage()
+		{
+			Flyout = new ContentPage(){Title = "FlyoutPage"},
+			Detail = detail
+		};
+		detail.BarBackgroundColor = Colors.Transparent;
+		await Navigation.PushModalAsync(flyoutPage);
+	}
+
+	async void NewFlyoutPageTranslucentPressed(System.Object sender, System.EventArgs e)
+	{
+		var detail = new NavigationPage(CreateMainPage(true, _notTopOfScreenText));
+		var flyoutPage = new FlyoutPage()
+		{
+			Flyout = new ContentPage(){Title = "FlyoutPage"},
+			Detail = detail
+		};
+		detail.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(flyoutPage);
+	}
+
+	async void NewFlyoutPageTransparentTranslucentPressed(System.Object sender, System.EventArgs e)
+	{
+		var detail = new NavigationPage(CreateMainPage(true, _notTopOfScreenText));
+		var flyoutPage = new FlyoutPage()
+		{
+			Flyout = new ContentPage(){Title = "FlyoutPage"},
+			Detail = detail
+		};
+		detail.BarBackgroundColor = Colors.Transparent;
+		detail.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(flyoutPage);
+	}
+
+	async void NewFlyoutPageGridPressed(System.Object sender, System.EventArgs e)
+	{
+		var detail = new NavigationPage(CreateMainPage(false, _notTopOfScreenText));
+		var flyoutPage = new FlyoutPage()
+		{
+			Flyout = new ContentPage(){Title = "FlyoutPage"},
+			Detail = detail
+		};
+		await Navigation.PushModalAsync(flyoutPage);
+	}
+
+	async void NewFlyoutPageGridTransparentPressed(System.Object sender, System.EventArgs e)
+	{
+		var detail = new NavigationPage(CreateMainPage(false, _notTopOfScreenText));
+		var flyoutPage = new FlyoutPage()
+		{
+			Flyout = new ContentPage(){Title = "FlyoutPage"},
+			Detail = detail
+		};
+		detail.BarBackgroundColor = Colors.Transparent;
+		await Navigation.PushModalAsync(flyoutPage);
+	}
+
+	async void NewFlyoutPageGridTranslucentPressed(System.Object sender, System.EventArgs e)
+	{
+		var detail = new NavigationPage(CreateMainPage(false, _notTopOfScreenText));
+		var flyoutPage = new FlyoutPage()
+		{
+			Flyout = new ContentPage(){Title = "FlyoutPage"},
+			Detail = detail
+		};
+		detail.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(flyoutPage);
+	}
+	async void NewFlyoutPageGridTransparentTranslucentPressed(System.Object sender, System.EventArgs e)
+	{
+		var detail = new NavigationPage(CreateMainPage(false, _topOfScreenText));
+		var flyoutPage = new FlyoutPage()
+		{
+			Flyout = new ContentPage(){Title = "FlyoutPage"},
+			Detail = detail
+		};
+		detail.BarBackgroundColor = Colors.Transparent;
+		detail.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(flyoutPage);
+	}
+
+		async void SemiTransparentNavigationPageBackgroundColorPressed(System.Object sender, System.EventArgs e)
+	{
+		var mainPage = CreateMainPage(false, _topOfScreenText);
+		var navPage = new NavigationPage(mainPage)
+		{
+			BarBackgroundColor = Color.FromRgba(100, 100, 100, 50),
+		};
+		navPage.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(navPage);
+	}
+
+	async void SemiTransparentNavigationPageBrushPressed(System.Object sender, System.EventArgs e)
+	{
+		var mainPage = CreateMainPage(false, _topOfScreenText);
+		var navPage = new NavigationPage(mainPage)
+		{
+			BarBackground = Color.FromRgba(100, 100, 100, 50),
+		};
+		navPage.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(navPage);
+	}
+
+	async void SemiTransparentFlyoutPageBackgroundColorPressed(System.Object sender, System.EventArgs e)
+	{
+		var detail = new NavigationPage(CreateMainPage(false, _topOfScreenText));
+		var flyoutPage = new FlyoutPage()
+		{
+			Flyout = new ContentPage(){Title = "FlyoutPage"},
+			Detail = detail
+		};
+		detail.BarBackgroundColor = Color.FromRgba(100, 100, 100, 50);
+		detail.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(flyoutPage);
+	}
+
+	async void SemiTransparentFlyoutPageBrushPressed(System.Object sender, System.EventArgs e)
+	{
+		var detail = new NavigationPage(CreateMainPage(false, _topOfScreenText));
+		var flyoutPage = new FlyoutPage()
+		{
+			Flyout = new ContentPage(){Title = "FlyoutPage"},
+			Detail = detail
+		};
+		detail.BarBackground = Color.FromRgba(100, 100, 100, 50);
+		detail.On<iOS>().EnableTranslucentNavigationBar();
+		await Navigation.PushModalAsync(flyoutPage);
+	}
+
+	ContentPage CreateMainPage (bool useSafeArea, string expectedText)
+	{
+		var mainPage = new ContentPage(){
+			AutomationId="PopupMainPage"
+		};
+		var grid = new Grid
+		{
+			RowDefinitions =
+			{
+				new RowDefinition { Height = new Microsoft.Maui.GridLength(1, Microsoft.Maui.GridUnitType.Star) },
+				new RowDefinition { Height = new Microsoft.Maui.GridLength(1, Microsoft.Maui.GridUnitType.Star) },
+				new RowDefinition { Height = new Microsoft.Maui.GridLength(1, Microsoft.Maui.GridUnitType.Star) },
+			},
+		};
+
+		var button = new Button { Text = "Pop Page", AutomationId="PopPageButton" };
+		button.Clicked += PopModalButtonClicked;
+
+		grid.Add (new BoxView { BackgroundColor = Colors.Green, AutomationId="TopBoxView" }, 0, 0 );
+		grid.Add (new Label { TextColor = Colors.Black, Margin= new Microsoft.Maui.Thickness(0,60,0,0), HorizontalTextAlignment = Microsoft.Maui.TextAlignment.Center, Text="Can you see me?" }, 0, 0 );
+		grid.Add (new Label { Text = expectedText }, 0, 1 );
+		grid.Add (button, 0, 2 );
+		grid.IgnoreSafeArea = true;
+
+		mainPage.Content = grid;
+		mainPage.On<iOS>().SetUseSafeArea(useSafeArea);
+		return mainPage;
+	}
+
+	async void PopModalButtonClicked (System.Object sender, System.EventArgs e)
+	{
+		await Navigation.PopModalAsync();
+	}
+}