NavigationViewItem is not vertically aligned and moves unnecessarily

[torum]

NavigationViewItem's content is not vertically aligned and moves to further right as Pane opens. I attached simple sample project.

Screenshots

OS: Windows 11. FluentAvalonia Version 2.3.0

Avalonia Version 11.3.2

Additional context Templary fix seems to be to override following values.

	<Thickness x:Key="NavigationViewItemContentPresenterMargin">0</Thickness>
	<Thickness x:Key="NavigationViewPaneContentGridMargin">0,4,0,3</Thickness> 

And in the NavigationViewItemStyles.axaml, change ControlTheme's Padding to "-2,0,2,0". I have no idea if this workaround causes unwanted side effects. But so far, it is working for me.

Sample project AvaloniaTest1.zip

PS. I'm very very new to Avalonia UI. So I may be missing something. Plus, English is not my first language, so... my English may sound weird. Thank you for your great work!

[torum]

I just realized that I wasn't using ui:NavigationViewItem.IconSource. So, I tried it, but, still I encountered a few minor problems including not vertically aligned item.

So, here is the updated fix/work around.

1. Override with following.

	<Thickness x:Key="NavigationViewItemContentPresenterMargin">-4,0,0,0</Thickness>
	<Thickness x:Key="NavigationViewPaneContentGridMargin">0,4,0,3</Thickness>

2. In, NavigationViewItemStyles.axaml file, add padding "4,0,0,0"

<ControlTheme x:Key="{x:Type ui:NavigationViewItem}" TargetType="ui:NavigationViewItem">
...
<Setter Property="Padding" Value="4,0,0,0"/>

BTW, I'm not considering any case other than left mode here. But it is working for me.

[torum]

On the related issue, navigationview's toggle button size is strange when mouse over it for the first time. I remember the similar issue with WinUI3 a long time ago.

Adding <Button Name="TogglePaneButton" ... Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneToggleButtonWidth}" in the NavigationViewStyles.axaml fixed it.

[torum]

And one more thing. I get strange residual line after the selection indicator was erased from NavigationViewItem.

I tried many things including adding -1 margin to the left and failed. But, adding transparent border worked like a charm.

<Border Name="SelectionIndicator"
...
 BorderThickness="1" BorderBrush="Transparent"

in NavigationViewItemPresenterStyles.axaml

To compensate the invisible border width, override with

<x:Double x:Key="NavigationViewSelectionIndicatorWidth">4</x:Double>
<x:Double x:Key="NavigationViewSelectionIndicatorHeight">18</x:Double>