[iOS] Shell/NavigationPage TitleView #20959

kubaflo · 2024-03-02T15:11:53Z

Fixes #9333
Fixes #19231
Fixes #5063

Current behavior

Layout options have no effect on the title view. The content inside the titleView behaves as it has both HorizontalOptions and VerticalOptions set to Fill. Also, notice that there's a horizontal margin that cannot be removed even with setting the negative values to margin eg. Margin="-20,0" (#19231)

Currently

Proposed behavior #5063

Utilizes our current LayoutOptions to indicate how you want a TitleView to layout on the screen and removes the default horizontal margin so that we can customize it.

<NavigationPage.TitleView>
    <HorizontalStackLayout BackgroundColor="red">
        <Label VerticalOptions="Center" Text="Navigation page's title"/>
        <Image Source="dotnet_bot.png" Scale="0.8"/>
    </HorizontalStackLayout>
</NavigationPage.TitleView>

`Default` - (horizontal and vertical options set to fill implicitly)

`HorizontalOptions="Start"`

`HorizontalOptions="Center"`

`HorizontalOptions="End"`

`VerticalOptions="Start"`

`VerticalOptions="Center"`

`VerticalOptions="End"`

`VerticalOptions="Start"` `HorizontalOptions="Start"`

`VerticalOptions="Center"` `HorizontalOptions="Center"`

`VerticalOptions="End"` `HorizontalOptions="End"`

Remarks

I didn't implement anything that changes the behavior when additional toolbar items are added. For example, if there's a back button the title view places itself to the right of this button. It is because I'm not sure what is the desired behavior. On one hand, it looks weird that when we want to center the title it is moved to the right, but on the other, it is the default iOS's behavior and I believe a future discussion should be made xamarin/Xamarin.Forms#4848

ghost · 2024-03-02T15:11:59Z

Hey there @kubaflo! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

jsuarezruiz · 2024-03-20T16:24:02Z

/azp run MAUI-UITests-public

azure-pipelines · 2024-03-20T16:24:13Z

Azure Pipelines successfully started running 1 pipeline(s).

Pastajello · 2024-03-29T15:37:13Z

Oh my, never knew I'd see a fix from the issue I suffered from 4 years ago in X.F. days! Are there any plans to add it to .net 8 SR 4? (hopefully)

src/Controls/src/Core/Compatibility/Handlers/NavigationPage/iOS/NavigationRenderer.cs

jsuarezruiz · 2024-04-16T11:37:58Z

src/Controls/src/Core/Compatibility/Handlers/NavigationPage/iOS/NavigationRenderer.cs

+				else if (screenWidth >= 414)
+				{
+					// 5.5 inch
+					spacer.Width -= 4;


Have you done tests with 6.1" and 6.7" simulators or devices?

jsuarezruiz · 2024-04-19T10:37:12Z

/azp run

azure-pipelines · 2024-04-19T10:37:33Z

Azure Pipelines successfully started running 3 pipeline(s).

PureWeen

can you retarget this for net9?

kubaflo · 2024-04-30T18:05:16Z

can you retarget this for net9?

Yep, I think it is a good idea

TheXenocide · 2024-05-31T19:36:34Z

can you retarget this for net9?

Yep, I think it is a good idea

Is there no chance we can get this fix in a patch release for .NET 8? Preferably sooner than later? I'm wrestling with this issue at the moment and would really appreciate a fix but we only use LTS versions for production apps.

TheXenocide · 2024-05-31T19:37:48Z

I also can't use this code directly in our app because too many pieces are internal for me to drop this in as a replacement renderer.

nickl-martin · 2024-07-10T01:14:21Z

Will this be fixed sometime soon? We can't change the color of our navigation bar to anything but white without having unsightly gaps on either end.

Felix-Dev · 2024-10-11T09:24:32Z

@kubaflo Any update on this PR? What is blocking progress here?

kubaflo · 2024-10-11T09:33:05Z

Hi, @Felix-Dev it is not up to me what will happen with this pr

rmarinho · 2024-10-25T21:05:52Z

/rebase

Felix-Dev · 2024-11-14T15:59:27Z

@PureWeen What is blocking this PR from being merged? The "requested changes" seems to have been addressed by @kubaflo. We are interested in seeing this change land in MAUI. Thanks!

jbeacham · 2024-11-19T17:04:55Z

This is also affecting us, an app with millions of users being forced to migrate to MAUI. Huge gaps on either end of the nav bar if we try to do any other color. Any update? Any workaround? @PureWeen

jbeacham · 2024-11-19T18:37:04Z

@kubaflo It looks like 2 failing checks. Anything you're familiar with so this can get merged?

kubaflo · 2024-11-19T18:55:03Z

@jbeacham Hi!, It's not up to me when and if PRs get merged, but I will rebase this one and solve conflicts :)

amirvenus · 2024-11-20T08:13:31Z

I seem to have a similar issue on android too

dainius-r · 2024-11-29T23:19:58Z

@kubaflo thanks for PR, have you noticed similar PR for Android, or maybe some workaround?

kubaflo · 2024-11-29T23:45:31Z

@dainius-r @amirvenus regarding the left margin: #20967
When it comes to LayoutOptions, I think they are respected on Android

<NavigationPage.TitleView>
    <HorizontalStackLayout HorizontalOptions="End" BackgroundColor="red">
        <Label VerticalOptions="Center"
                Text="Navigation page's title"/>
        <Image Source="dotnet_bot.png"
                Scale="0.8"/>
    </HorizontalStackLayout>
</NavigationPage.TitleView>

dainius-r · 2024-12-03T23:56:35Z

@kubaflo many thanks, that's my issue I was lookin for #20967

YZahringer · 2025-07-04T06:15:29Z

Any update on this PR? What is blocking progress here?

jfversluis · 2025-08-27T12:30:21Z

/rebase

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

jfversluis · 2025-08-27T12:32:00Z

/azp run MAUI-UITests-public

azure-pipelines · 2025-08-27T12:32:12Z

Azure Pipelines successfully started running 1 pipeline(s).

Added a comment with a link to Apple docs Refactor

kubaflo requested a review from a team as a code owner March 2, 2024 15:11

kubaflo requested review from PureWeen and StephaneDelcroix March 2, 2024 15:11

ghost added the community ✨ Community Contribution label Mar 2, 2024

kubaflo mentioned this pull request Mar 2, 2024

[Spec] Shell/NavigationPage TitleView #5063

Open

kubaflo changed the title ~~[iOS] Shell/NavigationPage TitleView (#5063)~~ [iOS] Shell/NavigationPage TitleView Mar 3, 2024

jsuarezruiz added area-controls-shell Shell Navigation, Routes, Tabs, Flyout area-controls-titleview TitleView labels Mar 4, 2024

idzson approved these changes Apr 3, 2024

View reviewed changes

jsuarezruiz reviewed Apr 16, 2024

View reviewed changes

PureWeen requested changes Apr 30, 2024

View reviewed changes

kubaflo changed the base branch from main to net9.0 April 30, 2024 18:04

carlosxjose mentioned this pull request May 24, 2024

[BUG] ContentPage ToolbarItem Icon not displaying PrismLibrary/Prism#3024

Closed

jsuarezruiz requested a review from PureWeen June 10, 2024 13:44

rmarinho changed the base branch from net9.0 to main October 25, 2024 21:05

kubaflo force-pushed the ios-navigation-bar branch from db33912 to d1fcccc Compare November 19, 2024 18:56

PureWeen added the partner/syncfusion/review label Feb 10, 2025

kubaflo force-pushed the ios-navigation-bar branch from d1fcccc to 8199017 Compare March 8, 2025 02:16

kubaflo self-assigned this Mar 8, 2025

github-actions bot force-pushed the ios-navigation-bar branch from 8199017 to 0724de7 Compare August 27, 2025 12:31

Copilot AI review requested due to automatic review settings August 27, 2025 12:31

Copilot AI reviewed Aug 27, 2025

View reviewed changes

jfversluis added this to the .NET 9 SR11 milestone Aug 28, 2025

jfversluis changed the base branch from main to inflight/current August 28, 2025 13:09

kubaflo added 3 commits August 28, 2025 15:10

[iOS] Shell/NavigationPage TitleView (dotnet#5063)

740fda4

Added a comment with a link to Apple docs

cf41b09

Refactor

123e896

jfversluis force-pushed the ios-navigation-bar branch from 0724de7 to 123e896 Compare August 28, 2025 13:10

jfversluis approved these changes Aug 28, 2025

View reviewed changes

jfversluis merged commit 69d8d2c into dotnet:inflight/current Aug 28, 2025
1 check passed

PureWeen pushed a commit that referenced this pull request Sep 8, 2025

[iOS] Shell/NavigationPage TitleView (#20959)

c5dcfcc

Added a comment with a link to Apple docs Refactor

EmilienDup mentioned this pull request Sep 19, 2025

[iOS] Navigation bar TitleView isn't rendered within the device's bounds. #31688

Closed

sheiksyedm mentioned this pull request Sep 19, 2025

Candidate Branch September 22nd #31681

Merged

kubaflo mentioned this pull request Sep 20, 2025

[iOS] Shell/navigation page title view - respect the margin property #31701

Merged

github-actions bot locked and limited conversation to collaborators Sep 28, 2025

[iOS] Shell/NavigationPage TitleView #20959

[iOS] Shell/NavigationPage TitleView #20959

Uh oh!

Conversation

kubaflo commented Mar 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current behavior

Currently

Proposed behavior #5063

Default - (horizontal and vertical options set to fill implicitly)

HorizontalOptions="Start"

HorizontalOptions="Center"

HorizontalOptions="End"

VerticalOptions="Start"

VerticalOptions="Center"

VerticalOptions="End"

VerticalOptions="Start" HorizontalOptions="Start"

VerticalOptions="Center" HorizontalOptions="Center"

VerticalOptions="End" HorizontalOptions="End"

Remarks

Uh oh!

ghost commented Mar 2, 2024

Uh oh!

jsuarezruiz commented Mar 20, 2024

Uh oh!

azure-pipelines bot commented Mar 20, 2024

Uh oh!

Pastajello commented Mar 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jsuarezruiz Apr 16, 2024

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz commented Apr 19, 2024

Uh oh!

azure-pipelines bot commented Apr 19, 2024

Uh oh!

PureWeen left a comment

Choose a reason for hiding this comment

Uh oh!

kubaflo commented Apr 30, 2024

Uh oh!

TheXenocide commented May 31, 2024

Uh oh!

TheXenocide commented May 31, 2024

Uh oh!

nickl-martin commented Jul 10, 2024

Uh oh!

Felix-Dev commented Oct 11, 2024

Uh oh!

kubaflo commented Oct 11, 2024

Uh oh!

rmarinho commented Oct 25, 2024

Uh oh!

Felix-Dev commented Nov 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jbeacham commented Nov 19, 2024

Uh oh!

jbeacham commented Nov 19, 2024

Uh oh!

kubaflo commented Nov 19, 2024

Uh oh!

amirvenus commented Nov 20, 2024

Uh oh!

dainius-r commented Nov 29, 2024

Uh oh!

kubaflo commented Nov 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dainius-r commented Dec 3, 2024

Uh oh!

YZahringer commented Jul 4, 2025

Uh oh!

jfversluis commented Aug 27, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

kubaflo commented Mar 2, 2024 •

edited

Loading

`Default` - (horizontal and vertical options set to fill implicitly)

`HorizontalOptions="Start"`

`HorizontalOptions="Center"`

`HorizontalOptions="End"`

`VerticalOptions="Start"`

`VerticalOptions="Center"`

`VerticalOptions="End"`

`VerticalOptions="Start"` `HorizontalOptions="Start"`

`VerticalOptions="Center"` `HorizontalOptions="Center"`

`VerticalOptions="End"` `HorizontalOptions="End"`

Pastajello commented Mar 29, 2024 •

edited

Loading

Felix-Dev commented Nov 14, 2024 •

edited

Loading

kubaflo commented Nov 29, 2024 •

edited

Loading