Discussion: Fluent v2 NavigationView Top Selection Indicator too Small

[robloo]

Discussion: Fluent v2 Header Underlines too Small

Personally, for top header mode, I think the NavigationView selection indicator is a poor design choice. It makes sense for vertically stacked items but not for horizontal tab-like interfaces.

1. Can this be changed back to what it was in Fluent v1? As your design team intentionally made this change I somewhat doubt it will change back no matter how bad it looks.
2. Is there a quick way developers can switch this back without re-templating? I didn't see any lightweight styling resources for it.

Fluent v2: (poor selection indicator design)

Fluent v1: (better selection indicator design)

[fitojb]

I like the smaller pill, but the selection visual indication could benefit from a sligtly darker background (or clearer, in the dark theme), just like vertical lists do.

[Panda-Sharp]

We're in the same situation, we would really love to make it bigger with no need to re-template it, a lightweight option would be great!

[StephenLPeters]

This is by the new design, but exposing it as a light weight resource is a good idea. @karenbtlai Do you know where the change would be?

[marcelwgn]

@StephenLPeters Is this ready for community work then, i.e. should a new lightweight styling resource should be introduced for this?

[harvinders]

@StephenLPeters A light weight resource would be really good. Microsoft may feel the default is solving the needs, but our customers are reporting difficulty figuring out which tab is selected easily. They really had to look for it, rather than just taking a cursory glance.

[karkarl]

I can take a look. Let me also bring this issue up with design.

[robloo]

@karenbtlai Here is the place where this is set. It has been re-templated for now in the app to solve the issue. A fix in WinUI likely needs two new resources for Width and HorizontalAlignment.

microsoft-ui-xaml/dev/NavigationView/NavigationView_rs1_themeresources.xaml

Line 1209 in 01eea31

Width="16"

Design fix looks like:

<Grid
    x:Name="SelectionIndicatorGrid"
    Margin="16,0,16,4"
    VerticalAlignment="Bottom"
    HorizontalAlignment="Stretch">
    <Rectangle
        x:Name="SelectionIndicator"
        Height="3"
        MinWidth="16"
        HorizontalAlignment="Stretch"
        Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
        Opacity="0"
        RadiusX="2"
        RadiusY="2" />
</Grid>