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.
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 AvatarView
oggetto , vedere Tipi di carattere.
Per informazioni sulla specifica delle ombreggiature in un AvatarView
oggetto , 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.
.NET MAUI Community Toolkit