Shell toolbar customizations

ShanedlerSamples/AppShell.xaml

@@ -3,25 +3,19 @@
     x:Class="ShanedlerSamples.AppShell"
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-    xmlns:local="clr-namespace:ShanedlerSamples"
     xmlns:ios="clr-namespace:Maui.FixesAndWorkarounds.iOSSpecific"
-    ios:ShellAttachedProperties.PrefersLargeTitles="true"
-	xmlns:libary="clr-namespace:Maui.FixesAndWorkarounds">
+    xmlns:libary="clr-namespace:Maui.FixesAndWorkarounds"
+    xmlns:local="clr-namespace:ShanedlerSamples"
+    ios:ShellAttachedProperties.PrefersLargeTitles="true">
 
     <FlyoutItem Title="Page 1">
         <Tab>
 
-            <libary:ShellContentDI
-        Title="Home"
-        ContentTemplate="{DataTemplate local:MainPage}" />
-            <libary:ShellContentDI
-        Title="Home2"
-        ContentTemplate="{DataTemplate local:MainPage}" />
+            <libary:ShellContentDI Title="Home" ContentTemplate="{DataTemplate local:MainPage}" />
+            <libary:ShellContentDI Title="Home2" ContentTemplate="{DataTemplate local:KeyboardPage}" />
         </Tab>
     </FlyoutItem>
     <FlyoutItem Title="Page 2">
-        <libary:ShellContentDI
-        Title="Keyboard"
-        ContentTemplate="{DataTemplate local:KeyboardPage}" />
+        <libary:ShellContentDI Title="Keyboard" ContentTemplate="{DataTemplate local:MainPage}" />
     </FlyoutItem>
 </Shell>

ShanedlerSamples/KeyboardPage.xaml

@@ -1,16 +1,22 @@
 <?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"
-             x:Class="ShanedlerSamples.KeyboardPage"
-             xmlns:local="clr-namespace:Maui.FixesAndWorkarounds"
-             Title="KeyboardPage">
-
+<ContentPage
+    x:Class="ShanedlerSamples.KeyboardPage"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:Maui.FixesAndWorkarounds"
+    xmlns:work="clr-namespace:ShanedlerSamples.Library.Common"
+    Title="KeyboardPage"
+    work:ShellToolbarExtensions.ToolbarBackgroundColor="Yellow">
+
     <ContentPage.Behaviors>
-        <local:KeyboardBehavior></local:KeyboardBehavior>
+        <local:KeyboardBehavior />
     </ContentPage.Behaviors>
     <VerticalStackLayout>
-        <Entry Text="input field" x:Name="inputField"></Entry>
-        <Entry Text="input field" x:Name="firstFocusMe" Loaded="OnEntryLoaded"></Entry>
-        <Button Text="Toggle Keyboard" Clicked="OnToggleKeyboard"></Button>
+        <Entry x:Name="inputField" Text="input field" />
+        <Entry
+            x:Name="firstFocusMe"
+            Loaded="OnEntryLoaded"
+            Text="input field" />
+        <Button Clicked="OnToggleKeyboard" Text="Toggle Keyboard" />
     </VerticalStackLayout>
 </ContentPage>

ShanedlerSamples/Library/Common/HostExtensions.cs

@@ -1,5 +1,6 @@
 using Microsoft.Maui.Controls;
 using Microsoft.Maui.Handlers;
+using ShanedlerSamples.Library.Common;
 using System;
 using System.Collections.Generic;
 using System.Linq;
@@ -71,6 +72,7 @@ public static MauiAppBuilder ConfigureMauiWorkarounds(this MauiAppBuilder builde
 
 		public static MauiAppBuilder ConfigureMauiWorkarounds(this MauiAppBuilder builder, bool addAllWorkaround)
 		{
+			ShellToolbarExtensions.Init();
 			builder.ConfigureMauiHandlers(handlers =>
 			{
 #if ANDROID

ShanedlerSamples/Library/Common/ShellExtensions.cs

@@ -0,0 +1,113 @@
+using Microsoft.Maui.Handlers;
+
+namespace ShanedlerSamples.Library.Common;
+public static partial class ShellToolbarExtensions
+{
+    public static readonly BindableProperty ToolbarBackgroundColorProperty =
+       BindableProperty.Create("ToolbarBackgroundColor", typeof(Color), typeof(Shell), null, propertyChanged: OnBackgroundColorChanged);
+
+
+
+    static bool TryGetToolbar(Shell shell, out Toolbar toolbar)
+    {
+        toolbar = null;
+        if (((IToolbarElement)shell).Toolbar is not Toolbar tb)
+            return false;
+
+        toolbar = tb;
+        return true;
+    }
+
+    static void OnBackgroundColorChanged(BindableObject bindable, object oldValue, object newValue)
+    {
+        var shell = Shell.Current;
+
+        if (!shell.IsLoaded)
+        {
+            shell.Loaded += OnShellLoaded;
+
+            void OnShellLoaded(object sender, EventArgs e)
+            {
+                var shell = (Shell)sender;
+                shell.Loaded -= OnShellLoaded;
+
+                if (!TryGetToolbar(shell, out var toolbar))
+                    return;
+
+                toolbar.BarBackground = (Color)newValue;
+
+                shell.Navigated += OnShellNavigated;
+            }
+
+            return;
+        }
+
+
+        if (!TryGetToolbar(shell, out var toolbar))
+            return;
+
+        toolbar.BarBackground = (Color)newValue;
+    }
+
+    static void OnShellNavigated(object sender, ShellNavigatedEventArgs e)
+    {
+        var shell = (Shell)sender;
+        if (!TryGetToolbar(shell, out var toolbar))
+            return;
+
+        toolbar.Handler.UpdateValue("ToolbarBackgroundColor");
+    }
+
+    public static Color GetToolbarBackgroundColor(BindableObject element)
+    {
+        return (Color)element.GetValue(ToolbarBackgroundColorProperty);
+    }
+
+    public static void SetToolbarBackgroundColor(BindableObject element, Color value)
+    {
+        element.SetValue(ToolbarBackgroundColorProperty, value);
+    }
+
+    internal static void Init()
+    {
+        ToolbarHandler.Mapper.Add("ToolbarBackgroundColor", OnValueChanged);
+        // (h, v) =>
+        //{
+        //#if WINDOWS
+        //			((Toolbar)v).BarBackground = Colors.Fuchsia;
+        //#endif
+        //#if ANDROID
+        //			var materialToolbar = h.PlatformView;
+        //			materialToolbar.SetBackgroundColor(Colors.Fuchsia.ToPlatform());
+        //			materialToolbar.TextAlignment = Android.Views.TextAlignment.TextStart;
+        //			var p = materialToolbar.Title;
+        //			var z = materialToolbar.TitleFormatted;
+        //#endif
+        //});
+
+        ToolbarHandler.Mapper.AppendToMapping("Title", (h, v) =>
+        {
+            OnValueChanged(h, v);
+        });
+    }
+
+    static async void OnValueChanged(IToolbarHandler handler, IToolbar toolbar)
+    {
+        var currentPage = Shell.Current.CurrentPage;
+
+        if (currentPage is null)
+        {
+            return;
+        }
+
+        var color = GetToolbarBackgroundColor(currentPage);
+
+        if (color is null || toolbar is not Toolbar tb)
+        {
+            return;
+        }
+
+        await Task.Delay(50);
+        tb.BarBackground = color;
+    }
+}

ShanedlerSamples/MainPage.xaml

@@ -1,57 +1,65 @@
 <?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"
-             x:Class="ShanedlerSamples.MainPage"
-             xmlns:local="clr-namespace:Maui.FixesAndWorkarounds"
-             Title="First Page"
-             >
+<ContentPage
+    x:Class="ShanedlerSamples.MainPage"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:Maui.FixesAndWorkarounds"
+    xmlns:work="clr-namespace:ShanedlerSamples.Library.Common"
+    Title="First Page"
+    work:ShellToolbarExtensions.ToolbarBackgroundColor="Red">
     <ContentPage.Behaviors>
-        <local:KeyboardBehavior></local:KeyboardBehavior>
+        <local:KeyboardBehavior />
     </ContentPage.Behaviors>
     <ScrollView>
         <VerticalStackLayout
-            Spacing="25"
             Padding="30,0"
+            Spacing="25"
             VerticalOptions="Center">
 
             <Image
-                Source="dotnet_bot.png"
-                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                 HeightRequest="200"
-                HorizontalOptions="Center" />
+                HorizontalOptions="Center"
+                SemanticProperties.Description="Cute dot net bot waving hi to you!"
+                Source="dotnet_bot.png" />
 
             <Label
-                Text="Hello, World!"
-                SemanticProperties.HeadingLevel="Level1"
                 FontSize="32"
-                HorizontalOptions="Center" />
+                HorizontalOptions="Center"
+                SemanticProperties.HeadingLevel="Level1"
+                Text="Hello, World!" />
 
             <Label
-                Text="Welcome to .NET Multi-platform App UI"
-                SemanticProperties.HeadingLevel="Level2"
-                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                 FontSize="18"
-                HorizontalOptions="Center" />
+                HorizontalOptions="Center"
+                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
+                SemanticProperties.HeadingLevel="Level2"
+                Text="Welcome to .NET Multi-platform App UI" />
 
-            <Entry Placeholder="Text Field" Text="Starting text" WidthRequest="300">
+            <Entry
+                Placeholder="Text Field"
+                Text="Starting text"
+                WidthRequest="300">
                 <Entry.Behaviors>
-                    <local:TapToCloseBehavior></local:TapToCloseBehavior>
+                    <local:TapToCloseBehavior />
                 </Entry.Behaviors>
 
             </Entry>
 
-            <Entry Placeholder="Text Field" Text="Starting text" WidthRequest="300">
+            <Entry
+                Placeholder="Text Field"
+                Text="Starting text"
+                WidthRequest="300">
                 <Entry.Behaviors>
-                    <local:TapToCloseBehavior></local:TapToCloseBehavior>
+                    <local:TapToCloseBehavior />
                 </Entry.Behaviors>
 
             </Entry>
             <Button
                 x:Name="CounterBtn"
-                Text="Click to change the LargetTitle property"
-                SemanticProperties.Hint="Counts the number of times you click"
                 Clicked="OnCounterClicked"
-                HorizontalOptions="Center" />
+                HorizontalOptions="Center"
+                SemanticProperties.Hint="Counts the number of times you click"
+                Text="Click to change the LargetTitle property" />
 
         </VerticalStackLayout>
     </ScrollView>

ShanedlerSamples/MainPage.xaml.cs

@@ -1,4 +1,5 @@
 using Microsoft.Maui.Controls.Platform.Compatibility;
+using ShanedlerSamples.Library.Common;
 
 namespace ShanedlerSamples;
 
@@ -26,6 +27,13 @@ private void OnCounterClicked(object sender, EventArgs e)
         Maui.FixesAndWorkarounds.iOSSpecific.ShellAttachedProperties.SetPrefersLargeTitles(Shell.Current, flag);
 #endif
 		SemanticScreenReader.Announce(CounterBtn.Text);
+
+
+		var color = ShellToolbarExtensions.GetToolbarBackgroundColor(this);
+
+		color = Colors.Red == color ? Colors.Blue : Colors.Red;
+
+		ShellToolbarExtensions.SetToolbarBackgroundColor(this, color);
 	}
 }
 

ShanedlerSamples/MauiProgram.cs

@@ -1,7 +1,6 @@
 using Maui.FixesAndWorkarounds;
-using Microsoft.Extensions.DependencyInjection;
-using Microsoft.Maui.Hosting;
-using System.Diagnostics.CodeAnalysis;
+using Microsoft.Maui.Handlers;
+using Microsoft.Maui.Platform;
 
 namespace ShanedlerSamples;
 
@@ -21,6 +20,20 @@ public static MauiApp CreateMauiApp()
 
 		builder.Services.AddTransient<MainPage>();
 
+//		ToolbarHandler.Mapper.AppendToMapping(nameof(Toolbar.BarBackground), (h, v) =>
+//		{
+//#if WINDOWS
+//			((Toolbar)v).BarBackground = Colors.Fuchsia;
+//#endif
+//#if ANDROID
+//			var materialToolbar = h.PlatformView;
+//			materialToolbar.SetBackgroundColor(Colors.Fuchsia.ToPlatform());
+//			materialToolbar.TextAlignment = Android.Views.TextAlignment.TextStart;
+//			var p = materialToolbar.Title;
+//			var z = materialToolbar.TitleFormatted;
+//#endif
+//		});
+
 		return builder.Build();
 	}
 }