AvatarView

O CommunityToolKit MAUI AvatarView é um controlo para mostrar a imagem avatar de um utilizador ou as suas iniciais. Os avatares podem ser texto, imagem, coloridos, moldados e suportam sombras e gestos.

Syntax

Incluindo o namespace XAML

Para usar o kit de ferramentas em XAML, a seguinte xmlns precisa ser adicionada à sua página ou vista.

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

Por conseguinte, 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 da seguinte forma:

<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 exemplo a seguir 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

Estas propriedades são suportadas por BindableProperty objetos, o que significa que podem ser alvos de ligações de dados e estilizadas.

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

Para informações sobre a especificação de sombras num AvatarView, veja Sombras

Definir cor de fundo

A BackgroundColor propriedade é uma Cor que determina a cor de fundo do controlo.

O exemplo seguinte define a cor 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 mais informações sobre cores, consulte Cores.

Definir a cor da borda

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

O exemplo seguinte 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 mais informações sobre cores, consulte Cores.

Definir largura da borda

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

O exemplo seguinte 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,
};

Defina o raio do canto

A CornerRadius propriedade é um Raio de Canto que determina a forma do controlo. Pode ser definido para um único double valor uniforme de raio de canto, ou uma CornerRadius estrutura definida por quatro double valores aplicados no canto superior esquerdo, superior direito, inferior esquerdo e inferior direito do controlo.

O exemplo seguinte define o raio do canto de um AvatarView tal que cada um dos quatro cantos tenha um raio especificado:

<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 seguinte define o raio de canto de um AvatarView tal que todos os quatro cantos têm 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 a fonte da imagem

A ImageSource propriedade é um ImageSource que determina a imagem do controlo. Pode ser definido para uma imagem recuperada de um ficheiro, recurso incorporado, URI ou fluxo.

O exemplo seguinte define o ImageSource de um AvatarView para usar um recurso embutido:

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

O código C# equivalente é:

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

O exemplo seguinte 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",
};

Enchimento de cenários

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

O exemplo seguinte define o Padding de um AvatarView:

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

O código C# equivalente é:

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

Texto do conjunto

A Text propriedade é uma cadeia que determina o texto do controlo.

O exemplo seguinte 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 controlo.

O exemplo seguinte 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 mais informações sobre cores, consulte Cores.

Exemplos

Você pode encontrar exemplos desse controle em ação no .NET MAUI Community Toolkit Sample Application.

API

Você pode encontrar o código-fonte para AvatarView no repositório GitHub do .NET MAUI Community Toolkit.