Avatar contact Image comment afficher dynamiquement l'image du profil utilisateur et le nom de famille avec UWP couleur aléatoire?

Question

J'écris Avatar pour la liste de contacts. Le design est comme ça, si je peux obtenir l'image du contact, alors j'affiche l'image. Sinon, je dois montrer la lettre majuscule du nom de famille avec une couleur aléatoire. Je sais comment afficher l'image tour

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

Je me demande quelle est la direction pour afficher les sans image et je dois afficher lettre du nom et de remplir l'ellipse avec couleur aléatoire. Mon idée est que dans le getter de l'image, écrivez du code conditionnel pour décider de ce qu'il faut afficher. Mais comment faire l'image avec une lettre donnée et une couleur aléatoire.

Answer 1

Vous pouvez toujours aller de l'avant et générer l'image requise dans le code, mais cela pourrait devenir inutilement compliqué.

je suggère une approche plus simple

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

Dans votre ViewModel vous auriez quelque chose comme ceci:

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

Et une certaine logique pour savoir comment remplir ces propriétés. Si vous avez une image, laissez la propriété Initials vide et définissez FillBrush sur ImageBrush. Si vous n'avez pas d'image, définissez FillBrush sur un nouveau SolidColorBrush initialisé avec une couleur aléatoire et définissez les Intials sur la bonne valeur. * Vous aurez bien sûr besoin de définir le bon style pour le TextBlock et de déclencher les événements NotifyPropertyChanged appropriés dans votre ViewModel. ** Points bonus si vous ne pouvez générer que des couleurs d'arrière-plan aléatoires qui fonctionnent avec le premier plan que vous choisissez pour le TextBlock ou, selon le motif souhaité, choisissez le premier plan blanc ou noir basé sur la couleur d'arrière-plan aléatoire.

Je pense que ce serait beaucoup plus facile de coder et de maintenir et d'être plus rapide au moment de l'exécution que de générer des images lorsque vous n'en avez pas déjà.