dotnet/maui

TabbedPage with WidthRequest and/or HeightRequest fails to render

Open

#5,747 opened on Apr 1, 2022

View on GitHub
 (7 comments) (0 reactions) (0 assignees)C# (1,951 forks)batch import
area-controls-tabbedpagegood first issueplatform/macoss/triageds/verifiedt/bug

Repository metrics

Stars
 (23,245 stars)
PR merge metrics
 (Avg merge 47d 9h) (248 merged PRs in 30d)

Description

Description

If you add a WidthRequest or HeightRequest to a TabbedPage, it does not render correctly.

Without either, it renders as expected:

If you add a WidthRequest, all tabs get crammed into the corner, even if the WidthRequest is wide enough (on iOS, nothing renders):

In addition, the background of the window changes, suggesting a render failure.

If you add a HeightRequest or both, the page becomes blank.

Steps to Reproduce

  1. Create a new MAUI app
  2. Change your MainPage.xaml.cs to inherit from TabbedPage:
namespace MauiTabbedPageBug;

public partial class MainPage : TabbedPage
{
	public MainPage()
	{
		InitializeComponent();
	}
}
  1. Change your MainPage.xaml to a simple tabbed page:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="MauiTabbedPageBug.MainPage"
            BackgroundColor="{DynamicResource SecondaryColor}"
            WidthRequest="640" HeightRequest="480">

    <ContentPage Title="My First Tab" />

    <ContentPage Title="My Second Tab" />

    <ContentPage Title="My Third Tab" />

</TabbedPage>

Remove/add the WidthRequest/HeightRequest attributes.

Version with bug

Preview 14 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, macOS

Affected platform versions

iOS 15.2, macOS 12.3

Did you find any workaround?

No response

Relevant log output

No response

Contributor guide