Proposal: NavigationView: Improve the lightweight-styling experience of the selection indicator

[Felix-Dev]

Proposal: NavigationView: Improve the lightweight-styling experience of the selection indicator

Summary

Currently, the appearance of the NavigationView's selection indicator cannot easily be customized using lightweight styling alone. Below you will find the current initialization of the selection indicator in the control template of a NavigationViewItemPresenter:

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

Line 658 in 8e032c7

<Rectangle

As we can see above, there is only the NavigationViewSelectionIndicatorForeground theme resource available to developers today. However, in order to properly customize the selection indicator appearance using lightweight styling, we should also introduce the following theme resources:

• NavigationViewSelectionIndicatorMargin
• NavigationViewSelectionIndicatorWidth
• NavigationViewSelectionIndicatorHeight
• NavigationViewSelectionIndicatorRadiusX/RadiusY or NavigationViewSelectionIndicatorCornerRadius

Rationale

This proposal, alongside proposal #2878 will enable developers to utilize the NavigationView control for their in-app navigation while easily matching in-app navigation designs seen in a variety of Windows apps, such as Windows Settings, Microsoft To Do, Your Phone, OneNote for Windows 10 and legacy Edge UWP. See below for images:

(Windows Settings)	(Microsoft To Do)
(Your Phone)	(OneNote for Windows 10)
(Edge UWP)

And for reference the current default look of the selection indicator of the WinUI NavigationView control:

Currently, developers would have to re-template the NavigationViewItemPresenter control or walk its visual tree in order to customize the appearance of the selection indicator. Neither approach is ideal, and especially in the case of the NavigationView, we have seen many changes in the recent weeks and months to its default control templates. In other words, after WinUI updates developers would often have to re-copy the new up-to-date control templates (and re-edit them) in order to not miss out on improvements like hierarchical navigation, better lightweight-styling support, expand/collapse chevron not being partly occluded by the scrollbar, etc....

To make the lifes of developers significantly easier here, we should provide them with a set of theme resources which they can use to customize the appearance of the selection indicator. That way, they can upgrade their WinUI version and don't have to worry about having to re-copy and re-edit the NavigationViewItemPresenter control templates after each WinUI update, big or small.

[Felix-Dev]

@YuliKl Your thoughts on this?