Custom Shell.TitleView content not positioned correctly on iOS

[ewerspej]

Description

The content of a custom Shell.TitleView is positioned incorrectly. Whatever I do, I cannot center the content, such as a label correctly.

I have the following code where I use a custom font, which works perfectly fine on Android, but on iOS it doesn't:

<Shell.TitleView>
  <HorizontalStackLayout VerticalOptions="Fill">
    <Label
      Text="Welcome to MAUI"
      FontFamily="Strande2"
      TextColor="White"
      VerticalTextAlignment="Center"
      VerticalOptions="CenterAndExpand"
      HeightRequest="50"
      FontSize="Medium" />
  </HorizontalStackLayout>
</Shell.TitleView>

The content is supposed to be vertically centered, so that the title label is displayed normally.

However, on iOS it currently looks like this:

On Android it looks fine:

Steps to Reproduce

1. Create new MAUI project
2. On MainPage, set <Shell.TitleView> with a VerticalStackLayout and a Label inside
3. Set everything like above in the description
4. Observe the incorrect behavior on iOS

Link to public reproduction project repository

https://github.com/ewerspej/maui-samples

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16 (possibly earlier versions, too)

Did you find any workaround?

Update (2023-06-28): There is a workaround provided in the MAUI Fixes and Workarounds package for this particular issue (which I have added to the repro repo).

Relevant log output

n/a

[kofanov]

This issue appears on new iOS devices (without physical Home button). Here is my workaround:

Create custom TitleView class: public class MyTitleView : ContentView {}

Add this method to MyTitleView:

#if IOS
    protected override Size ArrangeOverride(Rect bounds)
    {
        if (bounds.Height == 0)
            bounds.Height = 44;

        return base.ArrangeOverride(bounds);
    }
    #endif

Set TitleView on OnApplyTemplate method of ContentPage:

protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        Shell.SetTitleView(this, new MyTitleView());
    }

[codingL3gend]

@kofanov that worked partially for me but weird behavior seeing the title view disappear when switching to a different tab and coming back. have you noticed the same? testing on iPhone 14 iOS 16.4

[kofanov]

@codingL3gend Yes, I have encountered this problem. There are a lot of problems and "surprises" in MAUI in general. That's why I assign TitleView in OnApplyTemplate method of ContentPage (assign again and again in every single ContentPage!) and MyTitleView looks like:

<ContentView.Resources>
        <Style TargetType="controls:MyTitleView">
            <Setter Property="Title" Value="{Binding Title, Source={RelativeSource AncestorType={Type ContentPage}}}" />
    </ContentView.Resources>
...
<Label Text="{Binding Title}" />

I spent a lot of time and conducted a lot of experiments to find it out. Perhaps the Title property is redundant here, but I use it because I also had to rewrite the entire SearchHandler logic due to a huge number of bugs.

[arahmancsd]

Facing a similar issue with >= iPhone 8

[codingL3gend]

@kofanov i definitely agree with all of the bugs present in Maui. it's been annoying that my UI breaks with just about any update to the framework. i really want to champion this framework and recommend it but the issues have made that a bit challenging. having to put in too many workarounds just to keep the UI stable and across platforms is a chore

[ewerspej]

@kofanov i definitely agree with all of the bugs present in Maui. it's been annoying that my UI breaks with just about any update to the framework. i really want to champion this framework and recommend it but the issues have made that a bit challenging. having to put in too many workarounds just to keep the UI stable and across platforms is a chore

That's the fate of early adopters with many technologies. Although, I do agree that MAUI seems to have been released prematurely. Then again, it's a highly competitive market. I think that Microsoft needs to extend the support for Xamarin.Forms until at least the end of 2024, because it will take some time to address the various issues of MAUI.

However, as a community, we can all help make this framework better. The idea of MAUI is awesome and I'm already in love with all the cool new things, especially the single project and the .NET multi-targeting approach. So let's help make it better by reporting issues, finding workarounds and providing bugfixes.

[arahmancsd]

@sandydunlop I think I found a bit easy way to sort this. It is based on @kofanov solution.

Since I want this to happen on certain pages, so for a demo, I identified those pages from the title and created a dictionary to add the CustomTileView.

However, the rest looks the same. instead of OnApplyTemplate, I used the constructor. My ContentPage inherits from a BaseContentPage

CustomTileView

#if IOS
    protected override Size ArrangeOverride(Rect bounds)
    {
        // It is either zero or 20.x+, but I am ok with 25 here
        if (bounds.Height <= 25)
            bounds.Height = 44;

        return base.ArrangeOverride(bounds);
    }
#endif

and BaseContentPage constructor Shell.SetTitleView(this, new CustomTitleView());

The result

[codingL3gend]

@arahmancsd and it's always consistently there and doesn't disappear on navigations?

[arahmancsd]

@arahmancsd and it's always consistently there and doesn't disappear on navigations?

This is consistent on defined pages, navigating back and forward doesn't have any effect on this issue on my part. However, if you faced inconsistency, you can call InvalidateMeasure() on OnNavigatedTo or OnAppearing

[Dids]

How can issues like this still exist in MAUI? Issues like this absolutely plagued Xamarin.Forms, especially after the whole Shell mess, and sadly it looks like MAUI is still using Shell and still exhibiting the same inconsistency and bugs, with no official word on any fixes, ETAs or even acknowledgements.

It's become increasingly hard to sell XF/MAUI to my clients, and I'm not sure how much longer they can remain patient, while I hack my way around seemingly trivial issues such as this one.

[ewerspej]

For this particular issue there is a (temporary) workaround in the MAUI Fixes and Workarounds NuGet package provided by Shane Neuville from the MAUI team. It's not ideal, but at least it works.

[vinodgangwar]

I am also facing the same issue. On iOS TitleView is shifted little upwards whereas in android it is positioned correctly. iOS android

[LennoxP90]

this issue is in .net8.0 as well

[rezamohamed]

For this particular issue there is a (temporary) workaround in the MAUI Fixes and Workarounds NuGet package provided by Shane Neuville from the MAUI team. It's not ideal, but at least it works.

@ewerspej coming from your blog, but are you able to Center the text in the TitleView Horizontally, or is that a bug as well? I have tried a few different things but have been unable to do so, I am testing on Android for now.

[ewerspej]

@rezamohamed Yes, that should be possible using a Grid, for example:

<Shell.TitleView>
  <Grid>
    <Label
      Text="Welcome to MAUI"
      HorizontalOptions="Center"
      VerticalOptions="Center" />
  </Grid>
</Shell.TitleView>

Generally, this type of question is suitable for Stack Overflow.

[rezamohamed]

Generally, this type of question is suitable for Stack Overflow.

Typically, yes, I have checked SO as well. This appears to be a bug since it doesn't work with Flyouts, so I wanted to check here.

Even with a grid, the text doesn't center align correctly.

[ewerspej]

Even with a grid, the text doesn't center align correctly.

It doesn't align or it doesn't align correctly? Does it align somewhat in the center or is the LayoutOption completely ignored? Which platform?

[leofalcao10]

I tried @ewerspej solution of using “ PureWeen.Maui.FixesAndWorkarounds”. I followed the tutorial on the link but it still doesn’t work on iOS. The top bar get a wrong position, but if I navigate to another page and click on go back button, the position of the top bar fixes.

[ghost]

Hi @ewerspej. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[Zhanglirong-Winnie]

Verified this issue with Visual Studio Enterprise 17.9.0 Preview 2.1. Not repro on iOS platforms with sample project. maui-samples-main.zip