Partager via

AvatarView

  • Article

Le AvatarView de la CommunityToolKit MAUI est un contrôle permettant d’afficher l’image de l’avatar d’un utilisateur ou ses initiales. Les avatars peuvent être du texte,de l’image, de la couleur, de la forme, et prennent en charge les ombres et les mouvements.

Syntaxe

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"

Il en résulte 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

Propriété Type Description
BackgroundColor Color La propriété BackgroundColor est une Couleur qui détermine la couleur d’arrière-plan du contrôle. Si ce paramètre n’est pas défini, l’arrière-plan est l’objet Couleur par défaut, qui s’affiche en Blanc.
BorderColor Color La propriété BorderColor est une Couleur qui détermine la couleur de bordure du contrôle. Si ce paramètre n’est pas défini, la bordure est l’objet Couleur par défaut, qui s’affiche en Noir.
BorderWidth double La propriété BorderWidth est un double qui détermine la largeur rendue de la bordure de contrôle. Si elle n’est pas définie, la largeur de bordure est la valeur par défaut, qui s’affiche sous la forme 1.0.
CornerRadius CornerRadius La propriété CornerRadius est un CornerRadius qui détermine la forme du contrôle. Elle peut être définie sur une valeur du rayon de l’angle uniforme double unique ou sur une structure CornerRadius définie par quatre valeurs double appliquées en haut à gauche, en haut à droite, en bas à gauche et en bas à droite du contrôle. Cette propriété est mesurée en unités indépendantes de l’appareil. Si ce paramètre n’est pas défini, le rayon de l’angle est l’objet CornerRadius par défaut, qui s’affiche sous la forme 24.
ImageSource ImageSource La propriété ImageSource est une ImageSource qui détermine l’image du contrôle. Elle peut être définie sur une image récupérée à partir d’un fichier, d’une ressource incorporée, d’un URI ou d’un flux. Si ce paramètre n’est pas défini, le contrôle affiche la propriété Text.
Remplissage Thickness La propriété Padding est une Épaisseur qui représente la distance entre la bordure du contrôle et le Text ou ImageSource. Si ce paramètre n’est pas défini, le remplissage est l’objet Épaisseur par défaut, qui est 1.
Détails string La propriété Text est une chaîne qui détermine le texte du contrôle. Si ce paramètre n’est pas défini, le texte est le texte par défaut, qui s’affiche sous la forme de « ? ».
TextColor Color La propriété TextColor est une Couleur qui détermine la couleur du texte du contrôle. Si ce paramètre n’est pas défini, le texte est l’objet Couleur par défaut.

Ces propriétés sont sauvegardées par des objets BindableProperty, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et de style.

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

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

Important

AvatarView utilisera les valeurs WidthRequest et HeightRequest par défaut de 48, sauf si la taille de l'AvatarView est limitée par sa disposition, ou que la propriété HeightRequest ou WidthRequest de l’AvatarView soit spécifiée. Les propriétés WidthRequest et HeightRequest sont mesurées en unités indépendantes de l’appareil.

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

La propriété BackgroundColor 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 propriété BorderColor est une Couleur qui détermine la couleur de bordure du contrôle.

L’exemple suivant définit la couleur de la 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 propriété BorderWidth 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 de l’angle

La propriété CornerRadius est un CornerRadius qui détermine la forme du contrôle. Elle peut être définie sur une valeur du rayon de l’angle uniforme double unique ou sur une structure CornerRadius définie par quatre valeurs double appliquées en haut à gauche, en haut à droite, en bas à gauche et en bas à droite du contrôle.

L’exemple suivant définit le rayon de l’angle d’un AvatarView de sorte que chacun des quatre coins ait 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 de l’angle d’un AvatarView de sorte que les quatre coins aient 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 de l'image

La propriété ImageSource est une ImageSource qui détermine l’image du contrôle. Elle peut être définie 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 la ImageSource d’un AvatarView pour utiliser une ressource incorporé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 définit la 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 une Épaisseur qui représente la distance entre la bordure du contrôle et le Text ou 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 propriété Text 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 propriété TextColor 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 pouvez trouver le code source deAvatarView sur le référentiel du kit de ressources de la communauté .NET MAUI sur GitHub.