AvatarView

CommunityToolKit MAUI AvatarView est un contrôle permettant d’afficher l’image d’avatar d’un utilisateur ou ses initiales. Les avatars peuvent contenir du texte ou une image, être colorés, prendre différentes formes et prendre également en charge les ombres portées et les gestes.

Syntax

Y compris l’espace de noms XAML

Pour utiliser le kit de ressources dans XAML, le xmlns suivant doit être ajouté à votre page ou à votre affichage :

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

Par conséquent, ce qui suit :

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

Serait modifié pour inclure le xmlns de la manière suivante :

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

Utilisation de AvatarView

L’exemple suivant montre comment créer 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>

Le code C# équivalent est :

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Propriétés

Ces propriétés reposent sur des objets BindableProperty, ce qui signifie qu’elles peuvent servir de cibles pour des liaisons de données et être stylisées.

Pour plus d’informations sur la spécification des polices sur un AvatarView, consultez Polices.

Pour plus d’informations sur la spécification d’ombres sur un AvatarViewobjet , consultez Ombres

Définir la couleur d’arrière-plan

La BackgroundColor propriété est une couleur qui détermine la couleur d’arrière-plan du contrôle.

L’exemple suivant définit la couleur d’arrière-plan d’un AvatarView:

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

Le code C# équivalent est :

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

Pour plus d’informations sur les couleurs, consultez Couleurs.

Définir la couleur de bordure

La BorderColor propriété est une couleur qui détermine la couleur de bordure du contrôle.

L’exemple suivant définit la couleur de bordure d’un AvatarView:

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

Le code C# équivalent est :

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

Pour plus d’informations sur les couleurs, consultez Couleurs.

Définir la largeur de bordure

La BorderWidth propriété est un double qui détermine la largeur rendue de la bordure de contrôle.

L’exemple suivant définit la largeur de bordure d’un AvatarView:

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

Le code C# équivalent est :

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

Définir le rayon d’angle

La CornerRadius propriété est un CornerRadius qui détermine la forme du contrôle. Il peut être défini avec une valeur unique de rayon d’angle uniforme double, ou avec une structure CornerRadius définie par quatre valeurs double appliquées aux coins supérieur gauche, supérieur droit, inférieur gauche et inférieur droit du contrôle.

L’exemple suivant définit le rayon d’angle d’un AvatarView tel que chacun des quatre coins a un rayon spécifié :

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

Le code C# équivalent est :

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

L’exemple suivant définit le rayon d’angle d’un AvatarView tel que les quatre coins ont le même rayon :

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

Le code C# équivalent est :

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

Définir la source d’image

La propriété ImageSource est une source d’image qui définit l’image du contrôle. Il peut être défini sur une image récupérée à partir d’un fichier, d’une ressource incorporée, d’UN URI ou d’un flux.

L’exemple suivant définit le ImageSource d’un AvatarView pour utiliser une ressource intégrée :

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

Le code C# équivalent est :

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

L’exemple suivant configure le ImageSource d’un AvatarView pour utiliser une URL :

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

Le code C# équivalent est :

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

Définir le remplissage

La propriété Padding est un Thickness qui représente la distance entre la bordure du contrôle et le Text ou le ImageSource.

L’exemple suivant définit le Padding d’un AvatarView :

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

Le code C# équivalent est :

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

Définir le texte

La Text propriété est une chaîne qui détermine le texte du contrôle.

L’exemple suivant définit le Text d’un AvatarView :

<toolkit:AvatarView Text="ST" />

Le code C# équivalent est :

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

Définir la couleur du texte

La TextColor propriété est une couleur qui détermine la couleur du texte du contrôle.

L’exemple suivant définit la couleur de texte d’un AvatarView:

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

Le code C# équivalent est :

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

Pour plus d’informations sur les couleurs, consultez Couleurs.

Exemples

Vous trouverez des exemples de ce contrôle en action dans l'Exemple d'application du kit d'outils de la communauté .NET MAUI.

API

Vous trouverez le code source de AvatarView sur le dépôt .NET MAUI Community Toolkit GitHub.