Skip to content

NavigationView Header in Material Theme Application Margin Property looks off by default #1545

@DevTKSS

Description

@DevTKSS

I am using Material Theme in my apps and trying to use xaml Navigation from the Uno Extensions.
We do have the IRouteNotifyer to get the current Route showing up in our app. This is what I am Binding my NavigationView.Header to and now I see that not very pretty Margin there all the time. Looked up the microsoft WinUI documentation to this:

https://learn.microsoft.com/de-de/windows/apps/design/controls/navigationview#top-whitespace

Image

Image

from which I would expect to get the UI layout they are showing in their screenshots, so nicely fitted margin all around the Header content, also in material Theme of course, because who wants UI thats looking off. I am not assuming that the target state is to have everyone create a HeaderTemplate just to fit it properly or have his page.Resources every time include the workaround for example:

        <Thickness x:Key="NavigationViewHeaderMargin">0</Thickness>

to have not this big spacing on the left, or this way:

        <Thickness x:Key="NavigationViewHeaderMargin">20,20,20,20</Thickness>

to have the mentioned spacing nicly fitted.
Lines in this repository I think that should get attention for adjusting this:

<Thickness x:Key="NavigationViewHeaderMargin">56,44,0,0</Thickness>

Maybe there could also be a way to have a similar Resources x:Key to just by that tell the UI we want the Header Content Centered and not left aligned? if thats already possible, which would this be?

Additionally, I am not sure, if this behaviour is on purpose like this:

Image

maybe someone can tell my, why there is no WrapWholeWords in Header by default for responsiveness reasons and the Header this strange way lowered under the MenuPane Button like this? Why is it not more left aligned if its recognizing low space like this?

Repro Project:

UnoApp2.zip

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions