Problems with the NavigationView

[66BA9Q-ME49]

Hello, I have started using this amazing UI library, but I'm facing two problems with the NavigationView element.

1. There is a large space below the <ui:NavigationView.PaneFooter> element. I believe this space is occupied by the Settings button, but since I have disabled it, the space should be freed.
2. The NavigationView header is not centered when it is expanded. When the NavigationView is collapsed, the spacing is correct.

Are these bugs within iNKORE.UI.WPF.Modern, or am I doing something wrong? The first issue also occurs in the gallery app, but the second issue seems to only happen to me.

iNKORE.UI.WPF.Modern Version: 0.10.1
iNKORE.UI.WPF Version: 1.2.8
Project: .NET 9 targeting Windows 10.0.18362.0

XAML Code

<Window x:Class="WPFApp.Test"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:local="clr-namespace:WPFApp"
      xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
      xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
      mc:Ignorable="d"
      
      ui:WindowHelper.UseModernWindowStyle="True"
      ui:WindowHelper.SystemBackdropType="Mica"
      ui:TitleBar.IsIconVisible="True"
      
      Title="Test" Height="550" Width="950" Background="#101010" Loaded="Window_Loaded">
  <Grid>
      <ui:NavigationView
          ExpandedModeThresholdWidth="500"
          PaneTitle="NavigationView"
          IsBackEnabled="False"
          IsBackButtonVisible="Collapsed"
          IsTabStop="False"
          IsSettingsVisible="False"
          PaneDisplayMode="Auto">

          <!-- Menu Items -->
          <ui:NavigationView.MenuItems>
              <ui:NavigationViewItem
                      x:Name="SamplePage1Item"
                      Content="Menu Item1"
                      Tag="SamplePage1">
                  <ui:NavigationViewItem.Icon>
                      <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Play}" />
                  </ui:NavigationViewItem.Icon>
              </ui:NavigationViewItem>
          </ui:NavigationView.MenuItems>

          <!-- Footer -->
          <ui:NavigationView.PaneFooter>
              <Grid Margin="20,0,20,0">
                  <!-- Button -->
                  <Button Grid.Column="0" HorizontalAlignment="Left" Style="{DynamicResource {x:Static ui:ThemeKeys.AccentButtonStyleKey}}" Content="Button" />

                  <!-- Settings -->
                  <Button Style="{StaticResource TransparentButton}" Grid.Column="1" HorizontalAlignment="Right" Width="40" Height="40">
                      <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Settings}" />
                  </Button>
              </Grid>
          </ui:NavigationView.PaneFooter>

          <ui:Frame x:Name="Frame_Main"/>
      </ui:NavigationView>
  </Grid>
</Window>

[Aris-Offline]

Could you please send us a copy of your example code? It can help us locate where the problem appears.

[66BA9Q-ME49]

I did, see the "XAML Code" spoiler at the end of my message.
I also found a fix for the problem 1, see issue 335.
Problem 2 remains unsolved.

[NotYoojun]

Would you mind providing a minimal reproducible example (MRE)? That would help us a lot investigating the issues.

[66BA9Q-ME49]

I did, see the "XAML Code" spoiler at the end of my message.
I also found a fix for the problem 1, see issue 335.
Problem 2 remains unsolved.

[NotYoojun]

I did, see the "XAML Code" spoiler at the end of my message.

We need a complete project to determine the problem. you should either upload it as a .zip or create a GitHub repository and then share us the link. a complete project should contain a solution file, a csproj file and all the necessary source code. @66BA9Q-ME49

[66BA9Q-ME49]

@NotYoojun Understood.
Here is the project I was using. It is a modified version of the NavigationViewExample sample from your repository.

NavigationViewExample.zip

[66BA9Q-ME49]

Concerning the button alignment problem (problem 2), the button alignment is correct when:

• The NavigationView is collapsed, no matter the value of IsBackButtonVisible
• The NavigationView is expanded and IsBackButtonVisible is set to true

And incorrect when:

• The NavigationView is expanded and IsBackButtonVisible is set to false
• The NavigationView is in the collapsed state with only the expand button visible. In this case, the expand button is not square.

I used Snoop to analyze the layout, and here is what I found:

From what I understand, the issue is caused by incorrect Margin, Padding and MinWidth values. However, as I'm new to WPF, I have trouble finding the source of the problem in the code.

If you need anything else, I'd be happy to help!

[NotYoojun]

After reviewing your example code,

There is a large space below the ui:NavigationView.PaneFooter element. I believe this space is occupied by the Settings button, but since I have disabled it, the space should be freed.

This seems like a real bug. We can consider creating an issue to track this prob.
By the way, your design (using a Button to represent Settings page instead of NavigationViewItem) does not conform to the Fluent Design specification. Check out other WinUI apps if you wish to make your app more athestic.

The NavigationView header is not centered when it is expanded. When the NavigationView is collapsed, the spacing is correct.

I don't understand what you mean by "centered", which part do you want centered? Is it the way you want it in the latest WinUI Gallery?

[66BA9Q-ME49]

There is a large space below the ui:NavigationView.PaneFooter element

This seems like a real bug. We can consider creating an issue to track this prob

I already created an issue and I also suggested a fix. See issue #335.

By the way, your design (using a Button to represent Settings page instead of NavigationViewItem) does not conform to the Fluent Design specification.

I know, but I prefer this design for my project.

I don't understand what you mean by "centered", which part do you want centered?

I'm talking of the pane toggle button.
As you can see in the screenshot below, the pane toggle button of the WPF app is not centered to the NavigationView.
In comparison, button of the WinUI3 app is properly centered.

[NotYoojun]

Thanks for the detailed reports and discussion!

Both problems mentioned here have been confirmed as bugs and are now tracked separately for clarity:

• First problem: Large empty space below NavigationView.PaneFooter #335
• Second problem: NavigationView Pane Toggle Button Misaligned When Expanded and IsBackButtonVisible="Collapsed" #344

To keep things organized, please do not post any further replies about these bugs in this discussion.
Instead, add any new information, screenshots, or updates directly to the relevant issue above.