Kontrolka obrazu osoby

Kontrolka obrazu osoby wyświetla obraz awatara dla osoby, jeśli jest dostępna; jeśli nie, wyświetla inicjały osoby lub ogólny glif. Za pomocą kontrolki można wyświetlić obiekt Contact, obiekt, który zarządza informacjami kontaktowymi osoby, lub ręcznie podać informacje kontaktowe, takie jak nazwa wyświetlana i obraz profilu.

Poniżej przedstawiono dwie kontrolki obrazu osoby z dwoma blokami tekstowymi, które wyświetlają imiona użytkowników.

Czy jest to właściwa kontrola?

Użyj obrazu osoby, jeśli chcesz reprezentować osobę i informacje kontaktowe. Oto kilka przykładów użycia kontrolki:

• Aby wyświetlić bieżącego użytkownika
• Aby wyświetlić kontakty w książce adresowej
• Aby wyświetlić nadawcę wiadomości
• Aby wyświetlić kontakt z mediami społecznościowymi

Ilustracja przedstawia kontrolkę obrazu osoby na liście kontaktów:

Tworzenie obrazu osoby

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Aby utworzyć obraz osoby, użyj klasy PersonPicture. W tym przykładzie utworzono kontrolkę PersonPicture i ręcznie podano nazwę wyświetlaną osoby, obraz profilu i inicjały:

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

Wyświetlanie obiektu Kontakt za pomocą kontrolki obrazu osoby

Za pomocą kontrolki obrazu osoby można wyświetlić obiekt kontaktu:

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

Określanie informacji do wyświetlenia

Po podaniu obiektu Kontakt kontrolka obrazu osoby ocenia go w celu określenia, które informacje mogą być wyświetlane.

Jeśli obraz jest dostępny, kontrolka wyświetla pierwszy znalezione obrazy w następującej kolejności:

1. DużyObrazWyświetlania
2. MałyObrazekWyświetlacza
3. Miniatura

Możesz zmienić wybrany obraz, ustawiając właściwość PreferSmallImage na true; daje to parametrowi SmallDisplayPicture wyższy priorytet niż LargeDisplayPicture.

Jeśli nie ma obrazu, kontrolka wyświetla nazwę lub inicjały kontaktu; Jeśli nie ma żadnych danych o nazwie, kontrolka wyświetla dane kontaktowe, takie jak adres e-mail lub numer telefonu.

UwP i WinUI 2

Kontrolka PersonPicture dla aplikacji platformy UWP jest uwzględniana w ramach interfejsu WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tej kontrolki istnieją zarówno w przestrzeniach nazw Windows.UI.Xaml.Controls , jak i Microsoft.UI.Xaml.Controls .

Zalecamy użycie najnowszego interfejsu WinUI 2 , aby uzyskać najbardziej aktualne style, szablony i funkcje dla wszystkich kontrolek.

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

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

<muxc:PersonPicture />

Powiązane artykuły

• kontakty i kalendarz
• przykładowe karty kontaktowe