UWP PersonPicture control background not being set

Question

PersonPicture is a control offered in Microsoft's Universal Windows Platform.

It looks great, which is why I'm trying to use it to display a user's initials with a background color.

The problem is that when I set the control's background to a color, the background is not changed on the display.

<PersonPicture Initials="JF"
               Background="Red"/>

In the above code, the Background still remains the default, while everything else is updated.

Please if you have been able to set the background color, share how you've done it!

Answer 1

I found the template for the PersonPicture through this question: How to get all Controls' ControlTemplates Programmatically?(UWP)

The PersonPicture ignores its Background property and uses a couple of brushes that make up the colors of the control depending on Dark/Light theme and some hard coded values.

It draws an ellipse/circle and thus shows its container's color in the four corners.

Assuming you want to set the color in the square that contains the picture you could do this:

<Grid Background="Green">
    <Grid HorizontalAlignment="Center" 
            VerticalAlignment="Center" 
            Background="Red">
        <PersonPicture />
    </Grid>
</Grid>

The first grid represents a page. The second grid tightly wraps around the PersonPicture:

Note how the personpicture is somewhat transparent and shows the color of the grid. The color that the template uses for the ellipse is #77FFFFFF

So you could take it a step further by adding an ellipse:

<Grid Background="Green">
    <Grid HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Background="Red">
        <Ellipse Fill="White"/>
        <PersonPicture />
    </Grid>
</Grid>

This allows you to control the color of the picture somewhat by setting the color of the ellipse:

Do note that it still mixes the PersonPicture with the background so you cannot set it to black:

<Grid Background="Green">
    <Grid HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Background="Red">
        <Ellipse Fill="Black" />
        <PersonPicture />
    </Grid>
</Grid>

Shows:

And finally, you could copy the template (see: How to get all Controls' ControlTemplates Programmatically?(UWP)) and adjust it to use the Background property.