Partilhar via

AvatarView

  • Artigo

O AvatarView do CommunityToolKit MAUI é um controle para exibir a imagem de avatar de um usuário ou suas iniciais. Os avatares podem ser texto, imagem, coloridos, ter forma e dão suporte a sombras e gestos.

Sintaxe

Incluir o namespace XAML

Para usar o kit de ferramentas no XAML, o xmlns a seguir precisa ser adicionado à sua página ou exibição:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Portanto, o seguinte:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Seria modificado para incluir o xmlns conforme o seguinte:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Usar o AvatarView

O seguinte exemplo mostra como criar um AvatarView:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <VerticalStackLayout>
        <toolkit:AvatarView Text="ZS" />
    </VerticalStackLayout>
</ContentPage>

Este é o código C# equivalente:

using CommunityToolkit.Maui.Views;

partial class MyPage : ContentPage
{
	public MyPage()
	{
		AvatarView avatarView = new()
		{
			Text = "ZS",
		};

		Content = avatarView;
	}
}

Propriedades

Propriedade Type Descrição
BackgroundColor Color A propriedade BackgroundColor é uma Cor que determina a cor da tela de fundo do controle. Se não estiver definido, a tela de fundo será o objeto Color padrão, que será renderizado como Branco.
BorderColor Color A propriedade BorderColor é uma Cor que determina a cor da borda do controle. Se não estiver definido, a borda será o objeto Color padrão, que será renderizado como Preto.
BorderWidth double A propriedade BorderWidth é um duplo que determina a largura renderizada da borda de controle. Se não estiver definido, a largura da borda será o padrão, que será renderizado como 1,0.
CornerRadius CornerRadius A propriedade CornerRadius é um CornerRadius que determina a forma do controle. Ele pode ser definido como um único valor de raio de canto uniforme double ou uma estrutura CornerRadius definida por quatro valores de double aplicados à parte superior esquerda, superior direita, inferior esquerda e inferior direita do controle. Essa propriedade é medida em unidades independentes do dispositivo. Se não for definido, o raio de canto será o objeto CornerRadius padrão, que será renderizado como 24.
ImageSource ImageSource A propriedade ImageSource é um ImageSource que determina a imagem do controle. Ele pode ser definido como uma imagem recuperada de um arquivo, recurso inserido, URI ou fluxo. Se não estiver definido, o controle renderizará a propriedade Text.
Preenchimento Thickness A propriedade Padding é uma Espessura que representa a distância entre a borda de controle e o Text ou ImageSource. Se não estiver definido, o preenchimento será o objeto Thickness padrão, que é 1.
Texto string A propriedade Text é uma cadeia de caracteres que determina o texto do controle. Se não estiver definido, o texto será o padrão, que será renderizado como '?'.
TextColor Color A propriedade TextColor é uma Cor que determina a cor do texto do controle. Se não estiver definido, o texto será o objeto Colour padrão.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que elas podem ser o destino de vinculações de dados e estilizadas.

Para obter informações sobre como especificar fontes em um AvatarView, consulte Fontes.

Para obter informações sobre como especificar sombras em um AvatarView, consulte Sombras

Importante

O AvatarView usará o WidthRequest padrão e HeightRequest de 48, a menos que o tamanho do AvatarView seja restringido por seu layout ou a propriedade HeightRequest ou WidthRequest do AvatarView seja especificada. As propriedades WidthRequest e HeightRequest são medidas em unidades independentes do dispositivo.

Definir cor da tela de fundo

A propriedade BackgroundColor é uma Cor que determina a cor da tela de fundo do controle.

O exemplo a seguir define a cor da tela de fundo de um AvatarView:

<toolkit:AvatarView BackgroundColor="Red" Text="BC" />

Este é o código C# equivalente:

AvatarView avatarView = new()
{
	Text = "BC",
	BackgroundColor = Colors.Red,
};

Para obter mais informações sobre cores, consulte Cores.

Definir cor da borda

A propriedade BorderColor é uma Cor que determina a cor da borda do controle.

O exemplo a seguir define a cor da borda de um AvatarView:

<toolkit:AvatarView BorderColor="Blue" Text="BC" />

Este é o código C# equivalente:

AvatarView avatarView = new()
{
	Text = "BC",
	BorderColor = Colors.Blue,
};

Para obter mais informações sobre cores, consulte Cores.

Definir largura da borda

A propriedade BorderWidth é um duplo que determina a largura renderizada da borda de controle.

O exemplo a seguir define a largura da borda de um AvatarView:

<toolkit:AvatarView BorderWidth="2" Text="BW" />

Este é o código C# equivalente:

AvatarView avatarView = new()
{
	Text = "BW",
	BorderWidth = 2,
};

Definir o raio de canto

A propriedade CornerRadius é um CornerRadius que determina a forma do controle. Ele pode ser definido como um único valor de raio de canto uniforme double ou uma estrutura CornerRadius definida por quatro valores de double aplicados à parte superior esquerda, superior direita, inferior esquerda e inferior direita do controle.

O exemplo a seguir define o raio de canto de um AvatarView de modo que cada um dos quatro cantos tenha um raio especificado:

<toolkit:AvatarView CornerRadius="8, 12, 16, 20" HeightRequest="48" Text="CR" WidthRequest="48" />

Este é o código C# equivalente:

AvatarView avatarView = new()
{
	CornerRadius = new(8, 12, 16, 20),
	HeightRequest = 48,
	Text = "CR",
	WidthRequest = 48,
};

O exemplo a seguir define o raio de canto de um AvatarView de modo que todos os quatro cantos tenha o mesmo raio:

<toolkit:AvatarView CornerRadius="8" HeightRequest="48" Text="CR" WidthRequest="48" />

Este é o código C# equivalente:

AvatarView avatarView = new()
{
	CornerRadius = new(8),
	HeightRequest = 48,
	Text = "CR",
	WidthRequest = 48,
};

Definir origem da imagem

A propriedade ImageSource é um ImageSource que determina a imagem do controle. Ele pode ser definido como uma imagem recuperada de um arquivo, recurso inserido, URI ou fluxo.

O exemplo a seguir define o ImageSource de um AvatarView para usar um recurso inserido:

<toolkit:AvatarView ImageSource="Avatar_Icon_.png" Text="IS" />

Este é o código C# equivalente:

AvatarView avatarView = new()
{
	ImageSource = "Avatar_Icon_.png",
	Text = "IS",
};

O exemplo a seguir define o ImageSource de um AvatarView para um URL:

<toolkit:AvatarView ImageSource="https://aka.ms/campus.jpg" Text="IS" />

Este é o código C# equivalente:

AvatarView avatarView = new()
{
	ImageSource = "https://aka.ms/campus.jpg",
	Text = "IS",
};

Definir preenchimento

A propriedade Padding é uma Espessura que representa a distância entre a borda de controle e o Text ou ImageSource.

O seguinte exemplo define o Padding de um AvatarView:

<toolkit:AvatarView Padding="2" Text="PA" />

Este é o código C# equivalente:

AvatarView avatarView = new()
{
	Padding = 2,
	Text = "PA",
};

Definir texto

A propriedade Text é uma cadeia de caracteres que determina o texto do controle.

O seguinte exemplo define o Text de um AvatarView:

<toolkit:AvatarView Text="ST" />

Este é o código C# equivalente:

AvatarView avatarView = new()
{
	Text = "ST",
};

Definir cor do texto

A propriedade TextColor é uma Cor que determina a cor do texto do controle.

O exemplo a seguir define a cor do texto de um AvatarView:

<toolkit:AvatarView Text="TC" TextColor="Green" />

Este é o código C# equivalente:

AvatarView avatarView = new()
{
	Text = "TC",
	TextColor = Colors.Green,
};

Para obter mais informações sobre cores, consulte Cores.

Exemplos

Você pode encontrar exemplos desse controle na prática no Aplicativo de exemplo do Kit de Ferramentas da Comunidade do .NET MAUI.

API

O código-fonte do AvatarView pode ser encontrado no repositório GitHub do .NET MAUI Community Toolkit.