AvatarView

Das CommunityToolKit MAUI AvatarView ist ein Steuerelement zum Anzeigen des Avatarbilds eines Benutzers oder seiner Initialen. Avatare können Text oder Bilder sein, farbig oder geformt, und Schatten und Gesten unterstützen.

Syntax

Einbinden des XAML-Namespace

Um das Toolkit in XAML verwenden zu können, muss der folgende xmlns-Abschnitt zu Ihrer Seite oder Ansicht hinzugefügt werden:

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

Daher das Folgende:

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

Würde geändert werden, um das xmlns wie folgt einzubinden:

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

Verwenden von AvatarView

Das folgende Beispiel zeigt, wie ein AvatarView erstellt wird.

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

Der entsprechende C#-Code lautet:

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Eigenschaften

Diese Eigenschaften basieren auf BindableProperty-Objekten, was bedeutet, dass sie Ziele für Datenbindungen sein und formatiert werden können.

Für Informationen über die Angabe von Schriftarten auf einem AvatarView, siehe Schriftarten.

Informationen zum Angeben von Schatten in einem AvatarView, finden Sie unter "Schatten".

Festlegen der Hintergrundfarbe

Die BackgroundColor Eigenschaft ist eine Farbe, die die Hintergrundfarbe des Steuerelements bestimmt.

Im folgenden Beispiel wird die Hintergrundfarbe eines AvatarView festgelegt:

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

Der entsprechende C#-Code lautet:

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

Weitere Informationen zu Farben finden Sie unter "Farben".

Rahmenfarbe festlegen

Die BorderColor Eigenschaft ist eine Farbe, die die Rahmenfarbe des Steuerelements bestimmt.

Im folgenden Beispiel wird die Rahmenfarbe einer AvatarView festgelegt:

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

Der entsprechende C#-Code lautet:

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

Weitere Informationen zu Farben finden Sie unter "Farben".

Rahmenbreite festlegen

Die BorderWidth-Eigenschaft ist ein Double, das die gerenderte Breite des Rahmens des Steuerelements bestimmt.

Im folgenden Beispiel wird die Rahmenbreite einer AvatarView festgelegt:

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

Der entsprechende C#-Code lautet:

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

Festlegen des Eckenradius

Die CornerRadius Eigenschaft ist ein Eckenradius, der die Form des Steuerelements bestimmt. Sie kann auf einen einzelnen double einheitlichen Eckradiuswert oder eine CornerRadius Struktur festgelegt werden, die durch vier double Werte definiert wird, die oben links, oben rechts, unten links und unten rechts des Steuerelements angewendet werden.

Im folgenden Beispiel wird der Eckradius eines AvatarView so festgelegt, dass jede der vier Ecken einen angegebenen Radius hat:

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

Der entsprechende C#-Code lautet:

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

Im folgenden Beispiel wird der Eckradius eines AvatarView so festgelegt, dass alle vier Ecken denselben Radius aufweisen:

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

Der entsprechende C#-Code lautet:

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

Festlegen der Bildquelle

Die ImageSource Eigenschaft ist eine ImageSource, die das Bild des Steuerelements bestimmt. Es kann auf ein Bild festgelegt werden, das aus einer Datei, eingebetteten Ressource, einem URI oder einem Datenstrom abgerufen wird.

Im folgenden Beispiel wird das ImageSource eines AvatarView so festgelegt, dass eine eingebettete Ressource verwendet wird:

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

Der entsprechende C#-Code lautet:

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

Im folgenden Beispiel wird ImageSource eines AvatarView so festgelegt, dass eine URL verwendet wird:

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

Der entsprechende C#-Code lautet:

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

Abstand festlegen

Die Eigenschaft Padding ist eine Thickness, die den Abstand zwischen dem Rahmen des Steuerelements und Text oder ImageSource angibt.

Im folgenden Beispiel wird das Padding eines AvatarView festgelegt:

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

Der entsprechende C#-Code lautet:

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

Text festlegen

Die Text Eigenschaft ist eine Zeichenfolge, die den Text des Steuerelements bestimmt.

Im folgenden Beispiel wird das Text eines AvatarView festgelegt:

<toolkit:AvatarView Text="ST" />

Der entsprechende C#-Code lautet:

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

Textfarbe festlegen

Die TextColor Eigenschaft ist eine Farbe, die die Textfarbe des Steuerelements bestimmt.

Das folgende Beispiel setzt die Textfarbe eines AvatarView fest:

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

Der entsprechende C#-Code lautet:

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

Weitere Informationen zu Farben finden Sie unter "Farben".

Beispiele

Beispiele für dieses Steuerelement finden Sie in der .NET MAUI Community Toolkit-Beispielanwendung.

API

Sie finden den Quellcode für AvatarView im .NET MAUI Community Toolkit GitHub Repository.