Skip to content

Commit

Permalink
Translucent and Transparent NavigationBar on iOS (#19204)
Browse files Browse the repository at this point in the history 
* Changes for enabling translucent navigation bar ios

* Add UITest for NavigationPage Safe Area Translucence

* remove UIKit

* Move UITest from gallery to Issues

* push a new page for UITests, consolidate code, and save shadowimage

* Changes for enabling translucent navigation bar ios

* Add UITest for NavigationPage Safe Area Translucence

* remove UIKit

* Move UITest from gallery to Issues

* make the extension method

* use the background color alpha for translucent

* use same alpha logic for pre ios 15

* accidently added testing comments

* add more UITests for the different NavigationPage and Flyout Page scenarios

* use additionalsafeareainsets for the secondary toolbar

* missing new line

* only run the secondary toolbar offset when we have a secondary toolbar

* use existing childViewControllers

* remove the shadow stuff and simplify the expression with null

* style and fixes from merge conflicts

* standardAppearance and scrolledgeappearance should be kept in

* changes after talking with Shane

* change shell behavior to be more like navrenderer with preiOS13

* move code if we are transparent pre13 shell

* remove new lines

* add screenshot tests

* be able to remove and add secondarybar additionalsafeareas
  • Loading branch information
@tj-devel709
tj-devel709 authored Jan 24, 2024
1 parent ff0aea3 commit cb1ac24
Show file tree
Hide file tree
Showing 12 changed files with 452 additions and 38 deletions.
31 changes: 31 additions & 0 deletions src/Controls/samples/Controls.Sample.UITests/Issues/Issue17022.xaml
View file
Original file line number Diff line number Diff line change
@@ -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>
274 changes: 274 additions & 0 deletions src/Controls/samples/Controls.Sample.UITests/Issues/Issue17022.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -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();
}
}
Loading

0 comments on commit cb1ac24

Please sign in to comment.