时间戳

首页 > 解决方案 > 未设置 UWP PersonPicture 控件背景

xaml - 未设置 UWP PersonPicture 控件背景

问题描述

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

它看起来很棒，这就是为什么我试图用它来显示带有背景颜色的用户姓名首字母。

问题是当我将控件的背景设置为一种颜色时，显示器上的背景不会改变。

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

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

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

标签： xamluser-interfaceuwpwindows-10-universaluwp-xaml

解决方案

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

PersonPicture 忽略了它的 Background 属性并使用了几个画笔，这些画笔根据 Dark/Light 主题和一些硬编码值来构成控件的颜色。

它绘制一个椭圆/圆形，从而在四个角上显示其容器的颜色。

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

<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>

显示：

黑暗人物图片

最后，您可以复制模板（请参阅：如何以编程方式获取所有控件的 ControlTemplates？（UWP））并调整它以使用背景属性。

推荐阅读