Compartir a través de

AvatarView

  • Artículo

AvatarView del kit de herramientas de la comunidad .NET MAUI 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.

Sintaxis

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

Propiedad Tipo Descripción
BackgroundColor Color La propiedad BackgroundColor es un color que determina el color de fondo del control. Si no se establece, el fondo será el objeto Color predeterminado, que se representa como Blanco.
BorderColor Color La propiedad BorderColor es un color que determina el color de borde del control. Si no se establece, el borde será el objeto Color predeterminado, que se representa como Negro.
BorderWidth double La propiedad BorderWidth es un doble que determina el ancho representado del borde de control. Si no se establece, el ancho del borde será el valor predeterminado, que se representa como 1.0.
CornerRadius CornerRadius La propiedad CornerRadius es un CornerRadius que determina la forma del control. Se puede establecer en un único valor double de radio de esquina uniforme o una estructura CornerRadius definida por cuatro valores double que se aplican a la parte superior izquierda, superior derecha, inferior izquierda e inferior derecha del control. Esta propiedad se mide en unidades independientes del dispositivo. Si no se establece, el radio de esquina será el objeto CornerRadius predeterminado, que se representa como 24.
ImageSource ImageSource La propiedad ImageSource es una ImageSource que determina la imagen del control. Se puede establecer en una imagen recuperada de un archivo, un recurso incrustado, un URI o una secuencia. Si no se establece, el control representará la propiedad Text.
Relleno Thickness La propiedad Padding es un Thickness que representa la distancia entre el borde de control Text o ImageSource. Si no se establece, el relleno será el objeto Thickness predeterminado, que es 1.
Texto string La propiedad Text es una cadena que determina el texto del control. Si no se establece, el texto será el valor predeterminado, que se representa como "?".
TextColor Color La propiedad TextColor es un color que determina el color de texto del control. Si no se establece, el texto será el objeto Colour predeterminado.

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

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

Importante

AvatarView usará el valor predeterminado WidthRequest y HeightRequest de 48, a menos que el tamaño de AvatarView esté restringido por su diseño, o bien se especifique la propiedad HeightRequest o WidthRequest de AvatarView. Las propiedades WidthRequest y HeightRequest se miden en unidades independientes del dispositivo.

Establecimiento de color de fondo

La propiedad BackgroundColor 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 acerca de los colores, consulta Colores.

Establecimiento del color del borde

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

En el ejemplo siguiente se establece el color del borde de 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 acerca de los colores, consulta Colores.

Establecimiento del ancho del borde

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

En el ejemplo siguiente se establece el ancho del borde de AvatarView:

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

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

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

Establecimiento del radio de redondeo

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

En el ejemplo siguiente se establece el radio de esquina de un AvatarView tal 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 tal 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 de la origen de imagen

La propiedad ImageSource es una ImageSource que determina la imagen del control. Se puede establecer en una imagen recuperada de un archivo, un recurso incrustado, un URI o una secuencia.

En el ejemplo siguiente se establece el ImageSource de AvatarView para usar 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 AvatarView para usar 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",
};

Establecimiento de relleno

La propiedad Padding es un Thickness que representa la distancia entre el borde de control Text o ImageSource.

En el ejemplo siguiente se establece el Padding de un 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 propiedad Text es una cadena que determina el texto del control.

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

<toolkit:AvatarView Text="ST" />

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

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

Establecimiento de color de texto

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

En el ejemplo siguiente se establece el color de texto de un objeto 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 acerca de los colores, consulta Colores.

Ejemplos

Puede encontrar un ejemplo de este comportamiento 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 de GitHub del Kit de herramientas de la comunidad de .NET MAUI.