AvatarView

CommunityToolKit MAUI AvatarView es un control para mostrar la imagen de avatar de un usuario o sus iniciales. Los avatares pueden ser texto, imagen, coloreado, con forma y admite sombras y gestos.

Syntax

Incluir el espacio de nombres XAML

Para usar el kit de herramientas en XAML, es necesario agregar el siguiente xmlns a la página o vista:

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

Por lo tanto, lo siguiente:

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

Se modificaría para incluir el xmlns de la siguiente manera:

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

Uso de AvatarView

En el siguiente ejemplo se muestra cómo crear un 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>

El código de C# equivalente es el siguiente:

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Propiedades

Estas propiedades están respaldadas por BindableProperty objetos, lo que significa que pueden ser destinos de enlaces de datos y estilos.

Para obtener información sobre cómo especificar fuentes en un AvatarView, consulta Fuentes.

Para obtener información sobre cómo especificar sombras en un AvatarView, vea Sombras.

Establecer color de fondo

La BackgroundColor propiedad es un color que determina el color de fondo del control.

En el ejemplo siguiente se establece el color de fondo de un AvatarView:

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

El código de C# equivalente es el siguiente:

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

Para obtener más información sobre los colores, vea Colores.

Establecer el color del borde

La BorderColor propiedad es un color que determina el color de borde del control.

El siguiente ejemplo establece el color del borde de un AvatarView:

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

El código de C# equivalente es el siguiente:

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

Para obtener más información sobre los colores, vea Colores.

Establecer el ancho del borde

La BorderWidth propiedad es un doble que determina el ancho representado del borde de control.

En el siguiente ejemplo se define el ancho del borde de un AvatarView:

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

El código de C# equivalente es el siguiente:

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

Establecer el radio de esquina

La CornerRadius propiedad es un CornerRadius que determina la forma del control. Se puede establecer en un único valor double de radio de esquina uniforme o como una estructura CornerRadius definida por cuatro valores double que se aplican a las esquinas superior izquierda, superior derecha, inferior izquierda e inferior derecha del control.

En el ejemplo siguiente se establece el radio de esquina de un AvatarView modo que cada una de las cuatro esquinas tiene un radio especificado:

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

El código de C# equivalente es el siguiente:

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

En el ejemplo siguiente se establece el radio de esquina de un AvatarView modo que las cuatro esquinas tienen el mismo radio:

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

El código de C# equivalente es el siguiente:

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

Establecimiento del origen de la imagen

La ImageSource propiedad es un ImageSource que determina la imagen del control. Se puede configurar como una imagen obtenida de un archivo, un recurso incrustado, un URI o un flujo.

En el ejemplo siguiente se establece el ImageSource de un AvatarView para que utilice un recurso incrustado:

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

El código de C# equivalente es el siguiente:

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

En el ejemplo siguiente se establece el ImageSource de un AvatarView para que use una dirección URL:

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

El código de C# equivalente es el siguiente:

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

Establecer relleno

La propiedad Padding es un grosor que representa la distancia entre el borde del control y el Text o ImageSource.

En el ejemplo siguiente se establece el Padding de un objeto AvatarView:

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

El código de C# equivalente es el siguiente:

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

Establecer texto

La Text propiedad es una cadena que determina el texto del control.

En el siguiente ejemplo se establece el Text de un objeto AvatarView:

<toolkit:AvatarView Text="ST" />

El código de C# equivalente es el siguiente:

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

Establecer color de texto

La TextColor propiedad es un color que determina el color de texto del control.

En el ejemplo siguiente se establece el color del texto de un AvatarView:

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

El código de C# equivalente es el siguiente:

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

Para obtener más información sobre los colores, vea Colores.

Ejemplos

Puede encontrar ejemplos de este control en acción en la Aplicación de ejemplo del Kit de herramientas de la Comunidad de .NET MAUI.

API

Puede encontrar el código fuente de AvatarView en el repositorio .NET MAUI Community Toolkit GitHub.