头像联系人图片如何动态显示用户个人资料图片和随机颜色UWP的姓氏?

Avatar contact Image how to dynamically display user profile image and the last name with random color UWP?

我正在为联系人列表写头像。设计是这样的,如果我能得到联系人的图像然后我显示图像。如果不是,我需要用随机颜色显示姓氏的大写字母。我知道如何显示圆形图像

<Button>
    <Button.Content>
        <Ellipse>
             <Ellipse.Fill>
                 <ImageBrush ImageSource="{Binding Image}"/>
             </Ellipse.Fill>
         </Ellipse>
     </Button.Content>
</Button>

我想知道显示那些没有图像的方向是什么,我必须显示姓氏字母并用随机颜色填充椭圆。我的想法是在Image的getter中写一些条件代码来决定显示什么。但是如何制作具有给定字母和随机颜色的图像。

您始终可以继续在代码中生成所需的图像,但这可能会变得不必要地复杂。

我会建议一个更简单的方法

<Button>
    <Button.Content>       
        <Grid>
            <Ellipse Fill="{x:Bind FillBrush}"/>
            <TextBlock Text="{x:Bind Initials}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
     </Button.Content>
</Button>

在您的 ViewModel 中,您会有这样的东西:

public Brush FillBrush { get; set; }
public string Initials { get; set; }

以及确定如何填充这些属性的一些逻辑。如果您有图像,请将 Initials 属性 留空并将 FillBrush 设置为 ImageBrush。如果您没有图像,请将 FillBrush 设置为使用随机颜色初始化的新 SolidColorBrush,并将 Intials 设置为正确的值。

*您当然需要为 TextBlock 设置正确的样式并在您的 ViewModel 中引发正确的 NotifyPropertyChanged 事件。

**如果您可以仅生成随机背景颜色以与您为 TextBlock 选择的任何前景一起使用,或者根据所需的设计,根据随机背景颜色选择白色或黑色前景,则加分。

我认为这比在您还没有图像时生成图像更容易编码和维护,并且在运行时速度更快。