Dela via

Personbildkontroll

Personbildkontrollen visar avatarbilden för en person, om en är tillgänglig; om inte, visas personens initialer eller en allmän glyf. Du kan använda kontrollen för att visa ett Contact-objekt, ett objekt som hanterar en persons kontaktinformation, eller så kan du manuellt ange kontaktinformation, till exempel ett visningsnamn och en profilbild.

Här är två personbildkontroller som åtföljs av två textblock element som visar användarnas namn.

Skärmbild av personbildkontrollen.

Är det här rätt kontroll?

Använd personbilden när du vill representera en person och deras kontaktinformation. Här följer några exempel på när du kan använda kontrollen:

  • Så här visar du den aktuella användaren
  • Så här visar du kontakter i en adressbok
  • Så här visar du avsändaren av ett meddelande
  • Så här visar du en kontakt på sociala medier

Bilden visar personbildkontrollen i en lista över kontakter: Skärmbild som visar kontrollen Personbild i en lista över kontakter.

Skapa en personbild

Öppna WinUI 3-galleriappen och se PersonPicture i praktiken

WinUI 3-galleriikon WinUI 3-galleriappen innehåller interaktiva exempel på WinUI-kontroller och funktioner. Hämta appen från Microsoft Store eller bläddra i källkoden på GitHub.

Om du vill skapa en personbild använder du klassen PersonPicture. Det här exemplet skapar en PersonPicture-kontroll och tillhandahåller personens visningsnamn, profilbild och initialer manuellt:

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

Använda personbildkontrollen för att visa ett kontaktobjekt

Du kan använda personbildkontrollen för att visa objektet 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();
        }
    }
}

Anmärkning

För att hålla koden enkel skapar det här exemplet ett nytt kontaktobjekt. I en riktig app låter du användaren välja en kontakt eller använda en ContactManager för att fråga efter en lista med kontakter. Information om hur du hämtar och hanterar kontakter finns i artiklarna Kontakter och kalender.

Avgöra vilken information som ska visas

När du anger ett Contact-objekt utvärderar personbildkontrollen det för att avgöra vilken information den kan visa.

Om en bild är tillgänglig visar kontrollen den första bilden den hittar i följande ordning:

  1. StorDisplayBild
  2. LitenSkärmBild
  3. Förhandsvisningsbild

Du kan ändra vilken bild som väljs genom att ange egenskapen PreferSmallImage till true. Detta ger SmallDisplayPicture en högre prioritet än LargeDisplayPicture.

Om det inte finns någon bild visar kontrollen kontaktens namn eller initialer. Om det inte finns några namndata visar kontrollen kontaktdata, till exempel en e-postadress eller ett telefonnummer.

  • Last updated on