Port SetTabBarIsVisible To TabbedPage From Shell

[Axemasta]

Description

In Xamarin & Maui Shell we can set the following property Shell.SetTabBarIsVisible(this, true); which will show and hide the TabBar when using Shell.

This feature is Shell only and there is no simple way to perform the same functionality using TabbedPage. The Shell TabBar and TabbedPage will render the same native elements onscreen so it makes sense to back port this Shell functionality to TabbedPage.

I have looked into creating platform handlers for this functionality, it is easily achievable on iOS however on Android it's not possible without an unbelievably cursed reflection based approach since the android TabbedPage uses a mapper that uses an internal class to render the view. It's incredibly hard to actually get access to the BottomNavigationView in order to set it's visibility (unless anyone has any ideas...).

Due to how incredibly hard the handlers would be to implement and based on the precedence that Shell has it (Maui should be accessible to non Shell navigation), I believe porting this feature to TabbedPage out of the box would be the best approach in this situation.

As long as the handlers & renderers stay the same, I would be happy to PR this change.

Public API Changes

Introduce new attached property for TabbedPage:

public static readonly BindableProperty TabBarIsVisibleProperty = BindableProperty.CreateAttached(
    "TabBarIsVisible",
    typeof(bool),
    typeof(TabbedPage),
    true);

public static bool GetTabBarIsVisible(BindableObject obj) => (bool)obj.GetValue(TabBarIsVisibleProperty);

public static void SetTabBarIsVisible(BindableObject obj, bool value) => obj.SetValue(TabBarIsVisibleProperty, value);

Usage:
TabbedPage.SetTabBarIsVisible(this, false); // C#
TabbedPage.SetTabBarIsVisible(this, true); // C#
TabbedPage.SetTabBarIsVisible="False" <!-- XAML -->
TabbedPage.SetTabBarIsVisible="True" <!-- XAML -->

Mapper?
I believe this could be a candidate for a mapper property however looking at the implementations of this specific control, it's probably better to use attached properties. iOS doesn't even use a mapper, it still uses a custom renderer.

Intended Use-Case

Why this feature? Shell has it and it allows developers who don't want to use shell (I much prefer Prism) equal flexibility with customisation in their apps. It gives us the flexibility to use whatever MVVM framework we like and be capable of achieving the same UI results either way.

Workaround

If you want to hide the tab bar today for android and ios, here are the handlers to do it, we're going to piggyback off the shell attached property too!

iOS

Caviat: this won't hide the tab bar for the current page

public class TabBarPageHandler : PageHandler
{
	protected override Microsoft.Maui.Platform.ContentView CreatePlatformView()
	{
		_ = VirtualView ??
		    throw new InvalidOperationException($"{nameof(VirtualView)} must be set to create a LayoutView");
		_ = MauiContext ?? throw new InvalidOperationException($"{nameof(MauiContext)} cannot be null");

		if (ViewController == null)
		{
			var hideTabBar = false;

			if (VirtualView is Page page)
			{
				hideTabBar = !Shell.GetTabBarIsVisible(page);
			}

			ViewController = new HideBottomBarViewController(VirtualView, MauiContext, hideTabBar);
		}

		if (ViewController is PageViewController pc && pc.CurrentPlatformView is Microsoft.Maui.Platform.ContentView pv)
			return pv;

		if (ViewController.View is Microsoft.Maui.Platform.ContentView cv)
			return cv;

		throw new InvalidOperationException(
			$"PageViewController.View must be a {nameof(Microsoft.Maui.Platform.ContentView)}");
	}

	private class HideBottomBarViewController(IView page, IMauiContext mauiContext, bool hideBottomBar)
		: PageViewController(page, mauiContext)
	{
		public override void DidMoveToParentViewController(UIViewController? parent)
		{
			base.DidMoveToParentViewController(parent);

			if (parent is null)
			{
				return;
			}

			// https://github.com/xamarin/Xamarin.Forms/issues/1887#issuecomment-399408816
			parent.HidesBottomBarWhenPushed = hideBottomBar;
		}
	}
}

Register handler on ContentPage:

#if IOS
    handlers.AddHandler<ContentPage, TabBarPageHandler>();
#endif

Android

Caviat: this implementation needs to access internal fields and methods, so if maui change this implementation it will likely break!

internal class TabBarVisibilityPageHandler : TabbedViewHandler
{
	private TabbedPage Element => VirtualView as TabbedPage;

	protected override void ConnectHandler(global::Android.Views.View platformView)
	{
		base.ConnectHandler(platformView);

		if (Element.CurrentPage != null)
		{
			if (Element.IsSet(Shell.TabBarIsVisibleProperty))
			{
				var showTabBar = Shell.GetTabBarIsVisible(Element.CurrentPage);

				SetTabBarVisibility(showTabBar);
			}

			if (Element.CurrentPage is NavigationPage navigationPage)
			{
				navigationPage.PropertyChanged += NavigationPage_PropertyChanged;
			}
		}

		Element.CurrentPageChanged += OnCurrentPageChanged;
	}

	private void NavigationPage_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
	{
		if (e.PropertyName == NavigationPage.CurrentPageProperty.PropertyName && sender is NavigationPage navigationPage)
		{
			// Crawl up the page hierarchy to see if any parents have this set
			var currentPage = navigationPage.CurrentPage;
			var rootPage = navigationPage.RootPage;

			if (currentPage == rootPage)
			{
				var showTabBar = Shell.GetTabBarIsVisible(currentPage);
				SetTabBarVisibility(showTabBar);
				return;
			}

			while (currentPage != rootPage)
			{
				if (currentPage.IsSet(Shell.TabBarIsVisibleProperty))
				{
					var showTabBar = Shell.GetTabBarIsVisible(currentPage);
					SetTabBarVisibility(showTabBar);
					break;
				}
				else
				{
					var currentPageIndex = currentPage.Navigation.NavigationStack.ToList().IndexOf(currentPage);
					currentPage = currentPage.Navigation.NavigationStack[currentPageIndex - 1];
				}
			}

		}
	}

	protected override void DisconnectHandler(Android.Views.View platformView)
	{
		Element.CurrentPageChanged -= OnCurrentPageChanged;

		base.DisconnectHandler(platformView);
	}

	private void OnCurrentPageChanged(object? sender, EventArgs e)
	{
		if (Element.IsSet(Shell.TabBarIsVisibleProperty))
		{
			var showTabBar = Shell.GetTabBarIsVisible(Element.CurrentPage);

			SetTabBarVisibility(showTabBar);
		}

		if (Element.CurrentPage is NavigationPage navigationPage)
		{
			navigationPage.PropertyChanged += NavigationPage_PropertyChanged;
		}
	}

	private void SetTabBarVisibility(bool showTabBar)
	{
		var navBar = GetBottomNavigationView();

		if (navBar is null)
		{
			Trace.WriteLine("Could not get bottom navigation view");
			return;
		}

		if (showTabBar)
		{
			ShowTabBar(navBar);
		}
		else
		{
			HideTabBar(navBar);
		}
	}

	private void ShowTabBar(BottomNavigationView bottomNavigationView)
	{
		bottomNavigationView.Visibility = ViewStates.Visible;

		var margin = Context.Resources.GetDimensionPixelSize(Resource.Dimension.design_bottom_navigation_height);

		SetContentBottomMargin(margin);
	}

	private void HideTabBar(BottomNavigationView bottomNavigationView)
	{
		bottomNavigationView.Visibility = ViewStates.Gone;
		SetContentBottomMargin(0);
	}

	private BottomNavigationView? GetBottomNavigationView()
	{
		try
		{
			var tabbedPageFields = VirtualView.GetType().GetFields(BindingFlags.NonPublic | BindingFlags.Instance);

			var tabbedManagerField = tabbedPageFields.FirstOrDefault(t => t.Name.Equals("_tabbedPageManager"));

			var tabbedPageManager = tabbedManagerField.GetValue(VirtualView); // as Microsoft.Maui.Controls.Handlers.TabbedPageManager; // Inaccessible due to protection level

			var tabbedPageManagerFields = tabbedPageManager.GetType().GetFields(BindingFlags.NonPublic | BindingFlags.Instance);

			var bottomNavigationViewField = tabbedPageManagerFields.FirstOrDefault(t => t.Name.Equals("_bottomNavigationView"));

			var bottomNavigationView = bottomNavigationViewField.GetValue(tabbedPageManager);

			return bottomNavigationView as BottomNavigationView;
		}
		catch (Exception ex)
		{
			Console.WriteLine("Unable to find BottonNavigationView via reflection");
			Console.WriteLine(ex);
			return null;
		}
	}

	private void SetContentBottomMargin(int bottomMargin)
	{
		try
		{
			var tabbedPageFields = VirtualView.GetType().GetFields(BindingFlags.NonPublic | BindingFlags.Instance);

			var tabbedManagerField = tabbedPageFields.FirstOrDefault(t => t.Name.Equals("_tabbedPageManager"));

			var tabbedPageManager = tabbedManagerField.GetValue(VirtualView); // as Microsoft.Maui.Controls.Handlers.TabbedPageManager; // Inaccessible due to protection level

			var tabbedPageManagerMethods = tabbedPageManager.GetType().GetMethods(BindingFlags.NonPublic | BindingFlags.Instance);

			var setContentMethod = tabbedPageManagerMethods.FirstOrDefault(m => m.Name.Equals("SetContentBottomMargin"));

			setContentMethod.Invoke(tabbedPageManager, new object[] { bottomMargin });
		}
		catch (Exception ex)
		{
			Console.WriteLine($"Unable to call SetContentBottomMargin({bottomMargin}) via reflection");
			Console.WriteLine(ex);
		}
	}
}

Register handler on the tabbed page:

#if ANDROID
    handlers.AddHandler<TabbedPage, .TabBarVisibilityPageHandler>();
#endif

[michalpobuta]

@PureWeen @jsuarezruiz
hi guys, are you going to do anything about it, or you are just changing issues into discussions and ignore them?

[Axemasta]

I've posted a workaround to this thread since you can achieve this with handlers, its not productive to flame the devs. I'm actually working on implementing this as a PR into maui so hopefully the devs will discuss once I post the pr.

[michalpobuta]

Hi, tbh reflection is not a solution that I was looking for, but thanks