AvatarView

O COMMUNITYToolKit MAUI AvatarView é um controle para exibir a imagem de avatar de um usuário ou suas iniciais. Os avatares podem conter texto e imagem, ter cores e formatos variados e suportam sombras e gestos.

Syntax

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>

Usando 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>

O código C# equivalente é:

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Propriedades

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que elas podem ser alvos de associaçõ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 Shadows

Definir cor da tela de fundo

BackgroundColor é uma propriedade do tipo cor que determina a cor de fundo do controle.

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

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

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 Color que define a cor da borda do controle.

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

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

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 é do tipo double e determina a largura renderizada da borda do controle.

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

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

O código C# equivalente é:

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

Definir o raio de canto

A propriedade CornerRadius é um valor de raio de canto que define o formato do controle. Ele pode ser definido como um único valor de double uniforme para o raio dos cantos ou como uma estrutura CornerRadius definida por quatro valores double, aplicados aos cantos superior esquerdo, superior direito, inferior esquerdo e inferior direito do controle.

O exemplo a seguir define o raio dos cantos de um AvatarView de modo que cada um dos quatro cantos tenha um raio específico:

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

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 modo que todos os quatro cantos tenham o mesmo raio:

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

O código C# equivalente é:

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

Definir origem da imagem

A propriedade ImageSource é do tipo ImageSource e define 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" />

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 usar uma URL:

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

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 do controle e o Text ou ImageSource.

O exemplo a seguir define o Padding de um AvatarView:

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

O código C# equivalente é:

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

Definir texto

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

O exemplo a seguir define o Text de um AvatarView:

<toolkit:AvatarView Text="ST" />

O código C# equivalente é:

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

Definir cor do texto

A TextColor propriedade é 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" />

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.