Controle de imagem da pessoaPerson picture control

O controle de imagem da pessoa exibe a imagem de avatar de uma pessoa, se existir uma disponível. Caso contrário, ele exibe as iniciais da pessoa ou um glifo genérico.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. Você pode usar o controle para exibir um objeto Contact, um objeto que gerencia informações de contato da pessoa ou você pode fornecer informações de contato, como o nome de exibição e a imagem de perfil, manualmente.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.

Captura de tela do controle de imagem da pessoa.

Controles de imagem de duas pessoas acompanhados por dois elementos bloco de texto que exibem os nomes dos usuários.Two person picture controls accompanied by two text block elements that display the users' names.

Obter a biblioteca de interface do usuário do WindowsGet the Windows UI Library

Logotipo do WinUI

O controle PersonPicture está incluído como parte da Biblioteca de interface do usuário do Windows, um pacote NuGet que contém novos controles e recursos de interface do usuário para aplicativos do 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. Para obter mais informações, incluindo instruções de instalação, confira Biblioteca de interface do usuário do Windows.For more info, including installation instructions, see Windows UI Library.

APIs da plataforma: classe PersonPicture, classe Contact, classe ContactManagerPlatform APIs: PersonPicture class, Contact class, ContactManager class

Esse é o controle correto?Is this the right control?

Use a imagem da pessoa quando desejar representar uma pessoa e suas informações de contato.Use the person picture when you want to represent a person and their contact information. Aqui estão alguns exemplos de quando você pode usar o controle:Here are some examples of when you might use the control:

  • Para exibir o usuário atualTo display the current user
  • Para exibir os contatos em um catálogo de endereçosTo display contacts in an address book
  • Para exibir o remetente da mensagemTo display the sender of a message
  • Para exibir um contato de redes sociaisTo display a social media contact

A ilustração mostra o controle de imagem da pessoa em uma lista de contatos: Captura de tela que mostra o controle Imagem da Pessoa em uma lista de contatos.The illustration shows person picture control in a list of contacts: Screenshot that shows the Person Picture control in a list of contacts.

ExemplosExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Se você tiver o aplicativo XAML Controls Gallery instalado, clique aqui para abrir o aplicativo e ver o PersonPicture em ação.If you have the XAML Controls Gallery app installed, click here to open the app and see the PersonPicture in action.

Como usar o controle de imagem da pessoaHow to use the person picture control

Para criar uma imagem da pessoa, você deve usar a classe PersonPicture.To create a person picture, you use the PersonPicture class. Este exemplo cria um controle PersonPicture e fornece manualmente o nome de exibição da pessoa, a foto de perfil e as iniciais: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>

Como usar o controle de imagem da pessoa para exibir um objeto de ContactUsing the person picture control to display a Contact object

Você pode usar o controle seletor de pessoa para exibir um objeto 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();
        }
    }
}

Observação

Para simplificar o código, este exemplo cria um novo objeto Contact.To keep the code simple, this example creates a new Contact object. Em um aplicativo real, você pode permitir que o usuário selecione um contato ou é possível usar ContactManager para consultar uma lista de contatos.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. Para obter informações sobre como recuperar e gerenciar contatos, confira os artigos sobre Contatos e calendário.For info on retrieving and managing contacts, see the Contacts and calendar articles.

Como determinar quais informações devem ser exibidasDetermining which info to display

Ao fornecer um objeto Contact, o controle de imagem da pessoa o avalia para determinar quais informações podem ser exibidas.When you provide a Contact object, the person picture control evaluates it to determine which info it can display.

Se uma imagem estiver disponível, o controle exibirá a primeira imagem encontrada, nesta ordem:If an image is available, the control displays the first image it finds, in this order:

  1. LargeDisplayPictureLargeDisplayPicture
  2. SmallDisplayPictureSmallDisplayPicture
  3. ThumbnailThumbnail

Você pode alterar a imagem escolhida ao definir a propriedade PreferSmallImage como true. Assim, SmallDisplayPicture tem uma prioridade maior do que 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 não houver uma imagem, o controle exibirá o nome ou as iniciais do contato. Se não houver dados de nome, o controle exibirá dados de contato, como um endereço de email ou um número de telefone.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.

Obter o código de exemploGet the sample code