[Bug] iOS: Tabview Item does not update width when switching orientation between portrait and landscape

[abhcr]

Description

In iOS (iPhone and iPad), tabview contents does not update their width, height, and position when orientation is switched between portrait and landscape.

Steps to Reproduce

1. Create Tabviews with 2 or more tabview items inside one of the pages in a shell tab.
2. Switch between tabview items in portrait orientation in iOS.
3. Change iOS device orientation to landscape.
4. Now switch between tabview items. The layout will be off.

Expected Behavior

Tabview items should automatically update their layout to match the device orientation changes.

Actual Behavior

Tabview items does not update their layout to match the device orientation changes.

Basic Information

• Version with issue: Xamarin Community Toolkit 1.1.0, Xamarin Forms 5.0.0.2012
• Last known good version: NA
• IDE: Visual Studio for Mac community edition.
• Platform Target Frameworks:
  • iOS: 14.5
  • Affected Devices: iPhone, iPad

Workaround

NA

Reproduction imagery

Reproduce Link: https://github.com/jamesmontemagno/app-peloton/blob/main/src/FitnessApp/Views/ClassesPage.xaml

[AustinAHunter]

I am also experiencing this same issue on the latest version of Xamarin Forms and Toolkit. The only way it works without redeploying is by navigating away and back to the ContentPage with the TabView in the wanted orientation.

[superbeller]

How to fix it?

[vhugogarcia]

I'm experiencing this issue exactly. @jfversluis I'm wondering if there is a workaround for this 👍🏻 .

I'm using XCT version 1.3.0

Thanks in advance.

[jcdup]

Is anyone looking into this or would it be better to look for a different tabview?

[bijington]

A quick investigation points to it likely being the underlying CarouselView that is not resizing its contents correctly after the orientation change.

[jcdup]

Thanks for looking into the problem

[ravi-simrun]

Hi we have the same issue, while rotating the device the tab view messed up and overlapped the content of tabs. it happens in the case of using xamarin community toolkit in ios. it works fine in the case of android. any solution?

[darrenlattin]

Any update on this or workaround?

[yonkahlon]

@darrenlattin I wasn't able to find a workaround. The toolkit is awesome, but for tabs I found Sharpnado.Tabs library to be quite impressive.

https://github.com/roubachof/Sharpnado.Tabs

[darrenlattin]

@darrenlattin I wasn't able to find a workaround. The toolkit is awesome, but for tabs I found Sharpnado.Tabs library to be quite impressive.

https://github.com/roubachof/Sharpnado.Tabs

no worries. i'll have to fix the orientation for now to portrait.

Cheers

[algostax]

Are there any chances this problem will be corrected in near future ? I have to decide - wait for fix or switch to another tabview component ,,,

[bijington]

Are there any chances this problem will be corrected in near future ?

I have to decide - wait for fix or switch to another tabview component ,,,

I would say it's unlikely this is going to get fixed any time soon. Sadly the underlying control appears to be causing these issues so without a big bit of work it won't be fixed.

Of course if someone from the community wanted to take a look that would certainly help 😃

[vhugogarcia]

However, somebody said that the issue is not the tabview but the carouselview control from Xamarin.Forms.

Maybe it is already fixed on the service pack 9. @jfversluis I am wondering if you have heard about a fix for the carousel view resizing when changing from portrait to landscape.

😀

[algostax]

@bijington @vhugogarcia @jfversluis If the carouselview (ios) is responsible for this error I wonder how do people use that very popular component on ios ? Is this connected to this issue: https://github.com/xamarin/Xamarin.Forms/issues/8902 ? (closed but some problems persist ...) I really like xct:TabView which allowed me for extensive customizations of the tabbar. But now my customer requires to have ios and android both portrait and landscape views.

Are there any chances this problem will be corrected in near future ? I have to decide - wait for fix or switch to another tabview component ,,,

[bijington]

@algostax I certainly don't have the bandwidth to look at this issue right now. Would you be able to look at whether CarouselView really is the cause and whether there might be a solution?

[dpuckett]

Is there any update on this problem? We've just come across this, and am looking at needing to implement a completely different tool otherwise, or find a way to fix a single page orientation.

[AustinAHunter]

@dpuckett I personally decided to use Sharpnado.Tabs for my application instead of the toolkit's tabs. There are a bunch of different tab styling options built into Sharpnado and they don't have any problems with orientation changes like the toolkit's do. They take a little bit more work to setup, but a lot more customizable. If you haven't checked them out yet, I'd highly recommend giving them a shot.

[bijington]

@AustinAHunter you beat me to that recommendation 😃 yes sadly we are in an unknown area of getting this issue resolved. There is a lot of time and effort being spent get other things completed.

@dpuckett Sharpnado is a great top ion. That being said if you are happy with limiting to a single orientation that is also a workaround. Of course this might not be ideal though.

[happyfr34k]

More than 2 years later, the bug is still there and the ticket still opened... This means that this great component cannot be used, it's a shame...

[Axel-Schneider]

@happyfr34k @dpuckett

You can solve the TabbedPage problem by overriding TabbedPage's OnSizeAllocated as follows.

public class CustomTabbedPage : TabbedPage
{
   protected override void OnSizeAllocated(double width, double height)
   {
      base.OnSizeAllocated(width, height);
      UpdateChildrenLayout();
   }
}

Use this component instead of Xamarin's TabbedPage.

For the Carousel on iOS, you can override the ios CarouselViewRenderer as follows (I found this code on https://github.com/xamarin/Xamarin.Forms/issues/8902#issuecomment-866623682).

[assembly: ExportRenderer(typeof(CarouselView), typeof(CustomCarouselViewRenderer))]
namespace Project.iOS.Rederers
{
    public class CustomCarouselViewRenderer : CarouselViewRenderer
    {
        private double _width;

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs changedProperty)
        {
            base.OnElementPropertyChanged(sender, changedProperty);
            if (changedProperty.PropertyName != VisualElement.WidthProperty.PropertyName ||
                _width <= 0 ||
                Element.Width <= 0 ||
                // ReSharper disable once CompareOfFloatsByEqualityOperator
                Element.Width == _width)
            {
                _width = Element.Width;
                return;
            }

            Controller.CollectionView.ReloadData();
        }
    }
}

It works for me. Hope this helps 😄