UWP PersonPicture gets cut when implemented on a NavigationViewItem

Marco Enxuto 326 Reputation points
2020-08-11T17:47:56.303+00:00

Hi,
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.

I have a requirement: Minimum build 15063

17015-image.png

16910-image.png

Universal Windows Platform (UWP)
0 comments No comments
{count} vote

Accepted answer
  1. Marco Enxuto 326 Reputation points
    2020-08-11T23:36:19.677+00:00

    Update:
    Workaround until version 2.4.x is fixed!
    Update 2:
    2.4.3 released today doesn't have a fix, even 2.5.0 prereleases don't.
    Update 3:
    A fix is in the works 2717

    This doesn't happen on WinUI 2.3.200213001. It's the last release that doesn't happen. So use 2.3.xx until a fix is available.
    Either way, i still have to place a Stack Panel with a margin of -6 to align everything. See the code below:

    17078-image.png

        <WinUI:NavigationViewItem x:Name="NavigationViewItemGraphLogin">  
                                <WinUI:NavigationViewItem.Content>  
                                    <StackPanel Margin="-6,0,0,0" Orientation="Horizontal">  
                                        <WinUI:PersonPicture Width="20" Height="20" />  
                                    </StackPanel>  
                                </WinUI:NavigationViewItem.Content>  
                            </WinUI:NavigationViewItem>  
    
    0 comments No comments

0 additional answers

Sort by: Most helpful