xaml - 未设置 UWP PersonPicture 控件背景

Question

PersonPicture是 Microsoft 通用 Windows 平台中提供的控件。

它看起来很棒，这就是我尝试使用它来显示带有背景色的用户姓名首字母的原因。

问题是，当我将控件的背景设置为一种颜色时，显示屏上的背景并没有改变。

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

在上面的代码中，Background 仍然保持默认，而其他所有内容都已更新。

如果您能够设置背景颜色，请分享您是如何做到的!

Answer 1

我通过这个问题找到了PersonPicture的模板:How to get all Controls' ControlTemplates Programmatically?(UWP)

PersonPicture 忽略其 Background 属性，并使用几个画笔根据深色/浅色主题和一些硬编码值构成控件的颜色。

它绘制了一个椭圆/圆，因此在四个角显示了其容器的颜色。

假设您想在包含图片的正方形中设置颜色，您可以这样做:

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

第一个网格代表一个页面。第二个网格紧紧包裹着 PersonPicture:

请注意人物图片是如何透明的并显示网格的颜色。模板用于椭圆的颜色是 #77FFFFFF

因此您可以通过添加一个椭圆更进一步:

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

这允许您通过设置椭圆的颜色来稍微控制图片的颜色:

请注意，它仍然将 PersonPicture 与背景混合在一起，因此您不能将其设置为黑色:

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

显示:

最后，您可以复制模板(参见:How to get all Controls' ControlTemplates Programmatically?(UWP))并调整它以使用背景属性。