Skip to content

Commit 711e498

Browse files
Vetle444Vetle444
authored
[ContentPage] NavigationPage.BarBackgroundColorProperty and NavigationPage.BarTextColorProperty now properly assigns colors to modal navigation bars, including status bar, back button and toolbar icons. Removed old Android workarounds for modal toolbar coloring. (#869)
1 parent 6ac8f91 commit 711e498

26 files changed

Lines changed: 476 additions & 83 deletions

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
## [59.2.0]
2+
- [ContentPage] `NavigationPage.BarBackgroundColorProperty` and `NavigationPage.BarTextColorProperty` now properly assigns colors to modal navigation bars, including status bar, back button and toolbar icons. Removed old Android workarounds for modal toolbar coloring.
3+
14
## [59.1.4]
25
- [ContextMenu][iOS] Fixed context menu items appearing in reversed order when displayed from a ToolbarButton in BottomToolbar.
36

‎src/app/Playground/MainPage.xaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
>
1212
<dui:ScrollView>
1313
<VerticalStackLayout>
14+
<dui:NavigationListItem Title="Modal nav back test"
15+
Tapped="GoToModalNavigationBarBackNavigationSample" />
1416
<dui:NavigationListItem Title="Vetle"
1517
Tapped="GoToVetle" />
1618
<dui:NavigationListItem Title="Håvard"
@@ -23,6 +25,8 @@
2325
Tapped="GoToCollectionViewTests" />
2426
<dui:NavigationListItem Title="ItemPicker Refresh Repro"
2527
Tapped="GoToItemPickerRefreshRepro" />
28+
<dui:NavigationListItem Title="Navigation bar color"
29+
Tapped="GoToNavigationBarColorSample" />
2630
<dui:Button Text="Tap me"
2731
Clicked="TapMe" />
2832
</VerticalStackLayout>

‎src/app/Playground/MainPage.xaml.cs‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ private void DeviceDisplayOnMainDisplayInfoChanged(object sender, DisplayInfoCha
2121

2222
}
2323

24+
private async void GoToModalNavigationBarBackNavigationSample(object sender, EventArgs e)
25+
{
26+
await Shell.Current.Navigation.PushModalAsync(new NavigationPage(new ModalNavigationBarBackNavigationSample.ModalNavigationBarBackNavigationSample()));
27+
}
28+
2429
private async void GoToVetle(object sender, EventArgs e)
2530
{
2631
var stopWatch = new Stopwatch();
@@ -60,7 +65,7 @@ private async void TapMe(object sender, EventArgs e)
6065
}
6166
}
6267
});
63-
68+
6469
Shell.Current.Items.Clear();
6570
Shell.Current.Items.Add(tabBar);
6671

@@ -86,4 +91,9 @@ private void GoToCollectionViewTests(object sender, EventArgs e)
8691
{
8792
Shell.Current.Navigation.PushAsync(new CollectionViewTests());
8893
}
94+
95+
private async void GoToNavigationBarColorSample(object sender, EventArgs e)
96+
{
97+
await Shell.Current.Navigation.PushModalAsync(new NavigationPage(new NavigationBarColorSample()){BarBackgroundColor = Microsoft.Maui.Graphics.Colors.White, BarTextColor = Microsoft.Maui.Graphics.Colors.White});
98+
}
8999
}

‎src/app/Playground/ModalNavigationBarBackNavigationSample/ModalNavigationBarBackNavigationSample.xaml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
3+
<dui:ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
5+
xmlns:dui="http://dips.com/mobile.ui"
6+
xmlns:local="clr-namespace:Playground.ModalNavigationBarBackNavigationSample"
7+
x:Class="Playground.ModalNavigationBarBackNavigationSample.ModalNavigationBarBackNavigationSample"
8+
x:DataType="local:ModalNavigationBarBackNavigationSampleViewModel"
9+
Title="White navigation bar"
10+
Padding="{dui:Sizes size_4}">
11+
<dui:ContentPage.BindingContext>
12+
<local:ModalNavigationBarBackNavigationSampleViewModel />
13+
</dui:ContentPage.BindingContext>
14+
15+
<dui:ContentPage.ToolbarItems>
16+
<ToolbarItem Text="Close"
17+
Clicked="OnCloseClicked" />
18+
</dui:ContentPage.ToolbarItems>
19+
20+
<dui:ScrollView>
21+
<dui:VerticalStackLayout Spacing="{dui:Sizes size_3}">
22+
<dui:Label Text="White navigation bar"
23+
Style="{dui:Styles Label=SectionHeader}" />
24+
<dui:Label Text="Open the black page, then navigate back. This page should restore the white modal navigation bar."
25+
Style="{dui:Styles Label=UI200}"
26+
TextColor="{dui:Colors color_text_subtle}" />
27+
<Grid HeightRequest="{dui:Sizes size_12}"
28+
BackgroundColor="White" />
29+
<dui:ListItem Title="Open black page"
30+
Subtitle="Back navigation should restore white"
31+
Tapped="OnOpenBlackPageTapped" />
32+
</dui:VerticalStackLayout>
33+
</dui:ScrollView>
34+
</dui:ContentPage>

‎src/app/Playground/ModalNavigationBarBackNavigationSample/ModalNavigationBarBackNavigationSample.xaml.cs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
namespace Playground.ModalNavigationBarBackNavigationSample;
2+
3+
public partial class ModalNavigationBarBackNavigationSample
4+
{
5+
public ModalNavigationBarBackNavigationSample()
6+
{
7+
InitializeComponent();
8+
SetValue(NavigationPage.BarBackgroundColorProperty, Microsoft.Maui.Graphics.Colors.White);
9+
SetValue(NavigationPage.BarTextColorProperty, Microsoft.Maui.Graphics.Colors.Black);
10+
}
11+
12+
private async void OnOpenBlackPageTapped(object sender, EventArgs e)
13+
{
14+
await Navigation.PushAsync(new ModalNavigationBarBackNavigationSecondPage());
15+
}
16+
17+
private async void OnCloseClicked(object sender, EventArgs e)
18+
{
19+
await Navigation.PopModalAsync();
20+
}
21+
}

‎src/app/Playground/ModalNavigationBarBackNavigationSample/ModalNavigationBarBackNavigationSampleViewModel.cs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
using DIPS.Mobile.UI.MVVM;
2+
3+
namespace Playground.ModalNavigationBarBackNavigationSample;
4+
5+
public class ModalNavigationBarBackNavigationSampleViewModel : ViewModel
6+
{
7+
}

‎src/app/Playground/ModalNavigationBarBackNavigationSample/ModalNavigationBarBackNavigationSecondPage.xaml‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
3+
<dui:ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
5+
xmlns:dui="http://dips.com/mobile.ui"
6+
xmlns:local="clr-namespace:Playground.ModalNavigationBarBackNavigationSample"
7+
x:Class="Playground.ModalNavigationBarBackNavigationSample.ModalNavigationBarBackNavigationSecondPage"
8+
x:DataType="local:ModalNavigationBarBackNavigationSampleViewModel"
9+
Title="Black navigation bar"
10+
Padding="{dui:Sizes size_4}">
11+
<dui:ContentPage.BindingContext>
12+
<local:ModalNavigationBarBackNavigationSampleViewModel />
13+
</dui:ContentPage.BindingContext>
14+
15+
<dui:ContentPage.ToolbarItems>
16+
<ToolbarItem Text="Close"
17+
Clicked="OnCloseClicked" />
18+
</dui:ContentPage.ToolbarItems>
19+
20+
<dui:ScrollView>
21+
<dui:VerticalStackLayout Spacing="{dui:Sizes size_3}">
22+
<dui:Label Text="Black navigation bar"
23+
Style="{dui:Styles Label=SectionHeader}" />
24+
<dui:Label Text="Open the red page, then navigate back. This page should restore the black modal navigation bar."
25+
Style="{dui:Styles Label=UI200}"
26+
TextColor="{dui:Colors color_text_subtle}" />
27+
<Grid HeightRequest="{dui:Sizes size_12}"
28+
BackgroundColor="Black" />
29+
<dui:ListItem Title="Open red page"
30+
Subtitle="Back navigation should restore black"
31+
HasBottomDivider="True"
32+
Tapped="OnOpenRedPageTapped" />
33+
<dui:ListItem Title="Back to white page"
34+
Subtitle="Tap to pop this page"
35+
Tapped="OnBackToWhitePageTapped" />
36+
</dui:VerticalStackLayout>
37+
</dui:ScrollView>
38+
</dui:ContentPage>

‎src/app/Playground/ModalNavigationBarBackNavigationSample/ModalNavigationBarBackNavigationSecondPage.xaml.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
namespace Playground.ModalNavigationBarBackNavigationSample;
2+
3+
public partial class ModalNavigationBarBackNavigationSecondPage
4+
{
5+
public ModalNavigationBarBackNavigationSecondPage()
6+
{
7+
InitializeComponent();
8+
SetValue(NavigationPage.BarBackgroundColorProperty, Microsoft.Maui.Graphics.Colors.Black);
9+
SetValue(NavigationPage.BarTextColorProperty, Microsoft.Maui.Graphics.Colors.White);
10+
}
11+
12+
private async void OnBackToWhitePageTapped(object sender, EventArgs e)
13+
{
14+
await Navigation.PopAsync();
15+
}
16+
17+
private async void OnOpenRedPageTapped(object sender, EventArgs e)
18+
{
19+
await Navigation.PushAsync(new ModalNavigationBarBackNavigationThirdPage());
20+
}
21+
22+
private async void OnCloseClicked(object sender, EventArgs e)
23+
{
24+
await Navigation.PopModalAsync();
25+
}
26+
}

‎src/app/Playground/ModalNavigationBarBackNavigationSample/ModalNavigationBarBackNavigationThirdPage.xaml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
3+
<dui:ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
5+
xmlns:dui="http://dips.com/mobile.ui"
6+
xmlns:local="clr-namespace:Playground.ModalNavigationBarBackNavigationSample"
7+
x:Class="Playground.ModalNavigationBarBackNavigationSample.ModalNavigationBarBackNavigationThirdPage"
8+
x:DataType="local:ModalNavigationBarBackNavigationSampleViewModel"
9+
Title="Red navigation bar"
10+
Padding="{dui:Sizes size_4}">
11+
<dui:ContentPage.BindingContext>
12+
<local:ModalNavigationBarBackNavigationSampleViewModel />
13+
</dui:ContentPage.BindingContext>
14+
15+
<dui:ContentPage.ToolbarItems>
16+
<ToolbarItem Text="Close"
17+
Clicked="OnCloseClicked" />
18+
</dui:ContentPage.ToolbarItems>
19+
20+
<dui:ScrollView>
21+
<dui:VerticalStackLayout Spacing="{dui:Sizes size_3}">
22+
<dui:Label Text="Red navigation bar"
23+
Style="{dui:Styles Label=SectionHeader}" />
24+
<dui:Label Text="Navigate back from this page. The black page should become black again."
25+
Style="{dui:Styles Label=UI200}"
26+
TextColor="{dui:Colors color_text_subtle}" />
27+
<Grid HeightRequest="{dui:Sizes size_12}"
28+
BackgroundColor="Red" />
29+
<dui:ListItem Title="Back to black page"
30+
Subtitle="Tap to pop this page"
31+
Tapped="OnBackToBlackPageTapped" />
32+
</dui:VerticalStackLayout>
33+
</dui:ScrollView>
34+
</dui:ContentPage>

‎src/app/Playground/ModalNavigationBarBackNavigationSample/ModalNavigationBarBackNavigationThirdPage.xaml.cs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
namespace Playground.ModalNavigationBarBackNavigationSample;
2+
3+
public partial class ModalNavigationBarBackNavigationThirdPage
4+
{
5+
public ModalNavigationBarBackNavigationThirdPage()
6+
{
7+
InitializeComponent();
8+
SetValue(NavigationPage.BarBackgroundColorProperty, Microsoft.Maui.Graphics.Colors.Red);
9+
SetValue(NavigationPage.BarTextColorProperty, Microsoft.Maui.Graphics.Colors.White);
10+
}
11+
12+
private async void OnBackToBlackPageTapped(object sender, EventArgs e)
13+
{
14+
await Navigation.PopAsync();
15+
}
16+
17+
private async void OnCloseClicked(object sender, EventArgs e)
18+
{
19+
await Navigation.PopModalAsync();
20+
}
21+
}

0 commit comments

Comments
 (0)