NavigationView header shows unnecessary indentation

HavenDV commented 3 years ago

Describe the bug

Current behavior

I'm not sure what exactly the problem is. The problem is either indentation or default vertical alignment. This showed up after updating to 3.11.0-dev.242 from about 3.10.0-dev.500

Expected behavior

Steps to reproduce the bug

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:NavigationView
  IsSettingsVisible="False"
  AlwaysShowHeader="True"
  IsTabStop="False" 
  IsPaneToggleButtonVisible="True" 
  IsPaneOpen="True" 
  IsPaneVisible="True"
  PaneDisplayMode="LeftCompact"
  >
  <muxc:NavigationView.Header>
    <TextBlock
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Text="Test"
        />
  </muxc:NavigationView.Header>
</muxc:NavigationView>

Expected behavior

No response

Screenshots

No response

NuGet package version

Microsoft.UI.Xaml 2.7.0

Windows app type

[ ] UWP
[ ] Win32

Device form factor

Desktop

Windows version

May 2021 Update (19043)

Additional context

Package Version(s):

<PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
      <!-- 
            If, in the same solution, you are referencing a project that uses https://github.com/onovotny/MSBuildSdkExtras,
            you need to make sure that the version provided here matches https://github.com/onovotny/MSBuildSdkExtras/blob/master/Source/MSBuild.Sdk.Extras/DefaultItems/ImplicitPackages.targets#L11.
            This is not an issue when libraries are referenced through nuget packages. See https://github.com/nventive/Uno/issues/446 for more details.
            -->
      <Version>6.2.12</Version>
    </PackageReference>
    <PackageReference Include="Microsoft.Toolkit.Uwp.UI">
      <Version>7.1.0</Version>
    </PackageReference>
    <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Core">
      <Version>7.1.0</Version>
    </PackageReference>
    <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.DataGrid">
      <Version>7.1.0</Version>
    </PackageReference>
    <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Layout">
      <Version>7.1.0</Version>
    </PackageReference>
    <PackageReference Include="Microsoft.UI.Xaml">
      <Version>2.7.0</Version>
    </PackageReference>

Windows 10 Build Number:

[ ] Fall Creators Update (16299)
[ ] April 2018 Update (17134)
[ ] October 2018 Update (17763)
[ ] May 2019 Update (18362)
[ ] May 2020 Update (19041)
[ ] Insider Build ({build_number})
[x] 19043.985 21H1

App min and target version:

[ ] Fall Creators Update (16299)
[ ] April 2018 Update (17134)
[ ] October 2018 Update (17763)
[ ] May 2019 Update (18362)
[x] May 2020 Update (19041) Min And Target
[ ] Insider Build ({build_number})

Device form factor:

[x] Desktop
[ ] Xbox
[ ] Surface Hub
[ ] IoT

Visual Studio version:

[ ] 2017 (15.{minor_version})
[ ] 2019 (16.{minor_version})
[x] 2022 preview 4.1

Problems appears after upgrade Microsoft.UI.Xaml from 2.6.0-prerelease.210430001 to 2.6.0

marcelwgn commented 2 years ago

It seems that this padding is intentional, the NavigationViewHeaderMargin resource which defines the margin around the header is set to 56,44,0,0 which would explain the gap at the top. I'm not sure if this is intentional or not but this was introduced with #4779. @karenbtlai maybe you can tell more about this and how to possibly resolve this?

karkarl commented 2 years ago

Yes, the extra padding is intentional and part of our app design guidance. The reason is because design-wise, we wish for the header to be aligned with the hamburger menu. This is so that NavView components follow a set "grid system", where elements are not all slightly misaligned to some extent.

If you really wish to change the margin, you can override NavigationViewHeaderMargin to revert this change.

microsoft / microsoft-ui-xaml