Ovládací prvek pro obrázek osoby

Ovládací prvek obrázek osoby zobrazí obrázek avatara pro osobu, pokud je k dispozici; pokud ne, zobrazí iniciály osoby nebo obecný glyf. Ovládací prvek můžete použít k zobrazení objektu Contact, objektu, který spravuje kontaktní údaje osoby, nebo můžete ručně zadat kontaktní údaje, například zobrazované jméno a profilový obrázek.

Tady jsou dva kontroly obrázků osob, které jsou doprovázeny dvěma textovými bloky , které zobrazují jména uživatelů.

Je to správná kontrola?

Obrázek osoby použijte, když chcete reprezentovat osobu a její kontaktní údaje. Tady je několik příkladů použití ovládacího prvku:

• Zobrazení aktuálního uživatele
• Zobrazení kontaktů v adresáři
• Zobrazení odesílatele zprávy
• Zobrazit kontakt ze sociálních médií

Obrázek znázorňuje ovládací prvek obrázek osoby v seznamu kontaktů:

Vytvoření obrázku osoby

• důležitá rozhraní API:třída PersonPicture

Otevření aplikace Galerie WinUI 3 a zobrazení PersonPicture v akci

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

K vytvoření obrázku osoby použijete třídu PersonPicture. Tento příklad vytvoří ovládací prvek PersonPicture a ručně poskytne zobrazované jméno, profilový obrázek a iniciály osoby:

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

Zobrazení objektu Kontaktu pomocí ovládacího prvku obrázek osoby

Ovládací prvek obrázek osoby můžete použít k zobrazení objektu 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();
        }
    }
}

Poznámka:

Aby byl kód jednoduchý, vytvoří tento příklad nový objekt Contact. V reálné aplikaci byste uživateli umožnili vybrat kontakt nebo použít ContactManager dotazovat se na seznam kontaktů. Informace o načítání a správě kontaktů najdete v článku Kontakty a články kalendáře.

Určení informací, které se mají zobrazit

Když poskytnete objekt Contact, ovládací prvek "obraz osoby" jej vyhodnotí a určí, které informace může zobrazit.

Pokud je obrázek k dispozici, ovládací prvek zobrazí první nalezený obrázek v tomto pořadí:

1. VelkýDisplejObrázek
2. MaláObrazovkaObrázek
3. Náhled

Můžete změnit, který obrázek je zvolen nastavením PreferSmallImage vlastnost true; To dává SmallDisplayPicture vyšší prioritu než LargeDisplayPicture.

Pokud není obrázek, ovládací prvek zobrazí jméno nebo iniciály kontaktu; pokud nejsou žádná data o jménu, ovládací prvek zobrazí kontaktní údaje, například e-mailovou adresu nebo telefonní číslo.

Související články

• kontakty a kalendář
• Ukázka karet kontaktů