Add TabBarHeight and/or TabBarVisible properties to TabbedPage
- Dominant language
- C#
- Stars
- 23.3k
- Forks
- 2k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 290
Description
### Description
Currently, in .NET MAUI, there is no built-in, cross-platform way to customize the height or toggle the visibility of the TabBar when using a TabbedPage.
Developers frequently need to:
Adjust the tab bar height to match specific UI/UX designs, accommodate custom/larger icons, or increase touch target sizes for accessibility.
Hide the tab bar dynamically (e.g., when navigating deeper into a subview, during full-screen video playback, or when a keyboard appears).
To achieve this today, developers must write complex custom handlers or platform-specific renderers for Android and iOS. This boilerplate code often breaks with OS updates and undermines the "write once, run anywhere" promise of MAUI for common UI tasks.
### Public API Changes
Proposal
Introduce two new bindable properties to TabbedPage:
1. TabBarHeight
```
public static readonly BindableProperty TabBarHeightProperty =
BindableProperty.Create(nameof(TabBarHeight), typeof(double), typeof(TabbedPage), -1d);
public double TabBarHeight
{
get => (double)GetValue(TabBarHeightProperty);
set => SetValue(TabBarHeightProperty, value);
}
```
Default Value: -1d (or double.NaN), falling back to the platform's native default height.
2. TabBarVisible
```
public static readonly BindableProperty TabBarVisibleProperty =
BindableProperty.Create(nameof(TabBarVisible), typeof(bool), typeof(TabbedPage), true);
public bool TabBarVisible
{
get => (bool)GetValue(TabBarVisibleProperty);
set => SetValue(TabBarVisibleProperty, value);
}
```
Default Value: true. Setting it to false should animate or instantly hide the tab bar, reclaiming that screen real estate for the content page.
### Intended Use-Case
C#
```
// Dynamically hiding the tab bar when needed
this.TabBarVisible = false;
// Setting a custom height
this.TabBarHeight = 70;
```
Contributor guide
Research direction
Start by reviewing the existing TabbedPage implementation and its Android and iOS handlers or platform-specific renderers, since the issue identifies those as the current customization points. Define how TabBarHeight and TabBarVisible should behave across platforms, including default sizing, hiding, and content space reclamation, then verify the API and behavior on the affected platforms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- csharp
- Domain
- mobile
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100