Partager via

Contrôle de l'image de profil

Le contrôle de photo de la personne affiche l’image d’avatar d’une personne, si celle-ci est disponible. Dans le cas contraire, il affiche les initiales de la personne ou un glyphe générique. Vous pouvez utiliser le contrôle pour afficher un objet Contact, un objet qui gère les informations de contact d'une personne ou fournir manuellement des informations de contact, telles qu'un nom d'affichage et une image de profil.

Voici deux contrôles de photo de personne associés à deux éléments bloc de texte qui présentent les noms des utilisateurs.

Capture d’écran du contrôle de la photo de la personne.

Est-ce le contrôle approprié ?

Utiliser la photo de la personne quand vous souhaitez représenter une personne et ses coordonnées. Voici quelques exemples de cas dans lesquels vous pouvez utiliser ce contrôle :

  • Pour afficher l’utilisateur actuel
  • Pour afficher les contacts d’un carnet d’adresses
  • Pour afficher l’expéditeur d’un message
  • Pour afficher un contact de réseau social

L’illustration montre le contrôle de photo de la personne dans une liste de contacts : Capture d’écran montrant le contrôle de photo de la personne dans une liste de contacts.

Créer une photo de personne

Ouvrez l’application galerie WinUI 3 et consultez PersonPicture en action

Icône galerie WinUI 3 L’application Galerie WinUI 3 inclut des exemples interactifs de contrôles et de fonctionnalités WinUI. Obtenez l’application à partir du Microsoft Store ou parcourez le code source sur GitHub.

La classe PersonPicture vous permet de créer une photo de la personne. Cet exemple crée un contrôle PersonPicture et fournit manuellement le nom d’affichage de la personne, sa photo de profil et ses initiales :

<PersonPicture
    DisplayName="Betsy Sherman"
    ProfilePicture="Assets\BetsyShermanProfile.png"
    Initials="BS" />

Utilisation du contrôle d'image de personne pour afficher un objet Contact

Vous pouvez utiliser le contrôle image de personne pour afficher un objet Contact :

<Page
    x:Class="SampleApp.PersonPictureContactExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <PersonPicture
            Contact="{x:Bind CurrentContact, Mode=OneWay}" />

        <Button Click="LoadContactButton_Click">Load contact</Button>
    </StackPanel>
</Page>

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.ApplicationModel.Contacts;

namespace SampleApp
{
    public sealed partial class PersonPictureContactExample : Page, System.ComponentModel.INotifyPropertyChanged
    {
        public PersonPictureContactExample()
        {
            this.InitializeComponent();
        }

        private Windows.ApplicationModel.Contacts.Contact _currentContact;
        public Windows.ApplicationModel.Contacts.Contact CurrentContact
        {
            get => _currentContact;
            set
            {
                _currentContact = value;
                PropertyChanged?.Invoke(this,
                    new System.ComponentModel.PropertyChangedEventArgs(nameof(CurrentContact)));
            }

        }
        public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

        public static async System.Threading.Tasks.Task<Windows.ApplicationModel.Contacts.Contact> CreateContact()
        {

            var contact = new Windows.ApplicationModel.Contacts.Contact();
            contact.FirstName = "Betsy";
            contact.LastName = "Sherman";

            // Get the app folder where the images are stored.
            var appInstalledFolder =
                Windows.ApplicationModel.Package.Current.InstalledLocation;
            var assets = await appInstalledFolder.GetFolderAsync("Assets");
            var imageFile = await assets.GetFileAsync("betsy.png");
            contact.SourceDisplayPicture = imageFile;

            return contact;
        }

        private async void LoadContactButton_Click(object sender, RoutedEventArgs e)
        {
            CurrentContact = await CreateContact();
        }
    }
}

Note

Pour conserver un code simple, cet exemple crée un objet Contact. Dans une application réelle, vous permettez à l'utilisateur de sélectionner un contact ou d'utiliser un ContactManager pour rechercher une liste de contacts. Pour plus d’informations sur la récupération et la gestion des contacts, consultez les articles Contacts et calendriers.

Détermination des informations à afficher

Lorsque vous fournissez un objet Contact, le contrôle image de la personne l’évalue pour déterminer les informations qu’il peut afficher.

Si une photo est disponible, le contrôle affiche la première image qu’il trouve, dans cet ordre :

  1. GrandeImageD'Affichage
  2. PetiteImageD'Affichage
  3. Miniature

Vous pouvez changer l’image choisie en définissant la propriété PreferSmallImage sur true. Cela offre à SmallDisplayPicture une priorité supérieure à celle de LargeDisplayPicture.

En l’absence d’image, le contrôle affiche le nom du contact ou ses initiales. S’il n’existe aucune donnée de nom, le contrôle affiche les données du contact, telles que son adresse e-mail ou son numéro de téléphone.

  • Last updated on