Xamarin and Maui shell tabs not rendering correctly on ios 16.3

Question

Xamarin and Maui shell tabs not rendering correctly on ios 16.3

Phil 166

Hi there

I have a xamarin app that uses shell navigation with some navigation tabs, and a tab bar (multiple tabs on the top and bottom).

The application works as expected on android.

On iOS if the user rotates from portrait to landscape and then back to portrait, all tabs at the top after the first one don't appear.

I have raised a bug on the xamarin issues page with some screenshots and further details:

https://github.com/xamarin/Xamarin.Forms/issues/15684

I have tried this on both physical and virtual devices with the same results.

I put a breakpoint in the code below. When debugging I could see that the shell had the correct number of children etc.

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height); //must be called
}

I was hoping there might be a work around by using a custom tab renderer on ios (it works for android).

I am unsure how to do this for iOS however.

I am hoping I might be able to remove and then redraw the tabs or change the visibility on and off etc to see if I can get the tabs to appear.

Any pointers or ideas on how best to achieve this would be greatly appreciated, or any other possible workarounds.

An additional note:

The tabs always display correctly when first loaded and when in landscape. It only seems to be when rotating from landscape to portrait.

I have also created a new Maui app with the same tab layout and it has the same issue.

Many thanks

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-02-15T09:29:18.9633333+00:00

May I ask which page did you override the OnSizeAllocated method?
I reproduced the issue with your code, you can follow the progress at GitHub. And there is not a workaround for now.
Phil 166 Reputation points

2023-02-15T10:11:24.8166667+00:00

I added the size check code on the AppShell.xaml.cs.

After the constructor (in xamarin forms, I haven't tried it with Maui).
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-02-16T09:47:42.19+00:00

I create an empty project (with Shell template), and tested Bottom and top tabs function, the issue only occurs on iOS 16.0 and above (it works on iOS 15.4 device). I have to say, there is no alternative even I try ShellItemRenderer , and you have created an issue at GitHub, please follow the progress.

1 answer

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-02-15T09:29:18.9633333+00:00

May I ask which page did you override the OnSizeAllocated method?
I reproduced the issue with your code, you can follow the progress at GitHub. And there is not a workaround for now.
Phil 166 Reputation points

2023-02-15T10:11:24.8166667+00:00

I added the size check code on the AppShell.xaml.cs.

After the constructor (in xamarin forms, I haven't tried it with Maui).
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-02-16T09:47:42.19+00:00

I create an empty project (with Shell template), and tested Bottom and top tabs function, the issue only occurs on iOS 16.0 and above (it works on iOS 15.4 device). I have to say, there is no alternative even I try ShellItemRenderer , and you have created an issue at GitHub, please follow the progress.

Answer 1

Phil 166

A fix for this has been created for Maui with this item. https://github.com/dotnet/maui/commit/13893ac2a1e8edf9f45b4a1a0faedab5b75dc9b9#diff-ff57f6c039d607e63f623a90b9dd5533ae450fb084eaae358dcceaef09a5d62d I am looking at trying to re-implement the fix for Xamarin. Obviously there are differences with handlers in Maui and how the rendering occurs. I am not very familiar with MAUI any help translating this fix to Xamarin would be appreciated. If I manage to get a fix working I'll post here also.

Phil 166 Reputation points

2023-04-06T15:08:15.1+00:00

I have followed this from, stackoverflow and it is proving successful at drawing the tabs. https://stackoverflow.com/questions/63202507/how-do-you-access-the-top-tab-toolbar-for-ios-on-shell-pages The tabs however are showing the first 4 letters and then ... it is also missing the tabs at the highlights at the bottom of the tabs and the text is not quite cantered correctly. I feel like this might be along the correct lines to solve it but it will need the correct default styling applied.

Phil 166

I am still doing some testing but this code seems to be working currently. I will put this up for anyone else to see



using System;
using CoreGraphics;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(myApp.AppShell), typeof(myApp.iOS.Renderers.TabbedShellRenderer))]
namespace myApp.iOS.Renderers
{
    public class TabbedShellRenderer : ShellRenderer
    {

        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            var shellSectionRenderer = new TabbedShellSectionRenderer(this);
            return shellSectionRenderer;
        }
    }

    public class TabbedShellSectionRenderer : ShellSectionRenderer
    {
        public TabbedShellSectionRenderer(IShellContext context) : base(context)
        {

        }

        protected override IShellSectionRootRenderer CreateShellSectionRootRenderer(ShellSection shellSection, IShellContext shellContext)
        {
            var renderer = new TabbedShellSectionRootRenderer(shellSection, shellContext);
            return renderer;
        }

    }

    public class TabbedShellSectionRootRenderer : ShellSectionRootRenderer
    {
        public TabbedShellSectionRootRenderer(ShellSection section, IShellContext context) : base(section, context)
        {

        }

        protected override IShellSectionRootHeader CreateShellSectionRootHeader(IShellContext shellContext)
        {
            var renderer = new TabbedShellSectionRootHeader(shellContext);
            return renderer;
        }
    }

    public class TabbedShellSectionRootHeader : ShellSectionRootHeader
    {
        public TabbedShellSectionRootHeader(IShellContext context) : base(context)
        {

        }

        public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
        {
            var cell = base.GetCell(collectionView, indexPath) as ShellSectionHeaderCell;

            var cellSize = cell.GetFrame();
            var layout = new UICollectionViewFlowLayout();

            layout.ItemSize = cellSize.Size;

            collectionView.CollectionViewLayout = layout;
            

            return cell;
        }
    }

    public class CustomUICollectionViewFlowLayout : UICollectionViewFlowLayout
    {
        public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect(CGRect rect)
        {
            return base.LayoutAttributesForElementsInRect(rect);
        }
    }
}

Phil 166

This is some code I have for a custom renderer that seems to fix the ios issue. I used this from stack overflow as a guide: https://stackoverflow.com/questions/63202507/how-do-you-access-the-top-tab-toolbar-for-ios-on-shell-pages I have done a quick test on ipad and iphone and it seems to render the tabs correctly on ios 16.

using System;
using CoreGraphics;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(myApp.AppShell), typeof(myApp.iOS.Renderers.TabbedShellRenderer))]
namespace myApp.iOS.Renderers
{
public class TabbedShellRenderer : ShellRenderer
{

    protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
    {
        var shellSectionRenderer = new TabbedShellSectionRenderer(this);
        return shellSectionRenderer;
    }
}

public class TabbedShellSectionRenderer : ShellSectionRenderer
{
    public TabbedShellSectionRenderer(IShellContext context) : base(context)
    {

    }

    protected override IShellSectionRootRenderer CreateShellSectionRootRenderer(ShellSection shellSection, IShellContext shellContext)
    {
        var renderer = new TabbedShellSectionRootRenderer(shellSection, shellContext);
        return renderer;
    }

}

public class TabbedShellSectionRootRenderer : ShellSectionRootRenderer
{
    public TabbedShellSectionRootRenderer(ShellSection section, IShellContext context) : base(section, context)
    {

    }

    protected override IShellSectionRootHeader CreateShellSectionRootHeader(IShellContext shellContext)
    {
        var renderer = new TabbedShellSectionRootHeader(shellContext);
        return renderer;
    }
}

public class TabbedShellSectionRootHeader : ShellSectionRootHeader
{
    public TabbedShellSectionRootHeader(IShellContext context) : base(context)
    {

    }

    public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
    {
        var cell = base.GetCell(collectionView, indexPath) as ShellSectionHeaderCell;

        var cellSize = cell.GetFrame();
        var layout = new UICollectionViewFlowLayout();

        layout.ItemSize = cellSize.Size;

        collectionView.CollectionViewLayout = layout;
        

        return cell;
    }
}

public class CustomUICollectionViewFlowLayout : UICollectionViewFlowLayout
{
    public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect(CGRect rect)
    {
        return base.LayoutAttributesForElementsInRect(rect);
    }
}
}

Share via

Xamarin and Maui shell tabs not rendering correctly on ios 16.3

1 answer

Your answer