ユーザー画像コントロール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.

ユーザー画像コントロールのスクリーンショット。

ユーザーの名前を表示する 2 つのテキスト ブロック要素が付属している 2 つのユーザー画像コントロール。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 Library (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 コントロール ギャラリーXAML 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