Személykép-vezérlő

A személy képvezérlője megjeleníti egy személy avatarképét, ha van ilyen; ha nem, megjeleníti a személy monogramját vagy egy általános karakterjelet. A vezérlővel megjeleníthet egy Contact objektumot, amely egy személy kapcsolattartási adatait kezeli, vagy manuálisan adhat meg kapcsolattartási adatokat, például megjelenítendő nevet és profilképet.

Íme két személy képvezérlője, amelyhez két szövegblokk tartozik, a felhasználók nevét megjelenítő elemeket.

Ez a megfelelő vezérlő?

A személy képét akkor használja, ha egy személyt és a kapcsolattartási adatait szeretné ábrázolni. Íme néhány példa arra, hogy mikor használhatja a vezérlőt:

• Az aktuális felhasználó megjelenítése
• Névjegyek megjelenítése címjegyzékben
• Üzenet feladójának megjelenítése
• Közösségimédia-partner megjelenítése

Az ábrán a személy képvezérlője látható a partnerek listájában:

Személykép létrehozása

• Fontos API-k:PersonPicture osztály

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a PersonPicture működését

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Személykép létrehozásához használja a PersonPicture osztályt. Ez a példa létrehoz egy PersonPicture vezérlőt, és manuálisan adja meg a személy megjelenítendő nevét, profilképét és monogramját:

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

Névjegyobjektum megjelenítése a személy képvezérlőjének használatával

A személy képvezérlővel megjeleníthet egy Contact objektumot:

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

Megjegyzés:

A kód egyszerűségéhez ez a példa létrehoz egy új contact objektumot. Egy valós alkalmazásban a felhasználó kijelölhet egy partnert, vagy ContactManager használatával lekérdezheti a partnerek listáját. A partnerek lekéréséről és kezeléséről további információkért tekintse meg a Névjegyekről és naptári bejegyzésekről szóló cikkeket.

A megjelenítendő információk meghatározása

Ha egy Contact objektumot ad meg, a személy képvezérlője kiértékeli, hogy melyik információ jeleníthető meg.

Ha egy kép elérhető, a vezérlő az első megtalált képet jeleníti meg ebben a sorrendben:

1. Nagy Kijelző Kép
2. KisKijelzőKép
3. Bélyegkép

A PreferSmallImage tulajdonság igaz értékre állításával módosíthatja, hogy melyik kép legyen kiválasztva; Ez magasabb prioritást biztosít a SmallDisplayPicture-nek, mint a LargeDisplayPicture.

Ha nincs kép, a vezérlő megjeleníti a partner nevét vagy monogramját; ha nincsenek névadatok, a vezérlő megjeleníti a kapcsolattartási adatokat, például egy e-mail-címet vagy telefonszámot.

Kapcsolódó cikkek

• Névjegyek és naptár
• Kontact-kártyák mintája