AvatarView

CommunityToolKit MAUI AvatarView — это элемент управления для отображения изображения аватара пользователя или их инициал. Аватары могут быть текстом, изображением, цветом, фигурой и поддерживает тени и жесты.

Синтаксис

Включение пространства имен XAML

Чтобы использовать набор средств в XAML, xmlns необходимо добавить на страницу или представление следующее:

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

Поэтому следующее:

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

Будет изменено, чтобы включить следующее xmlns :

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

Использование АватарView

В следующем примере показано, как создать :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>

Эквивалентный код на C# выглядит так:

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Свойства

Эти свойства поддерживаются BindableProperty объектами, что означает, что они могут быть целевыми объектами привязки данных и стилем.

Сведения об указании шрифтов в объекте AvatarViewсм. в разделе "Шрифты".

Сведения об указании теней в тенях см. в AvatarViewразделе "Тени"

Настройка цвета фона

Свойство BackgroundColor — это цвет, определяющий цвет фона элемента управления.

В следующем примере задается цвет фона объекта AvatarView:

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

Эквивалентный код на C# выглядит так:

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

Дополнительные сведения о цветах см. в разделе "Цвета".

Установка цвета границы

Свойство BorderColor — это цвет, определяющий цвет границы элемента управления.

В следующем примере задается цвет границы:AvatarView

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

Эквивалентный код на C# выглядит так:

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

Дополнительные сведения о цветах см. в разделе "Цвета".

Установка ширины границы

Свойство BorderWidth является двойным, определяющим ширину отрисовки границы элемента управления.

В следующем примере задается ширина границы:AvatarView

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

Эквивалентный код на C# выглядит так:

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

Установка радиуса угла

Свойство CornerRadius — это CornerRadius, определяющий форму элемента управления. Для него можно задать однородное double значение радиуса угла или CornerRadius структуру, определенную четырьмя double значениями, применяемыми к верхнему левому краю, правому верхнему краю, нижнему левому краю и нижнему правому краю элемента управления.

В следующем примере задается радиус AvatarView угла, в котором каждый из четырех углов имеет указанный радиус:

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

Эквивалентный код на C# выглядит так:

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

В следующем примере задается радиус AvatarView угла, чтобы все четыре угла имели одинаковый радиус:

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

Эквивалентный код на C# выглядит так:

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

Установка источника изображения

Свойство ImageSource — это ImageSource, который определяет изображение элемента управления. Его можно задать для изображения, полученного из файла, внедренного ресурса, URI или потока.

В следующем примере задается ImageSourceAvatarView для использования внедренного ресурса:

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

Эквивалентный код на C# выглядит так:

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

В следующем примере показано ImageSourceAvatarView , как использовать URL-адрес:

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

Эквивалентный код на C# выглядит так:

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

Настройка заполнения

Свойство Padding — это толщина, представляющая расстояние между границой управления и элементом Text управления ImageSource.

В следующем примере задано PaddingAvatarViewзначение :

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

Эквивалентный код на C# выглядит так:

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

Set text

Это Text свойство представляет собой строку, которая определяет текст элемента управления.

В следующем примере задано TextAvatarViewзначение :

<toolkit:AvatarView Text="ST" />

Эквивалентный код на C# выглядит так:

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

Задать цвет текста

Свойство TextColor — это цвет, определяющий цвет текста элемента управления.

В следующем примере задается цвет текста объекта AvatarView:

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

Эквивалентный код на C# выглядит так:

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

Дополнительные сведения о цветах см. в разделе "Цвета".

Примеры

Примеры этого элемента управления можно найти в действии в сообществе .NET MAUI набор средств пример приложения.

API

Исходный код AvatarView можно найти в репозитории сообщества .NET MAUI набор средств GitHub.