AvatarView

CommunityToolKit MAUI AvatarView è un controllo per la visualizzazione dell'immagine avatar di un utente o delle relative iniziali. Gli avatar possono essere testo, immagine, colorato, a forma e supporta ombre e movimenti.

Syntax

Inclusione dello spazio dei nomi XAML

Per usare il toolkit in XAML, è necessario aggiungere le informazioni seguenti xmlns nella pagina o nella visualizzazione:

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

Di conseguenza:

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

Verrà modificato in modo da includere l'oggetto xmlns come indicato di seguito:

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

Nell'esempio seguente viene illustrato come creare 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>

Il codice C# equivalente è il seguente:

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Proprietà

Queste proprietà si basano su oggetti BindableProperty, il che significa che possono essere destinatarie di associazioni dati e che è possibile applicare loro stili.

Per informazioni su come specificare i font in un AvatarView, vedere Tipi di carattere.

Per informazioni su come specificare le ombreggiature in un AvatarView, vedere Ombreggiature

Impostare il colore di sfondo

La BackgroundColor proprietà è un colore che determina il colore di sfondo del controllo.

Nell'esempio seguente viene impostato il colore di sfondo di un oggetto AvatarView:

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

Il codice C# equivalente è il seguente:

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

Per ulteriori informazioni sui colori, vedere Colori.

Impostare il colore del bordo

La BorderColor proprietà è un colore che determina il colore del bordo del controllo.

Nell'esempio seguente viene impostato il colore del bordo di un oggetto AvatarView:

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

Il codice C# equivalente è il seguente:

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

Per ulteriori informazioni sui colori, vedere Colori.

Impostare la larghezza del bordo

BorderWidth è una proprietà di tipo double che determina la larghezza visualizzata del bordo del controllo.

Nell'esempio seguente viene impostata la larghezza del bordo di un oggetto AvatarView:

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

Il codice C# equivalente è il seguente:

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

Impostare il raggio dell'angolo

La CornerRadius proprietà è un CornerRadius che determina la forma del controllo. Può essere impostato su un singolo double valore del raggio dell'angolo uniforme o su una CornerRadius struttura definita da quattro double valori applicati all'angolo superiore sinistro, superiore destro, inferiore sinistro e inferiore destro del controllo.

Nell'esempio seguente viene impostato il raggio dell'angolo di un oggetto AvatarView in modo che ognuno dei quattro angoli abbia un raggio specificato:

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

Il codice C# equivalente è il seguente:

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

Nell'esempio seguente viene impostato il raggio dell'angolo di un oggetto AvatarView in modo che tutti e quattro gli angoli abbiano lo stesso raggio:

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

Il codice C# equivalente è il seguente:

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

Imposta l'origine dell'immagine

La ImageSource proprietà è un oggetto ImageSource che determina l'immagine del controllo. Può essere impostato su un'immagine recuperata da un file, una risorsa incorporata, un URI o un flusso.

L'esempio seguente imposta ImageSource di un AvatarView in modo che usi una risorsa incorporata:

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

Il codice C# equivalente è il seguente:

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

L'esempio seguente imposta ImageSource di un AvatarView in modo che utilizzi un URL:

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

Il codice C# equivalente è il seguente:

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

Imposta spaziatura interna

La Padding proprietà è un oggetto Thickness che rappresenta la distanza tra il bordo del controllo e l'oggetto Text o ImageSource.

Nell'esempio seguente viene impostato l'oggetto Padding di un oggetto AvatarView:

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

Il codice C# equivalente è il seguente:

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

Imposta testo

La Text proprietà è una stringa che determina il testo del controllo.

Nell'esempio seguente viene impostato l'oggetto Text di un oggetto AvatarView:

<toolkit:AvatarView Text="ST" />

Il codice C# equivalente è il seguente:

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

Impostare il colore del testo

La TextColor proprietà è un colore che determina il colore del testo del controllo.

Nell'esempio seguente viene impostato il colore del testo di un oggetto AvatarView:

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

Il codice C# equivalente è il seguente:

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

Per ulteriori informazioni sui colori, vedere Colori.

Esempi

È possibile trovare esempi di questo controllo in azione nell'applicazione di esempio .NET MAUI Community Toolkit.

API

È possibile trovare il codice sorgente per AvatarView nel repository .NET MAUI Community Toolkit GitHub.