AvatarView

CommunityToolKit MAUI AvatarView is een besturingselement voor het weergeven van de avatarafbeelding van een gebruiker of hun initialen. Avatars kunnen tekst, afbeelding, gekleurd, vormgegeven en ondersteuning bieden voor schaduw en bewegingen.

Syntax

Inclusief de XAML-naamruimte

Als u de toolkit in XAML wilt gebruiken, moet de volgende xmlns worden toegevoegd aan uw pagina of weergave:

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

Daarom volgt het volgende:

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

Zou als volgt worden gewijzigd om de xmlns op te nemen:

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

AvatarView gebruiken

Het volgende voorbeeld laat zien hoe u een AvatarView kunt maken:

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

Deze equivalente C#-code is:

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Eigenschappen

Deze eigenschappen zijn gebaseerd op BindableProperty-objecten, wat betekent dat ze kunnen worden gebruikt in gegevensbindingen en van stijlen kunnen worden voorzien.

Zie AvatarView voor meer informatie over het opgeven van lettertypen op een.

Zie Schaduwen voor informatie over het specificeren van schaduwen op een AvatarView

Achtergrondkleur instellen

De BackgroundColor eigenschap is een kleur waarmee de achtergrondkleur van het besturingselement wordt bepaald.

In het volgende voorbeeld wordt de achtergrondkleur van een AvatarView ingesteld:

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

Deze equivalente C#-code is:

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

Zie Kleuren voor meer informatie over kleuren.

Randkleur instellen

De BorderColor eigenschap is een kleur waarmee de randkleur van het besturingselement wordt bepaald.

In het volgende voorbeeld wordt de randkleur van een AvatarView ingesteld:

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

Deze equivalente C#-code is:

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

Zie Kleuren voor meer informatie over kleuren.

Randbreedte instellen

De BorderWidth eigenschap is een dubbele waarde waarmee de weergegeven breedte van de rand van het besturingselement wordt bepaald.

In het volgende voorbeeld wordt de randbreedte van een AvatarView ingesteld:

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

Deze equivalente C#-code is:

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

De hoekstraal instellen

De CornerRadius eigenschap is een CornerRadius die de vorm van het besturingselement bepaalt. Het kan worden ingesteld op één double uniforme radiuswaarde in de hoek of een CornerRadius structuur die is gedefinieerd door vier double waarden die worden toegepast op de linkerbovenhoek, rechtsboven, linksonder en rechtsonder van het besturingselement.

In het volgende voorbeeld wordt de hoekstraal van een AvatarView zodanig ingesteld dat elk van de vier hoeken een opgegeven straal heeft:

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

Deze equivalente C#-code is:

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

In het volgende voorbeeld wordt de hoekstraal van een AvatarView zodanig ingesteld dat alle vier de hoeken dezelfde straal hebben:

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

Deze equivalente C#-code is:

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

Afbeeldingsbron instellen

De ImageSource eigenschap is een ImageSource die de afbeelding van het besturingselement bepaalt. Deze kan worden ingesteld op een afbeelding die is opgehaald uit een bestand, ingesloten resource, URI of stream.

In het volgende voorbeeld wordt de ImageSource van een AvatarView zo ingesteld dat een ingesloten bron wordt gebruikt:

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

Deze equivalente C#-code is:

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

In het volgende voorbeeld wordt de ImageSource van een AvatarView ingesteld op het gebruik van een URL:

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

Deze equivalente C#-code is:

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

Opvulling instellen

De Padding eigenschap is een dikte die de afstand tussen de besturingsrand en de Text or ImageSourceaangeeft.

In het volgende voorbeeld wordt de Padding van een AvatarView ingesteld:

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

Deze equivalente C#-code is:

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

Tekst instellen

De Text eigenschap is een tekenreeks die de tekst van het besturingselement bepaalt.

In het volgende voorbeeld wordt de Text van een AvatarView ingesteld:

<toolkit:AvatarView Text="ST" />

Deze equivalente C#-code is:

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

Tekstkleur instellen

De TextColor eigenschap is een kleur waarmee de tekstkleur van het besturingselement wordt bepaald.

In het volgende voorbeeld wordt de tekstkleur van een AvatarView ingesteld:

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

Deze equivalente C#-code is:

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

Zie Kleuren voor meer informatie over kleuren.

Examples

U kunt voorbeelden van dit besturingselement in actie vinden in de .NET MAUI Community Toolkit Voorbeeldtoepassing.

API

U vindt de broncode voor AvatarView in de .NET MAUI Community Toolkit GitHub opslagplaats.