Controllo per l'immagine del profilo

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. È possibile utilizzare il controllo per visualizzare un oggetto Contact, un oggetto che gestisce le informazioni di contatto di una persona oppure è possibile fornire manualmente informazioni di contatto, ad esempio un nome visualizzato e un'immagine del profilo.

Ecco due controlli immagine utente accompagnati da due elementi del blocco di testo che visualizzano i nomi degli utenti.

Questo è il controllo giusto?

Usa l'immagine di persona quando vuoi rappresentare una persona e le relative informazioni di contatto. Ecco alcuni esempi delle situazioni in cui potresti usare il controllo:

• Per visualizzare l'utente corrente
• Per visualizzare i contatti in una rubrica
• Per visualizzare il mittente di un messaggio
• Per visualizzare un contatto di social media

L'illustrazione mostra il controllo Immagine persona in un elenco di contatti:

Creare un'immagine di persona

• API importanti: classe PersonPicture

Aprire l'app Raccolta WinUI 3 e vedere PersonPicture in azione

L'app Raccolta WinUI 3 include esempi interattivi di controlli e funzionalità WinUI. Ottenere l'app dal Microsoft Store o esplorare il codice sorgente in GitHub.

Per creare un'immagine di persona, usa la classe PersonPicture. Questo esempio crea un controllo PersonPicture e fornisce manualmente il nome visualizzato della persona, l'immagine di profilo e le iniziali:

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

Uso del controllo immagine di persona per visualizzare un oggetto Contact

È possibile utilizzare il controllo immagine persona per visualizzare un oggetto 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();
        }
    }
}

Annotazioni

Per mantenere il codice semplice, questo esempio crea un nuovo oggetto Contact. In un'app reale è possibile selezionare un contatto oppure usare un ContactManager per eseguire una query per un elenco di contatti. Per informazioni sul recupero e la gestione dei contatti, vedi gli articoli Contatti e calendario.

Determinare quali informazioni visualizzare

Quando fornisci un oggetto Contact, il controllo immagine persona lo valuta per determinare quali informazioni può visualizzare.

Se è disponibile un'immagine, il controllo visualizza la prima immagine che trova, in questo ordine:

1. Immagine per display di grandi dimensioni
2. SmallDisplayPicture
3. Immagine di anteprima

Puoi modificare qual è l'immagine scelta impostando la proprietà PreferSmallImage su true. Ciò conferirà a SmallDisplayPicture una priorità più alta rispetto a 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.

Articoli correlati

• Contatti e calendario
• Esempio di schede di contatto