Microsoft-ui-xaml: UWP PersonPicture gets cut when implemented on a NavigationViewItem

[MarcoEnxuto]

Hello,
I already did this question, but i'm here because i told on Twitter i was going to open a question/issue or bug.
So until anyone claims this as a bug, i remain with a question.

_I'm implementing a navigation view with a login button, inside a NavigationView.
I would like to provide a good UI by placing the circular user photo on that button. In fact, it is a NavigationViewItem containing a stack panel with PersonPicture + a TextBlock.
Unfortunately, this isn't working as expected as the PersonPicture get cut when the NavigationView is in compact mode, and collapsed. See the image for details.

The only way, i found out to be the best path forward, was to use the Icon property of the NavigationViewItem, but it only accepts IconElement as Type. So, my idea was to convert the image that's coming from a service (jpg or png) as stream to a ImageBrush, paint an Ellipse, get the ellipse back to a bitmapImage and then save to a file as a PNG. Since BitmapIcon uses that, but only loads from a file.
My problem is get the painted ellipse back, in order to save later as a file._

Also, the NavigationViewItem shouldn't have this behavior with the PersonPicture. Right?

Navigation View and PersonPicture are WinUI components.

https://docs.microsoft.com/en-us/answers/questions/64597/uwp-personpicture-gets-cut-when-implemented-on-a-n.html?childToView=64821#answer-64821
This Q&A has more important details. Sorry for not opening here first.

[Felix-Dev]

This is a duplicate of #2541.

@MarcoEnxuto A fix is in the works and will hopefully be merged soon.

[MarcoEnxuto]

Hi, @Felix-Dev , sorry for the duplicate. By the title of issue #2541 i wasn't getting there but after reading everything, now i got it. Setting a margin of -6 is a thing that we need to implement? or it is also a bug in order to get the element vertically aligned?
Thanks for your time.

[chingucoding]

Setting a negative left margin is a workaround you can use now, but is not something that is expected to be used. Once #2717 gets merged and there is a new release with that fix in it, that negative margin is not needed anymore.

[Felix-Dev]

@MarcoEnxuto @chingucoding There is indeed a reason why a negative margin has to be used here to visually align the Icon and Content of separate NavigationViewItems independently of #2717. See this screenshot:

What you see here are two NavigationViewItems with icon and content set ("Home" and "Settings"). The other two items only set the content, like this:

<muxcontrols:NavigationViewItem>
    <muxcontrols:NavigationViewItem.Content>
        <StackPanel  Orientation="Horizontal">
            <PersonPicture Width="16" Height="16" />
        </StackPanel>
    </muxcontrols:NavigationViewItem.Content>
</muxcontrols:NavigationViewItem>

I've colored the background of the NvigationViewItem's IconPresenter in pink and the background of the ContentPresenter in a slightly transparent red. If you look closely, you should see that the different presenters aren't perfectly aligned on the left side - the ContentPresenter has a slightly bigger margin to its left than the IconPresenter. This is the reason why a negative margin for the PersonPicture NavViewItem has to be used here and which #2717 won't fix this as that PR only changes the margin of the ContentPresenter to its right.

The default ControlTemplate of the NavigationVieItemPresenter tells us why the left margins differ depending on whether an icon is set or not for a NavigationViewItem:

When an icon is set, the IconPresenter uses the following margin:

<Thickness x:Key="NavigationViewItemOnLeftIconBoxMargin">12,0,12,0</Thickness>

When no Icon is specified the IconPresenter is collapsed and its Grid.Column width is set to 16:
https://github.com/microsoft/microsoft-ui-xaml/blob/4468528f4e2089defa921df2cf140ab6c44cbbab/dev/NavigationView/NavigationView_rs1_themeresources.xaml#L621

In other words, an additional 16px-12px=4px are "added" as a left margin here.

So, back to our screenshot above: The Settings Icon has a margin of 12px to its left and the footer NavigationViewItem with no icon and a PersonPicture as Content has a margin of 16px to its left. A negative margin of 4px is needed to visually align the IconPresenter and ContentPresenter of different NavigationViewItems.

Adjusting the Icon column width to 12px gives us thed desired consistent margin:

Now, the default size of the NavigationViewItem's Icon is 16px. If you make the size of the PersonPicture larger than 16x16, say 24x24, this is the result:

So an additional negative margin is needed for the PersonPicture to make it appear that the Settings icon and the PersonPicture above it are visually aligned:

(PersonPicture with a negative margin of 2px)

Long story short, my suggestion here is the following: We should reduce the width of the IconPresenter GridColumn when no icon is shown from 16px to 12px, matching the left margin of the IconPresenter when shown.

(Alternatively, we we could keep the width of the IconPresenter grid colum at 0px when no icon is shown and update the ContentPresenter margin to include 12px on the left (currently 0px).)

Adding @YuliKl for her thoughts.

PS: This looks like an example where proposal https://github.com/microsoft/microsoft-ui-xaml/issues/3101 would have been useful where developers could have specified the PersonPicture as the icon of the NavigationView footer item and thus automatically got consistent padding to the left here with the Settings item directly below.

[StephenLPeters]

@MarcoEnxuto If you feel like your question wasn't answered fully feel free to post here again.