AvatarView

CommunityToolKit MAUI AvatarView は、ユーザーのアバター画像またはそのイニシャルを表示するためのコントロールです。 アバターは、テキスト、画像、色付き、整形することができ、影とジェスチャーをサポートします。

Syntax

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 プロパティは、コントロールの境界線のレンダリング幅を決定する double です。

次の例では、 AvatarViewの境界線の幅を設定します。

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

同等の C# コードは次のとおりです。

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

角の半径を設定する

CornerRadiusプロパティは、コントロールの形状を決定する CornerRadius です。 単一のdouble一様なコーナー半径値、またはコントロールの左上隅、右上隅、左下隅、右下隅に適用される 4 つのdouble値で定義されたCornerRadius構造体に設定できます。

次の例では、4 つのコーナーのそれぞれで半径が指定されるように、 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,
};

次の例では、4 つのコーナーがすべて同じ半径になるように、 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、またはストリームから取得したイメージに設定できます。

次の例では、埋め込みリソースを使用するようにImageSourceのAvatarViewを設定します。

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

同等の C# コードは次のとおりです。

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

次の例では、AvatarView の ImageSource を 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の間の距離を表す太さです。

次の例では、AvatarView の Padding を設定します。

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

同等の C# コードは次のとおりです。

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

テキストを設定

Text プロパティは、コントロールのテキストを決定する文字列です。

次の例では、AvatarViewのTextを設定します。

<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

AvatarView のソース コードは、.NET MAUI Community Toolkit GitHub リポジトリで確認できます。