Controllo immagine di personaPerson picture control

Il controllo immagine di persona visualizza, se disponibile, l'immagine avatar di una persona. In caso contrario, visualizza le sue iniziali o un glifo generico.The person picture control displays the avatar image for a person, if one is available; if not, it displays the person's initials or a generic glyph. Puoi usare il controllo per visualizzare un Oggetto Contact o un oggetto che gestisce le informazioni di contatto della persona. Altrimenti, puoi specificare manualmente le informazioni di contatto, ad esempio un nome visualizzato e un'immagine di profilo.You can use the control to display a Contact object, an object that manages a person's contact info, or you can manually provide contact information, such as a display name and profile picture.

Screenshot del controllo PersonPicture.

I due controlli immagine di persona accompagnati da due elementi blocco di testo che visualizzano i nomi degli utenti.Two person picture controls accompanied by two text block elements that display the users' names.

Ottenere la libreria dell'interfaccia utente di WindowsGet the Windows UI Library

Logo WinUI

Il controllo PersonPicture è incluso come parte della libreria dell'interfaccia utente di Windows, un pacchetto NuGet che contiene nuovi controlli e funzionalità dell'interfaccia utente per le app di Windows.The PersonPicture control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. Per altre informazioni, incluse le istruzioni per l'installazione, vedi Libreria dell'interfaccia utente di Windows.For more info, including installation instructions, see Windows UI Library.

API della piattaforma: Classe PersonPicture, Classe Contact, Classe ContactManagerPlatform APIs: PersonPicture class, Contact class, ContactManager class

È il controllo giusto?Is this the right control?

Usa l'immagine di persona quando vuoi rappresentare una persona e le relative informazioni di contatto.Use the person picture when you want to represent a person and their contact information. Ecco alcuni esempi delle situazioni in cui potresti usare il controllo:Here are some examples of when you might use the control:

  • Per visualizzare l'utente correnteTo display the current user
  • Per visualizzare i contatti in una rubricaTo display contacts in an address book
  • Per visualizzare il mittente di un messaggioTo display the sender of a message
  • Per visualizzare un contatto di social mediaTo display a social media contact

L'illustrazione mostra il controllo immagine di persona in un elenco di contatti: Screenshot che mostra il controllo PersonPicture in un elenco di contatti.The illustration shows person picture control in a list of contacts: Screenshot that shows the Person Picture control in a list of contacts.

EsempiExamples

Raccolta di controlli XAMLXAML Controls Gallery
XAML controls gallery

Se è installata l'app Raccolta di controlli XAML, fai clic qui per aprirla e vedere PersonPicture in azione.If you have the XAML Controls Gallery app installed, click here to open the app and see the PersonPicture in action.

Come usare il controllo immagine di personaHow to use the person picture control

Per creare un'immagine di persona, usa la classe PersonPicture.To create a person picture, you use the PersonPicture class. Questo esempio crea un controllo PersonPicture e fornisce manualmente il nome visualizzato della persona, l'immagine di profilo e le iniziali:This example creates a PersonPicture control and manually provides the person's display name, profile picture, and initials:

<Page
    x:Class="App2.ExamplePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    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
            DisplayName="Betsy Sherman"
            ProfilePicture="Assets\BetsyShermanProfile.png"
            Initials="BS" />
    </StackPanel>
</Page>

Uso del controllo immagine di persona per visualizzare un oggetto ContactUsing the person picture control to display a Contact object

Puoi usare il controllo selezione persona per visualizzare un oggetto Contact:You can use the person picker control to display a Contact object:

<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();
        }
    }
}

Nota

Per mantenere il codice semplice, questo esempio crea un nuovo oggetto Contact.To keep the code simple, this example creates a new Contact object. In un'app reale, potresti consentire all'utente di selezionare un contatto o usare un ContactManager per eseguire una query di un elenco di contatti.In a real app, you'd let the user select a contact or you'd use a ContactManager to query for a list of contacts. Per informazioni su recupero e gestione dei contatti, vedi gli Articoli contatti e calendario.For info on retrieving and managing contacts, see the Contacts and calendar articles.

Determinare quali informazioni visualizzareDetermining which info to display

Quando fornisci un oggetto Contact, il controllo immagine di persona lo valuta per determinare quali informazioni può visualizzare.When you provide a Contact object, the person picture control evaluates it to determine which info it can display.

Se è disponibile un'immagine, il controllo visualizza la prima immagine che trova, in questo ordine:If an image is available, the control displays the first image it finds, in this order:

  1. LargeDisplayPictureLargeDisplayPicture
  2. SmallDisplayPictureSmallDisplayPicture
  3. AnteprimaThumbnail

Puoi modificare qual è l'immagine scelta impostando la proprietà PreferSmallImage su true. Ciò conferirà a SmallDisplayPicture una priorità più alta rispetto a LargeDisplayPicture.You can change which image is chosen by setting the PreferSmallImage property to true; this gives the SmallDisplayPicture a higher priority than LargeDisplayPicture.

Se non è disponibile alcuna immagine, il controllo visualizza il nome del contatto o le iniziali. Qualora non vi sia alcun dato relativo al nome, il controllo visualizza dati del contatto, come un indirizzo e-mail o un numero di telefono.If there isn't an image, the control displays the contact's name or initials; if there's isn't any name data, the control displays contact data, such as an email address or phone number.

Scaricare il codice di esempioGet the sample code