인물 사진 컨트롤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.

Windows UI 라이브러리 가져오기Get the Windows UI Library

WinUI 로고

PersonPicture 컨트롤은 Windows 앱용 새 컨트롤과 UI 기능을 포함하는 NuGet 패키지인 Windows UI 라이브러리의 일부로 포함되어 있습니다.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 UI 라이브러리를 참조하세요.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>

인물 사진 컨트롤을 사용하여 Contact 개체 표시Using 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. 미리 보기Thumbnail

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