Kontrol gambar profil

Kontrol gambar profil menampilkan gambar avatar untuk seseorang, jika tersedia; jika tidak, menampilkan inisial orang tersebut atau ikon generik. Anda dapat menggunakan kontrol untuk menampilkan objek Contact, objek yang mengelola info kontak seseorang, atau Anda dapat menyediakan informasi kontak secara manual, seperti nama tampilan dan gambar profil.

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

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:

Membuat gambar orang

• API Penting:Kelas PersonPicture

Buka aplikasi Galeri WinUI 3 dan lihat PersonPicture beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada 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 dapat menggunakan kontrol gambar orang untuk menampilkan objek Contact:

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

Nota

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 meminta daftar kontak. Untuk informasi tentang mengambil dan mengelola kontak, lihat artikel Kontak dan kalender.

Menentukan info mana yang akan ditampilkan

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

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

1. GambarLayarBesar
2. Gambar Tampilan Kecil
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, kontrol menampilkan data kontak, seperti alamat email atau nomor telepon.

Artikel terkait

• Kontak dan kalender
• sampel kartu Contact