Udostępnij za pośrednictwem

AvatarView

  • Artykuł

CommunityToolKit MAUI AvatarView to kontrolka do wyświetlania obrazu awatara użytkownika lub ich inicjałów. Awatary mogą być tekstem, obrazem, kolorami, kształtami i obsługuje cienie i gesty.

Składnia

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"

W związku z tym następujące 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">

</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ć element 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

Właściwości Type Opis
Backgroundcolor Color Właściwość BackgroundColor jest kolorem koloru, który określa kolor tła kontrolki. Jeśli ustawienie nie zostanie ustawione, tło będzie domyślnym obiektem Color, który jest renderowany jako Biały.
BorderColor Color Właściwość BorderColor jest kolorem koloru, który określa kolor obramowania kontrolki. Jeśli nie zostanie ustawiona, obramowanie będzie domyślnym obiektem Color, który jest renderowany jako Czarny.
Borderwidth double Właściwość BorderWidth jest podwójna, która określa renderowaną szerokość obramowania kontrolki. Jeśli nie zostanie ustawiona, szerokość obramowania będzie wartością domyślną, która będzie renderowana jako 1.0.
Cornerradius CornerRadius Właściwość CornerRadius to CornerRadius, który określa kształt kontrolki. Można go ustawić na pojedynczą double jednolitą wartość promienia rogu lub strukturę zdefiniowaną CornerRadius przez cztery double wartości, które są stosowane do lewego górnego, prawego górnego rogu, dolnego lewego i dolnego prawa kontrolki. Ta właściwość jest mierzona w jednostkach niezależnych od urządzenia. Jeśli nie zostanie ustawiona, promień rogu będzie domyślnym obiektem CornerRadius, który jest renderowany jako 24.
Imagesource ImageSource Właściwość ImageSource jest obiektem ImageSource, który określa obraz kontrolki. Można go ustawić na obraz pobrany z pliku, zasobu osadzonego, identyfikatora URI lub strumienia. Jeśli właściwość nie zostanie ustawiona, kontrolka będzie renderowana Text .
Dopełnienie Thickness Właściwość Padding to grubość, która reprezentuje odległość między obramowaniem kontrolki a właściwością Text lub ImageSource. Jeśli nie zostanie ustawiona, wypełnienie będzie domyślnym obiektem Grubość, czyli 1.
Text string Właściwość Text jest ciągiem, który określa tekst kontrolki. Jeśli nie zostanie ustawiona, tekst będzie domyślny, który jest renderowany jako "?".
Textcolor Color Właściwość TextColor jest kolorem koloru, który określa kolor tekstu kontrolki. Jeśli nie zostanie ustawiona, tekst będzie domyślnym obiektem Color.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

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

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

Ważne

AvatarView Użyje wartości domyślnej WidthRequest i HeightRequest wartości 48, chyba że rozmiar AvatarView obiektu jest ograniczony przez jego układ lub HeightRequest właściwość or WidthRequestAvatarView jest określona. Właściwości WidthRequest i HeightRequest są mierzone w jednostkach niezależnych od urządzenia.

Ustawianie koloru tła

Właściwość BackgroundColor jest kolorem koloru, który 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 jest kolorem koloru, który 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ń rogu

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

Poniższy przykład ustawia promień rogu takiego, że każdy z czterech narożników ma określony promień AvatarView :

<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ń rogu tak, aby wszystkie cztery rogi miały ten sam promień AvatarView :

<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ć na obraz pobrany z pliku, zasobu osadzonego, identyfikatora URI lub strumienia.

W poniższym przykładzie ustawiono ImageSource element , AvatarView aby użyć 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",
};

W poniższym przykładzie ustawiono element ImageSource , AvatarView aby użyć 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 dopełnienie

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

Set text

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 jest kolorem koloru, który 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.

Przykłady

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

interfejs API

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