Custom Shell.TitleView content not positioned correctly on iOS

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

Create new MAUI project
On MainPage, set <Shell.TitleView> with a VerticalStackLayout and a Label inside
Set everything like above in the description
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

Issue Analytics

State:
Created 5 months ago
Reactions:2
Comments:11

Top GitHub Comments

1reaction

ewerspejcommented, Jun 28, 2023

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.

1reaction

kofanovcommented, Apr 21, 2023

@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.

Top Results From Across the Web

Xamarin Forms Shell TitleView does not center image

The title view already been placed center in Title View . However , it looks like not center in the whole Navigation Bar...

Why does the .net maui title bar disappear on iOS when ...

When you tap in the search box, the virtual keypad appears, but the shell.titleview disappears. (The same thing happens with the standard title ......

UINavigationItem.titleView layout issue

After updating to IOS 16 I see my custom title view is getting placed in the wrong position on the y axis. My...

Xamarin Forms Shell TitleView does not ... - appsloveworld.com

The title view already been placed center in Title View . However , it looks like not center in the whole Navigation Bar...

Navigation Bar Customization in Xamarin Forms

Hide the Xamarin Forms navigation bar and implementing a custom one using any forms layout. The problem with this approach might be handling...