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. 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.

Screenshot of the person picture control.

Two person picture controls accompanied by two text block elements that display the users' names.

Get the Windows UI Library

WinUI logo

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. For more info, including installation instructions, see Windows UI Library.

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.


XAML Controls Gallery
XAML controls gallery

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

To create a person picture, you use the PersonPicture class. This example creates a PersonPicture control and manually provides the person's display name, profile picture, and initials:


    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            DisplayName="Betsy Sherman"
            Initials="BS" />

Using the person picture control to display a Contact object

You can use the person picker control to display a Contact object:


    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

            Contact="{x:Bind CurrentContact, Mode=OneWay}" />

        <Button Click="LoadContactButton_Click">Load contact</Button>
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()

        private Windows.ApplicationModel.Contacts.Contact _currentContact;
        public Windows.ApplicationModel.Contacts.Contact CurrentContact
            get => _currentContact;
                _currentContact = value;
                    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 =
            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();


To keep the code simple, this example creates a new Contact object. 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

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. LargeDisplayPicture
  2. SmallDisplayPicture
  3. Thumbnail

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