question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Proposal: Make Icon of NavigationViewItem templatable

See original GitHub issue

Proposal: Make Icon of NavigationViewItem templatable

Summary

Make Icon a type of object that can take any element, and add an IconTemplate property that allows for full customization. The max width of the Icon element should respect the value of CompactPaneLength.

Rationale

  • The current Icon property only accepts elements of type IconElement, which limits its usage.

Scope

Capability Priority
This proposal will allow developers to display any type of elements they want in the Icon area. Must

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:11
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

5reactions
Felix-Devcommented, Aug 29, 2020

One specific example where this would be helpful is developers wanting to show a PersonPicture element as the leftmost element of a NavigationViewItem (see here and here for examples).

Due to the current restrictions of the NavigationViewItem.Icon API developers have to use the NavigationViewItem.Content API instead. If they want to show a content string next to the PdersonPicture, they will have to do all the work for that:

<NavigationViewItem>
    <NavigationViewItem.Content>
        <StackPanel Orientation="Horizontal">
            <PersonPicture Width="20" Height="20" />
            <TextBlock Text="Account" Margin="10,0,0,0" />
        </StackPanel>       
    </NavigationViewItem.Content>
</NavigationViewItem>

image

It would be better if developers could just do this instead:

<NavigationViewItem Content="Account">
    <NavigationViewItem.Icon>
        <PersonPicture Width="20" Height="20" />
    </NavigationViewItem.Icon>
</NavigationViewItem>
0reactions
ad1Dimacommented, Oct 12, 2020

you could add Svg support for icons in NavigationViewItem in this winUi3 version.

@Javier118 In UWP ImageSource supports SVG files. If WinUI3 version of ImageSource doesn’t support it, you’d better to make new proposal for this.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot bind Icon property in NavigationView ...
Sadly, it seems the default behaviour is that the contents of MenuItemTemplate are placed inside the NavigationViewItem 's ContentPresenter .
Read more >
Icon and IconTemplate - Telerik UI for WPF - Documentation
The RadNavigationViewItem allows you to display a custom icon in its template. To show an icon, you can use either the Icon, or...
Read more >
NavigationViewItem.Icon Property - Windows
Gets or sets the icon to show next to the menu item text. Equivalent WinUI 2 API for UWP: Microsoft.UI.Xaml.Controls.NavigationViewItem.Icon (for WinUI in ......
Read more >
HamburgerMenu XAML Control - Windows
The 3-line menu icon, which resembles a Hamburger, allows developers to pack more features into their apps or navigation.
Read more >
NavigationView In Android
Let's look into the Project Structure of the inbuilt NavigationView template. The activity_main.xml is the layout for the MainActivity.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found