Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Spec] Shell/NavigationPage TitleView #5063

Open
PureWeen opened this issue Mar 4, 2022 · 4 comments · May be fixed by #20959
Open

[Spec] Shell/NavigationPage TitleView #5063

PureWeen opened this issue Mar 4, 2022 · 4 comments · May be fixed by #20959
Labels
area-controls-shell Shell Navigation, Routes, Tabs, Flyout proposal/open t/enhancement ☀️ New feature or request

Comments

@PureWeen
Copy link
Member

PureWeen commented Mar 4, 2022

NavigationPage/Shell TitleView

Utilize our current LayoutOptions to indicate how you want a TitleView to layout on the screen. All work done here should be generalized so that it applies to Navigation.TitleView as well

These will have no effect as they only apply to cases where the parent is a stack layout

StartAndExpand
CenterAndExpand
EndAndExpand
FillAndExpand

Realistically users should only need to use Center and Fill

Center

VerticalOptions

When used it will center the rendered view inside the given title view container so that the margin above and below the content appear equal

HorizontalOptions

Centered on the device screen. View will have a width equal to measured content

Fill

VerticalOptions

This is the current behavior. The Layout will just layout inside all available vertical space. In a perfect world if the measured height of the supplied layout exceeds the min height of the navigation bar then the navigation bar should be resized to match the height of the TitleView. If this is extremely difficult to get working we can look at doing that for a second PR.

HorizontalOptions

This will cause the title view to take up the entire width of the header on the device. So the titleview layout will overlap the backbutton, hamburger, etc... We can detect this layout option and just not render toolbaritems/hamburger/etc..

Start

VerticalOptions

View will measure vertically to the size of the content and will layout against the top edge of the allotted TitleView space.

HorizontalOptions

View will measure horizontally to the size of the content and will layout against the left edge of the allotted TitleView space. For example on iOS this will just cause the view to layout against the hamburger

End

VerticalOptions

View will measure vertically to the size of the content and will layout against the bottom edge of the allotted TitleView space.

HorizontalOptions

View will measure horizontally to the size of the content and will layout against the right edge of the allotted TitleView space. For example on iOS this will just cause the view to layout against the hamburger
Template level control of the entire experience.

Additional Work to look at while implementing these changes

XAML Example

This will center the title vertically within the given titleview space and horizontally on the device screen

<Shell.TitleView>
     <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
          <Label Text="Title"  />
     </StackLayout>
</Shell.TitleView>

Difficulty : medium

@Alexgoon
Copy link

Alexgoon commented Mar 17, 2023

Not sure if this is related to the current thread, but it seems that TitleView has a default padding that cannot be removed. Found a Xamarin-specific issue about it at [Spec] Shell/NavigationPage TitleView

@Qythyx
Copy link

Qythyx commented Apr 3, 2023

Is there a workaround to this until it is implemented? Specifically, I'm having difficulties setting my TitleView to use the full height of the NavBar in iOS. Is there anyway to know what the full heigh of the NavBar should be?

kubaflo added a commit to kubaflo/DG that referenced this issue Jun 6, 2023
Before this commit the title 'DG!'
was centered on iOS and aligned
to the left on Android. Because of the
fact that it is impossible to perfectly
align that title to center on Android: dotnet/maui#5063
the title has been aligned to the left on both platforms
kubaflo added a commit to kubaflo/DG that referenced this issue Jun 7, 2023
Before this commit the title 'DG!'
was centered on iOS and aligned
to the left on Android. Because of the
fact that it is impossible to perfectly
align that title to center on Android: dotnet/maui#5063
the title has been aligned to the left
on both platforms.
kubaflo added a commit to kubaflo/DG that referenced this issue Jun 7, 2023
Before this commit the title 'DG!'
was centered on iOS and aligned
to the left on Android. Because of the
fact that it is impossible to perfectly
align that title to center on Android[1]
the title has been aligned to the left
on both platforms.

[1] dotnet/maui#5063
kubaflo added a commit to kubaflo/DG that referenced this issue Jun 7, 2023
Before this commit the title 'DG!'
was centered on iOS and aligned
to the left on Android. Because of the
fact that it is impossible to perfectly
align that title to center on Android[1]
the title has been aligned to the left
on both platforms.

[1] dotnet/maui#5063
@shijianoo
Copy link

Why wasn't it fixed?

kubaflo added a commit to kubaflo/maui that referenced this issue Mar 2, 2024
@kubaflo kubaflo linked a pull request Mar 2, 2024 that will close this issue
@kubaflo
Copy link
Contributor

kubaflo commented Mar 2, 2024

Hi, @PureWeen could you please have a look at this PR? :) #20959 Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-controls-shell Shell Navigation, Routes, Tabs, Flyout proposal/open t/enhancement ☀️ New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants