UWP-BitMapImage到图标

Question

I'm trying to make a UWP with Visual Studio 2017. I want to add as a NavigationViewItem the Microsoft Account Information. In order to do it I get with GraphServiceClient the DisplayName and the profile picture saved as string and BitMapImage respectively.

What I would like to do is to crop circularly the BitMapImage and use it in the Icon property of the NavigationViewItem .

Answer 1

What I would like to do is to crop circularly the BitMapImage and use it in the Icon property of the NavigationViewItem.

You could not use BitmapImage as NavigationViewItem's Icon , It only receives IconElement .

To achieve your target, you could directly do layout in NavigationViewItem.Content to show image and text. For example, you could use Ellipse and ImageBrush to show image in circle shape.

Here's a simple code sample:

<NavigationView>
        <NavigationView.MenuItems>
            <NavigationViewItem Name="SalahNavItem" Tag="Salah">
                <NavigationViewItem.Content>
                    <StackPanel Orientation="Horizontal" >
                        <Ellipse Width="40" Height="40">
                            <Ellipse.Fill>
                                <ImageBrush x:Name="img"></ImageBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <TextBlock Text="Custom" VerticalAlignment="Center"></TextBlock>
                    </StackPanel>
                </NavigationViewItem.Content>
            </NavigationViewItem>
            <NavigationViewItem Name="AppsNavItem"  Content="Apps" Tag="apps">
            </NavigationViewItem>
        </NavigationView.MenuItems>
</NavigationView>

BitmapImage bitmapImage = new BitmapImage(new Uri("ms-appx:///Assets/car.png"));
img.ImageSource = bitmapImage;