WinUI桌面应用横向NavigationViewItem选中下划线过短问题

这不是设计缺陷，WinUI的NavigationView在Top模式下的默认下划线是固定宽度，并非完全匹配文本长度。你可以通过以下两种方式自定义下划线：

• 修改NavigationViewItem的默认样式
  提取NavigationViewItem的完整样式模板，找到名为SelectedIndicator的矩形元素，将它的Width属性设为Auto，或者绑定到文本内容的实际宽度。示例片段如下：

  <Style TargetType="NavigationViewItem">
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="NavigationViewItem">
                  <!-- 保留原有模板其他元素，仅修改SelectedIndicator -->
                  <Rectangle x:Name="SelectedIndicator"
                             Width="Auto"
                             Height="2"
                             Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
                             HorizontalAlignment="Left"
                             VerticalAlignment="Bottom"/>
                  <!-- 其余模板内容省略 -->
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>
  

• 通过VisualState动态调整宽度
  在NavigationViewItem的样式中，针对Selected视觉状态，将SelectedIndicator的宽度绑定到内容展示控件的实际宽度。示例如下：

  <VisualState x:Name="Selected">
      <VisualState.Setters>
          <Setter Target="SelectedIndicator.Width" 
                  Value="{Binding ElementName=ContentPresenter, Path=ActualWidth}"/>
      </VisualState.Setters>
  </VisualState>
  

另外，你当前代码中给NavigationView设置了Margin="-50,0,0,0"，这个负边距可能会干扰布局逻辑，建议检查是否有必要保留，避免引发其他显示问题。

内容的提问来源于stack exchange，提问作者Carlos Costa