Partilhar via

Controlo de imagem de pessoas

O controle de imagem de pessoa exibe a imagem do avatar de uma pessoa, se houver uma disponível; caso contrário, exibe as iniciais da pessoa ou um glifo genérico. Você pode usar o controle para exibir um objeto de contato , um objeto que gerencia as informações de contato de uma pessoa ou pode fornecer manualmente informações de contato, como um nome para exibição e uma foto de perfil.

Aqui estão dois controles de imagem de pessoa acompanhados por dois elementos de bloco de texto que exibem os nomes dos utilizadores.

Captura de tela do controle de imagem da pessoa.

Será este o controlo correto?

Use a imagem da pessoa quando quiser representar uma pessoa e suas informações de contato. Aqui estão alguns exemplos de quando você pode usar o controle:

  • Para exibir o usuário atual
  • Para exibir contatos em um catálogo de endereços
  • Para exibir o remetente de uma mensagem
  • Para exibir um contato de mídia social

A ilustração mostra o controle de imagem de pessoa em uma lista de contatos: Captura de tela que mostra o controle Imagem de Pessoa em uma lista de contatos.

Criar uma imagem de pessoa

Abra o aplicativo WinUI 3 Gallery e veja PersonPicture em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Para criar uma imagem de pessoa, use a classe PersonPicture. Este exemplo cria um controle PersonPicture e fornece manualmente o nome para exibição, a foto de perfil e as iniciais da pessoa:

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

Usando o controle de imagem de pessoa para exibir um objeto Contact

Você pode usar o controle de imagem de pessoa para exibir um objeto 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();
        }
    }
}

Observação

Para manter o código simples, este exemplo cria um novo objeto Contact. Em um aplicativo real, você permitiria que o usuário selecionasse um contato ou usaria um ContactManager para consultar uma lista de contatos. Para obter informações sobre como recuperar e gerenciar contatos, consulte os artigos Contatos e calendário.

Determinando quais informações exibir

Quando forneces um objeto Contact, o controlo de imagem de perfil avalia-o para determinar quais informações pode exibir.

Se uma imagem estiver disponível, o controle exibirá a primeira imagem encontrada, nesta ordem:

  1. Imagem de Ecrã Grande
  2. ImagemDeEcrãPequena
  3. Miniatura

Você pode alterar qual imagem é escolhida definindo a propriedade PreferSmallImage como true; isso dá ao SmallDisplayPicture uma prioridade maior do que o LargeDisplayPicture.

Se não houver uma imagem, o controle exibirá o nome ou as iniciais do contato; Se não houver dados de nome, o controle exibirá dados de contato, como um endereço de e-mail ou número de telefone.

UWP e WinUI 2

Importante

As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK de Aplicativos Windows e WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam WinUI 2. Consulte a referência da API UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações que você precisa para usar o controle em um aplicativo UWP ou WinUI 2.

O controle PersonPicture para aplicativos UWP está incluído como parte da WinUI 2. Para obter mais informações, incluindo instruções de instalação, consulte WinUI 2. As APIs para esse controle existem nos namespaces Windows.UI.Xaml.Controls e Microsoft.UI.Xaml.Controls .

Recomendamos usar a WinUI 2 mais recente para obter os estilos, modelos e recursos mais atuais para todos os controles.

Para usar o código neste artigo com WinUI 2, use um alias em XAML (usamos muxc) para representar as APIs da Biblioteca da Interface do Usuário do Windows incluídas em seu projeto. Consulte Introdução ao WinUI 2 para obter mais informações.

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

<muxc:PersonPicture />
  • Last updated on