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>

使用 AvatarView

下列範例示範如何建立 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 是決定控件背景色彩的 Color。

下列範例會設定 的背景色彩 AvatarView：

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

對等的 C# 程式碼為：

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

如需色彩的詳細資訊，請參閱 色彩。

設定框線色彩

屬性 BorderColor 是決定控件框線色彩的 Color。

下列範例會設定 的 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一統一的圓角半徑值，或由套double用至控件左上方、右下、左下和右下四個CornerRadius值所定義的結構。

下列範例會設定 的圓角半徑 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之間的距離的 Thickness。

下列範例會設定 Padding 的 AvatarView：

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

對等的 C# 程式碼為：

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

設定文字

屬性 Text 是決定控件文字的字串。

下列範例會設定 Text 的 AvatarView：

<toolkit:AvatarView Text="ST" />

對等的 C# 程式碼為：

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

設定文字色彩

屬性 TextColor 是決定控件文字色彩的 Color。

下列範例會設定 的 AvatarView文字色彩：

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

對等的 C# 程式碼為：

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

如需色彩的詳細資訊，請參閱 色彩。

範例

您可以在 .NET MAUI Community Toolkit 範例應用程式中找到此控件作用中的範例。

API

您可以在 .NET MAUI Community Toolkit GitHub 存放庫上找到 的AvatarView原始程式碼。