Proposal: Allow changing NavigationViewItem Icon size

[MartinZikmund]

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>

[YuliKl]

@MartinZikmund thank you for the proposal. Do you have a specific example/illustration for when you would want the icon to be larger?

The current 16x16 size was deliberately chosen to fit well into the Fluent design grid and to look proportional in compact and top NavigationView modes. Larger icons would look unbalanced and/or clipped in these modes, depending on icon size. So I'm hesitant to add a convenient mechanism for changing size (a dev can always retemplate if absolutely necessary) without understanding the need that this capability would address.

[MartinZikmund]

@YuliKl I am building a port of an application from Android which uses rich iconography for the main sections of the app. As the application has primary and secondary navigation, it would be very useful if it was possible to make the primary navigation and its icons and font size stand out. If this change would be problematic, however, then custom template it is 😀

[YuliKl]

@Martinzikmund To educate me, can you show a screenshot of the Android app's navigation?

[MartinZikmund]

I'm sorry for my late reply, I cannot provide a screenshot, as it is an internal application. However, I will attempt to create a mockup

[kmgallahan]

This has my upvote. I admittingly have a somewhat edge case display setup - using 30" monitors @ 2560x1600 resolution and 125% display + text scaling.

The 16x16 icons appear tiny in the LOB app I'm working on. Not so say icons are much larger in all the other apps I use (except for some that have per-app scaling like the Adobe suite), but it'd be nice to easily increase their size in an app I'm developing specifically for my environment (couple of workstations with employees).

[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.

[jindal1979]

This is very much desired functionality. The developer should be able to change the size of icon, this is particularly useful with Navigation at Top. I would like to Upvote for this functionality.

[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?

[MartinZikmund]

@Felix-Dev That would work (as long as the paddings around the icons are a bit bigger) 👍

[AtosNicoS]

@Felix-Dev I tried to realize your first approach, but that did not change anything. Any idea what I did wrong?

<NavigationView.Resources>
    <x:Double x:Key="NavigationViewItemOnLeftMinHeight">100</x:Double>
</NavigationView.Resources>

Increasing icon size is a really nice idea!

[Felix-Dev]

@AtosNicoS This has not yet been implemented in WinUI. Currently waiting for @YuliKl (a WinUI team member) to give her thoughts on the idea to use lightweight styling to customize the icon size.

[Path2Freedom]

Width of navigation bar in closed compact mode is lesser than what is there in Windows Start menu and hence it looks inconsistent. Even if we edit compact pane length, items inside it do not scale and hence a part of content becomes visible along with icons.

The possible solutions can be to either scale the navigation view items in proportion to change in compact pane length or to provide two separate navigation controls instead of one. One for vertical configuration and other for horizontal configuration.

[jamescarter-le]

Has there been any progress on this? I'm designing for a touch screen HMI application.

[Path2Freedom]

Has there been any progress on this? I'm designing for a touch screen HMI application.

You can right click the control in XAML view (not XAML code) and select "edit control in different window". This way you can edit the control template of NavigationView control. You can then change some aspects. I didn't try to change icon size eventually, but I used it change the AutoSuggest box present in NavigationView.

[mdtauk]

What you may be looking for is light weight styles for the Icon Size, The NavigationViewItem height, and the NavigationView Collapsed pane width?

The icon would be centred within the Pane Width and the Item Height - The text would have to be padded away from the icon so it is not visible when collapsed, but displays when the pane is opened or expanded.

[AtosNicoS]

@Felix-Dev @YuliKl Any updates on this?

It turns out that NavigationViewItemOnLeftMinHeight is only available in 2.5, not 2.4: https://github.com/microsoft/microsoft-ui-xaml/blob/release/2.4/dev/NavigationView/NavigationView.xaml https://github.com/microsoft/microsoft-ui-xaml/blob/release/2.5/dev/NavigationView/NavigationView.xaml

I've set the target and min version to 2004/build 19041 but it seems the feature is still not available there. I have not manually installed the winui nuget, I am just using the default windows/visual studio tooling. How can I get this feature? I want to at least enlarge the button size, even if the Icons stay smaller (for now).

[ak2yny]

The current 16x16 size was deliberately chosen to fit well into the Fluent design grid and to look proportional in compact and top NavigationView modes. Larger icons would look unbalanced and/or clipped in these modes, depending on icon size. [...]

This is true, but that's the app developer's job, isn't it? It's okay to set a standard, but it's not nice to force the standard on everyone. The options were what made Microsoft's products great.

That said, there is a way to set a custom icon with path reference and custom scale, in a left view mode it would look like this:

                    <NavigationViewItem.Content>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/Assets/MyIcon.png" Height="28" Width="28"/>
                            <TextBlock Text="My Page" VerticalAlignment="Center" Margin="5"/>
                        </StackPanel>
                    </NavigationViewItem.Content>

32 seems to be too big already. 28 looks centred and a circular icon looks good this size. The icon moves a little bit when changing between compact and expanded mode. This is not my invention, I found this while searching for a different problem.

[mdtauk]

With the Fluent System Icons being available at a variety of sizes, I think adding the ability to control the size of these icons, becomes a reasonable request.

Icon Width and Icon Height values should cover most scenarios, but there may be some scope for including padding values to ensure icons can be positioned correctly, should the collapsed pane length, be changed.