AvatarView

Articolo
11/11/2023

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.

Sintassi

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

Proprietà	Type	Descrizione
BackgroundColor	`Color`	La `BackgroundColor` proprietà è un colore che determina il colore di sfondo del controllo. Se non è impostato, lo sfondo sarà l'oggetto Color predefinito, che esegue il rendering come Bianco.
BorderColor	`Color`	La `BorderColor` proprietà è un colore che determina il colore del bordo del controllo. Se non è impostato, il bordo sarà l'oggetto Color predefinito, che esegue il rendering come Nero.
SpessoreBordo	`double`	La `BorderWidth` proprietà è un valore double che determina la larghezza sottoposta a rendering del bordo del controllo. Se non è impostato, la larghezza del bordo sarà l'impostazione predefinita, che esegue il rendering come 1,0.
CornerRadius	`CornerRadius`	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. Questa proprietà viene misurata in unità indipendenti dal dispositivo. Se non è impostato, il raggio dell'angolo sarà l'oggetto CornerRadius predefinito, che esegue il rendering come 24.
Imagesource	`ImageSource`	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. Se non impostato, il controllo eseguirà il rendering della `Text` proprietà .
Padding	`Thickness`	La `Padding` proprietà è un oggetto Thickness che rappresenta la distanza tra il bordo del controllo e l'oggetto `Text` o `ImageSource`. Se non viene impostato, la spaziatura interna sarà l'oggetto Thickness predefinito, ovvero 1.
Testo	`string`	La `Text` proprietà è una stringa che determina il testo del controllo. Se non è impostato, il testo sarà l'impostazione predefinita, che esegue il rendering come '?'.
TextColor	`Color`	La `TextColor` proprietà è un colore che determina il colore del testo del controllo. Se non viene impostato, il testo sarà l'oggetto Color predefinito.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

Per informazioni sulla specifica dei tipi di carattere in un AvatarViewoggetto , vedere Tipi di carattere.

Per informazioni sulla specifica delle ombreggiature in un AvatarViewoggetto , vedere Ombreggiature

Importante

AvatarView userà il valore predefinito WidthRequest e HeightRequest 48, a meno che la dimensione dell'oggetto AvatarView non sia vincolata dal relativo layout o che sia specificata la HeightRequest proprietà o WidthRequest di AvatarView . Le WidthRequest proprietà e HeightRequest vengono misurate in unità indipendenti dal dispositivo.

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 altre 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 altre informazioni sui colori, vedere Colori.

Impostare la larghezza del bordo

La BorderWidth proprietà è un valore double che determina la larghezza sottoposta a rendering 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,
};

Impostare l'origine 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.

Nell'esempio seguente viene impostato l'oggetto ImageSource di un AvatarView oggetto per l'uso di 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",
};

Nell'esempio seguente viene impostato l'oggetto ImageSource di un oggetto AvatarView per l'utilizzo di 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",
};

Set text

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 altre 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 over nel repository GitHub di .NET MAUI Community Toolkit.

Condividi tramite

AvatarView

Sintassi

Inclusione dello spazio dei nomi XAML

Uso di AvatarView

Proprietà

Impostare il colore di sfondo

Impostare il colore del bordo

Impostare la larghezza del bordo

Impostare il raggio dell'angolo

Impostare l'origine immagine

Imposta spaziatura interna

Set text

Impostare il colore del testo

Esempi

API

Risorse aggiuntive