Proposal: Allow changing NavigationViewItem Icon size

Proposal: Allow changing NavigationViewItem Icon size

Summary

Currently, it is very hard to change the NavigationViewItem’s icon size. By default, it is measures only 16 effective pixels, which makes it hard for the icon to stand out if the developer needs more eye-grabbing navigation. Unfortunately the icon size is (as far as I am aware) hardcoded as part of the NavigationViewItemPresenter which is embedded inside NavigationViewItem and it is not very easy to modify it.

Rationale

• This change would make NavigationViewItem more flexible
• The item’s font size can be modified, so it would be helpful if the icon size could go hand in hand with it
• The icons are wrapped in a ViewBox inside the presenter, so this would require just exposing the dimension of the icon outside

Scope

Capability	Priority
This proposal will allow developers to set icon size directly using a NavigationViewItem dependency property	Must

Important Notes

Proposed API:

   <NavigationViewItem Content="Home" IconSize="40">
      <NavigationViewItem.Icon>
          <SymbolIcon Symbol="Home" />
     </NavigationViewItem.Icon>
   </NavigationViewItem>

The API could potentially allow for non-square sizes:

   <NavigationViewItem Content="Home" IconSize="40,20">
      <NavigationViewItem.Icon>
          <SymbolIcon Symbol="Home" />
     </NavigationViewItem.Icon>
   </NavigationViewItem>

[Felix-Dev]

@janismarieafable It suspect what you are primarily asking for here is an increase of the hit target area, especially in closed compact mode:

Those hit target areas can definitely be too small if I picture such a scenario you are mentioning here.

There already exist a few APIs today which can increase the hit target area, for example the NavigationView.CompactPaneLength API and the overridable NavigationViewItemOnLeftMinHeight theme resource. Setting both of these to a value of 60, for example, gives us this design:

Bigger icons will better fill the additional space here though, so we should provide an API for that. @YuliKl In issue https://github.com/microsoft/microsoft-ui-xaml/issues/2750 we opted for creating a new lightweight styling resource - NavigationViewItemExpandedGlyphFontSize - to change the size of the expand/collapse chevron. We could mirror that approach here by creating a new NavigationViewItemIconFontSize resource which could be used to customize the NavigationViewItem’s Icon size. For example, setting it to 32 (<x:Double x:Key="NavigationViewItemIconFontSize">32</x:Double>), the above design would look like this then:

(The pane toogle button and search button icon sizes could also get cooresponding theme resources to customize them as well and thus create consistently sized icons.)

In Top pane display mode, it would look like this then (@jindal1979 FYI):

Should we, if we want to use this approach, introduce separate resources for the Icon size in Top mode and Left display modes?

@MartinZikmund Would this work for you?

[janismarieafable]

Our use case for large icon size is that our app is used by fishermen on a rugged touch screen. These fishermen sometimes have very large hands/fingers and have a hard time with the smaller icons.