AvatarView

CommunityToolKit MAUI AvatarView ist ein Steuerelement zum Anzeigen des Avatarbilds oder der Initialen eines Benutzers. Avatare können Text, Bild, Farbe und Form beinhalten, und sie unterstützen Schatten und Gesten.

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"

Der folgende Abschnitt:

<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 dann geändert werden, um xmlns 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 werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von 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 einer 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 einer AvatarView festgelegt:

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

Der entsprechende C#-Code lautet:

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

Für weitere Informationen über Farben, siehe Farben.

Festlegen der Rahmenfarbe

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,
};

Für weitere Informationen über Farben, siehe Farben.

Festlegen der Rahmenbreite

Die BorderWidth-Eigenschaft ist ein Double-Wert, der die gerenderte Breite des Steuerelementrahmens 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 Eckradius

Die CornerRadius-Eigenschaft ist ein „CornerRadius“, der die Form des Steuerelements bestimmt. Sie kann auf einen einzelnen einheitlichen double-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 einer 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 einer AvatarView so festgelegt, dass alle vier Ecken den gleichen Radius haben:

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

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

Im folgenden Beispiel wird die ImageSource einer AvatarView zum Verwenden einer eingebetteten Ressource festgelegt:

<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 die ImageSource einer AvatarView zum Verwenden einer URL festgelegt:

<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",
};

Festlegen des Abstands

Die Padding-Eigenschaft ist eine „Thickness“, die den Abstand zwischen dem Steuerelementrahmen und Text oder ImageSource darstellt.

Im folgenden Beispiel wird Padding von einer 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 Text von einer AvatarView festgelegt:

<toolkit:AvatarView Text="ST" />

Der entsprechende C#-Code lautet:

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

Festlegen der Textfarbe

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

Im folgenden Beispiel wird die Textfarbe einer AvatarView festgelegt:

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

Der entsprechende C#-Code lautet:

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

Für weitere Informationen über Farben, siehe Farben.

Beispiele

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

API

Sie finden den Quellcode für AvatarView über das GitHub-Repository für das .NET MAUI Community Toolkit.