AvatarView

CommunityToolKit MAUI AvatarView to kontrolka do wyświetlania obrazu awatara użytkownika lub ich inicjałów. Awatary mogą mieć postać tekstu, obrazu, koloru lub kształtu oraz obsługują efekty cienia i gesty.

Syntax

Dołączanie przestrzeni nazw XAML

Aby można było używać zestawu narzędzi w języku XAML, należy dodać następujące xmlns elementy do strony lub widoku:

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

Dlatego następuje:

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

Zostanie zmodyfikowana tak, aby zawierała następujące xmlns elementy:

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

Korzystanie z elementu AvatarView

W poniższym przykładzie pokazano, jak utworzyć 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>

Równoważny kod języka C# to:

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Właściwości

Te właściwości są oparte na obiektach BindableProperty, co oznacza, że mogą być elementami docelowymi wiązań danych i mogą być stylizowane.

Aby uzyskać informacje na temat określania czcionek na AvatarView, zobacz Czcionki.

Aby uzyskać informacje o określaniu cieni na obiekcie AvatarView, zobacz Cienie

Ustawianie koloru tła

Właściwość BackgroundColor jest typu Color i określa kolor tła kontrolki.

W poniższym przykładzie ustawiono kolor tła elementu AvatarView:

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

Równoważny kod języka C# to:

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

Aby uzyskać więcej informacji na temat kolorów, zobacz Kolory.

Ustaw kolor obramowania

Właściwość BorderColor ma typ Color i określa kolor obramowania kontrolki.

W poniższym przykładzie ustawiono kolor obramowania elementu AvatarView:

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

Równoważny kod języka C# to:

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

Aby uzyskać więcej informacji na temat kolorów, zobacz Kolory.

Ustawianie szerokości obramowania

Właściwość BorderWidth jest podwójna, która określa renderowaną szerokość obramowania kontrolki.

W poniższym przykładzie ustawiono szerokość obramowania elementu AvatarView:

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

Równoważny kod języka C# to:

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

Ustaw promień narożnika

Właściwość CornerRadius to CornerRadius, który określa kształt kontrolki. Można ustawić pojedynczą double jednolitą wartość promienia narożnika lub strukturę CornerRadius zdefiniowaną przez cztery wartości double, które są stosowane do lewego górnego, prawego górnego, lewego dolnego i prawego dolnego rogu kontrolki.

Poniższy przykład ustawia promień narożników elementu AvatarView tak, aby każdy z czterech rogów miał określony promień:

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

Równoważny kod języka C# to:

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

W poniższym przykładzie ustawiono promień zaokrąglenia rogów elementu AvatarView tak, aby wszystkie cztery rogi miały taki sam promień zaokrąglenia:

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

Równoważny kod języka C# to:

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

Ustawianie źródła obrazu

Właściwość ImageSource jest obiektem ImageSource, który określa obraz kontrolki. Można go ustawić jako obraz pobrany z pliku, osadzonego zasobu, URI lub strumienia.

W poniższym przykładzie ustawiono ImageSource elementu AvatarView tak, aby używał zasobu osadzonego:

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

Równoważny kod języka C# to:

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

Poniższy przykład ustawia element ImageSource elementu AvatarView, aby używał adresu URL:

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

Równoważny kod języka C# to:

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

Ustaw margines wewnętrzny

Właściwość Padding to grubość, która reprezentuje odległość między obramowaniem kontrolki a właściwością Text lub ImageSource.

W poniższym przykładzie ustawiono element Padding typu AvatarView:

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

Równoważny kod języka C# to:

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

Ustaw tekst

Właściwość Text jest ciągiem, który określa tekst kontrolki.

W poniższym przykładzie ustawiono element Text typu AvatarView:

<toolkit:AvatarView Text="ST" />

Równoważny kod języka C# to:

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

Ustaw kolor tekstu

Właściwość TextColor ma typ Color i określa kolor tekstu kontrolki.

W poniższym przykładzie ustawiono kolor tekstu elementu AvatarView:

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

Równoważny kod języka C# to:

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

Aby uzyskać więcej informacji na temat kolorów, zobacz Kolory.

Examples

Przykłady tej kontrolki można znaleźć w akcji w przykładowej aplikacji zestawu narzędzi .NET MAUI Community Toolkit.

API

Kod źródłowy AvatarView można znaleźć w repozytorium .NET MAUI Community Toolkit GitHub.