Aracılığıyla paylaş

Resim kişi kontrolü

Kişi resim kontrolü, varsa kişinin avatar resmini görüntüler; avatar yoksa, kişinin baş harflerini veya genel bir simgeyi görüntüler. Contact nesnesini, kişinin kişi bilgilerini yöneten bir nesneyi görüntülemek için denetimi kullanabilir veya görünen ad ve profil resmi gibi kişi bilgilerini el ile sağlayabilirsiniz.

Burada, kullanıcıların adlarını görüntüleyen iki metin bloğu öğesinin eşlik ettiği iki kişi resmi denetimi vardır.

Kişi fotoğrafı kontrolünün ekran görüntüsü.

Doğru kontrol bu mu?

Bir kişiyi ve kişi bilgilerini temsil etmek istediğinizde kişi resmini kullanın. Denetimi ne zaman kullanabileceğinize ilişkin bazı örnekler aşağıda verilmiştir:

  • Geçerli kullanıcıyı görüntülemek için
  • Kişileri adres defterinde görüntülemek için
  • İletinin gönderenini görüntülemek için
  • Sosyal medya kişisini görüntülemek

Çizimde, kişi listesinde Kişi Resmi denetimi gösterilir: Kişi listesinde Kişi Resmi denetimini gösteren ekran görüntüsü.

Kişi resmi oluşturun

WinUI 3 Galeri uygulamasını açın ve PersonPicture'ı çalışır durumda görün

WinUI 3 Galeri simgesi WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Kişi resmi oluşturmak için PersonPicture sınıfını kullanırsınız. Bu örnek bir PersonPicture denetimi oluşturur ve kişinin görünen adını, profil resmini ve baş harflerini el ile sağlar:

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

Kişi nesnesini görüntülemek için kişi resmi kontrolünü kullanma

Contact nesnesini görüntülemek için kişi resmi denetimini kullanabilirsiniz:

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

Uyarı

Kodu basit tutmak için bu örnek yeni bir Contact nesnesi oluşturur. Gerçek bir uygulamada kullanıcının kişi seçmesine izin verirsiniz veya kişi listesini sorgulamak için ContactManager kullanırsınız. Kişileri alma ve yönetme hakkında bilgi için Kişiler ve takvim makalelerine bakın.

Hangi bilgileri görüntüleneceğini belirleme

Contact nesnesi sağladığınızda, kişi resmi kontrolü bu nesneyi değerlendirerek hangi bilgileri görüntüleyebileceğini belirler.

Bir görüntü varsa, denetim bulduğu ilk görüntüyü şu sırada görüntüler:

  1. BüyükEkranResmi
  2. KüçükEkranResmi
  3. Küçük Görsel

PreferSmallImage özelliğini true olarak ayarlayarak hangi görüntünün seçildiğini değiştirebilirsiniz; Bu, SmallDisplayPicture'a LargeDisplayPicture'dan daha yüksek bir öncelik verir.

Görüntü yoksa, denetim kişinin adını veya baş harflerini görüntüler; herhangi bir ad verisi yoksa, denetim e-posta adresi veya telefon numarası gibi kişi verilerini görüntüler.

  • Last updated on