Share via

Kontrol gambar orang

  • Artikel

Kontrol gambar orang menampilkan gambar avatar untuk seseorang, jika tersedia; jika tidak, ia menampilkan inisial orang tersebut atau glyph generik. Anda bisa menggunakan kontrol untuk menampilkan objek Kontak, objek yang mengelola info kontak seseorang, atau Anda bisa memberikan informasi kontak secara manual, seperti nama tampilan dan gambar profil.

Berikut adalah kontrol gambar dua orang yang disertai dengan dua elemen blok teks yang menampilkan nama pengguna.

Cuplikan layar kontrol gambar orang.

Apakah ini kontrol yang tepat?

Gunakan gambar orang tersebut saat Anda ingin mewakili seseorang dan informasi kontak mereka. Berikut adalah beberapa contoh kapan Anda mungkin menggunakan kontrol:

  • Untuk menampilkan pengguna saat ini
  • Untuk menampilkan kontak dalam buku alamat
  • Untuk menampilkan pengirim pesan
  • Untuk menampilkan kontak media sosial

Ilustrasi memperlihatkan kontrol gambar orang dalam daftar kontak: Cuplikan layar yang memperlihatkan kontrol Gambar Orang dalam daftar kontak.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

Kontrol PersonPicture untuk aplikasi UWP disertakan sebagai bagian dari Pustaka UI Windows 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat Pustaka Windows UI. API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls dan Microsoft.UI.Xaml.Controls .

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya, templat, dan fitur terbaru untuk semua kontrol.

Untuk menggunakan kode dalam artikel ini dengan WinUI 2, gunakan alias di XAML (kami menggunakan muxc) untuk mewakili API Pustaka Windows UI yang disertakan dalam proyek Anda. Lihat Mulai menggunakan WinUI 2 untuk informasi selengkapnya.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:PersonPicture />

Membuat gambar orang

Buka aplikasi Galeri WinUI 3 dan lihat PersonPicture beraksi.

Aplikasi WinUI 3 Gallery mencakup contoh interaktif sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Untuk membuat gambar orang, Anda menggunakan kelas PersonPicture. Contoh ini membuat kontrol PersonPicture dan secara manual menyediakan nama tampilan, gambar profil, dan inisial orang tersebut:

<PersonPicture
    DisplayName="Betsy Sherman"
    ProfilePicture="Assets\BetsyShermanProfile.png"
    Initials="BS" />

Menggunakan kontrol gambar orang untuk menampilkan objek Kontak

Anda bisa menggunakan kontrol gambar orang tersebut untuk menampilkan objek Kontak :

<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();
        }
    }
}

Catatan

Agar kode tetap sederhana, contoh ini membuat objek Kontak baru. Di aplikasi nyata, Anda akan membiarkan pengguna memilih kontak atau Anda akan menggunakan ContactManager untuk mengkueri daftar kontak. Untuk informasi tentang mengambil dan mengelola kontak, lihat artikel Kontak dan kalender.

Menentukan info mana yang akan ditampilkan

Saat Anda menyediakan objek Kontak , kontrol gambar orang mengevaluasinya untuk menentukan info mana yang dapat ditampilkannya.

Jika gambar tersedia, kontrol menampilkan gambar pertama yang ditemukannya, dalam urutan ini:

  1. LargeDisplayPicture
  2. SmallDisplayPicture
  3. Gambar mini

Anda dapat mengubah gambar mana yang dipilih dengan mengatur properti PreferSmallImage ke true; ini memberi SmallDisplayPicture prioritas yang lebih tinggi daripada LargeDisplayPicture.

Jika tidak ada gambar, kontrol akan menampilkan nama atau inisial kontak; jika tidak ada data nama apa pun, kontrol menampilkan data kontak, seperti alamat email atau nomor telepon.

Dapatkan kode sampel