Элемент управления "Аватар пользователя"Person picture control

Элемент управления аватаром пользователя отображает аватар для пользователя, если он доступен; в противном случае отображаются инициалы или универсальный глиф.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. Элемент управления можно использовать для отображения объекта Contact, который служит для управления контактными данными пользователя, или можно вручную указать контактные данные, такие как отображаемое имя и изображение профиля.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.

Снимок экрана: элемент управления "Аватар пользователя".

Два элемента управления аватаром пользователя дополнены двумя элементами блоков текста, в которых отображаются имена пользователей.Two person picture controls accompanied by two text block elements that display the users' names.

Получение библиотеки пользовательского интерфейса WindowsGet the Windows UI Library

Логотип WinUI

Элемент управления PersonPicture является частью библиотеки пользовательского интерфейса Windows — пакета NuGet, который содержит новые элементы управления и компоненты пользовательского интерфейса для приложений для 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. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows.For more info, including installation instructions, see Windows UI Library.

API платформы: класс PersonPicture, класс Contact, класс ContactManager.Platform APIs: PersonPicture class, Contact class, ContactManager class

Выбор правильного элемента управленияIs this the right control?

Используйте аватар, когда необходимо представить пользователя и его контактные данные.Use the person picture when you want to represent a person and their contact information. Вот несколько примеров того, как можно использовать элемент управления:Here are some examples of when you might use the control:

  • для отображения текущего пользователя;To display the current user
  • для отображения контактов в адресной книге;To display contacts in an address book
  • для отображения отправителя сообщения;To display the sender of a message
  • для отображения контакта в социальных сетях.To display a social media contact

На рисунке показан элемент управления аватаром в списке контактов: Снимок экрана: элемент управления "Аватар пользователя" в списке контактов.The illustration shows person picture control in a list of contacts: Screenshot that shows the Person Picture control in a list of contacts.

ПримерыExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Если у вас установлено приложение галереи элементов управления XAML, щелкните здесь, чтобы открыть приложение и увидеть PersonPicture в действии.If you have the XAML Controls Gallery app installed, click here to open the app and see the PersonPicture in action.

Использование элемента управления аватаром пользователяHow to use the person picture control

Чтобы создать аватар, используется класс PersonPicture.To create a person picture, you use the PersonPicture class. В этом примере создается элемент управления PersonPicture и вручную предоставляется имя пользователя, аватар и инициалы: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>

Использование элемента управления аватаром пользователя для отображения объекта ContactUsing the person picture control to display a Contact object

Элемент управления выбором пользователя можно использовать для отображения объекта 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();
        }
    }
}

Примечание

Чтобы упростить код, в этом примере создается новый объект Contact.To keep the code simple, this example creates a new Contact object. В реальном приложении для запроса списка контактов пользователь выбрал бы контакт или использовал ContactManager.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. Подробнее о получении и управлении контактами см. в статье "Контакты", "Близкие люди" и "Календарь".For info on retrieving and managing contacts, see the Contacts and calendar articles.

Определение сведений для отображенияDetermining which info to display

Когда вы предоставляете объект Contact, элемент управления аватарами оценивает его, чтобы определить, какие сведения могут отображаться.When you provide a Contact object, the person picture control evaluates it to determine which info it can display.

Если изображение доступно, элемент управления отображает первое изображение, которое находит, в следующем порядке:If an image is available, the control displays the first image it finds, in this order:

  1. LargeDisplayPictureLargeDisplayPicture
  2. SmallDisplayPictureSmallDisplayPicture
  3. ThumbnailThumbnail

Также можно изменить выбираемое изображение, установив для свойства PreferSmallImage значение true. Это придает SmallDisplayPicture более высокий приоритет, чем LargeDisplayPicture.You can change which image is chosen by setting the PreferSmallImage property to true; this gives the SmallDisplayPicture a higher priority than LargeDisplayPicture.

Если изображение не существует, элемент управления отображает имя или инициалы контакта. Если нет данных об имени, этот элемент управления выводит контактные данные, например, электронный адрес или номер телефона.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.

Получение примера кодаGet the sample code