AvatarView

[アーティクル]
03/19/2024

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

Properties

プロパティ	タイプ	説明
BackgroundColor	`Color`	`BackgroundColor` プロパティは、コントロールの背景色を決定する Color です。設定を行わないと、背景は既定の Color オブジェクトになり、白としてレンダリングされます。
BorderColor	`Color`	`BorderColor` プロパティは、コントロールの境界線の色を決定する Color です。設定を行わないと、境界線は既定の Color オブジェクトになり、黒としてレンダリングされます。
BorderWidth	`double`	`BorderWidth` プロパティは、コントロールの境界線のレンダリング幅を決定する double です。設定を行わないと、境界線の幅は既定値になり、1.0 としてレンダリングされます。
CornerRadius	`CornerRadius`	`CornerRadius` プロパティは、コントロールのシェイプを決定する CornerRadius です。これは、単一の `double` の均一な角の半径値、またはコントロールの左上、右上、左下、右下に適用される 4 つの `double` 値で定義された `CornerRadius` 構造体に設定できます。このプロパティは、デバイスに依存しない単位で測定されます。設定を行わないと、角の半径は既定の CornerRadius オブジェクトになり、24 としてレンダリングされます。
ImageSource	`ImageSource`	`ImageSource` プロパティは、コントロールの画像を決定する ImageSource です。これはファイル、埋め込みリソース、URI、またはストリームから取得した画像に設定できます。設定を行わないと、コントロールは `Text` プロパティをレンダリングします。
Padding	`Thickness`	`Padding` プロパティは、コントロールの境界線と `Text` または `ImageSource` の間の距離を表す Thickness です。設定を行わないと、パディングは既定の Thickness オブジェクトになり、これは 1 です。
Text	`string`	`Text` プロパティは、コントロールのテキストを決定する文字列です。設定を行わないと、テキストは既定値になり、'?' がレンダリングされます。
TextColor	`Color`	`TextColor` プロパティは、コントロールのテキストの色を決定する Color です。設定を行わないと、テキストは既定の Color オブジェクトになります。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらはデータバインディングの対象することができ、スタイルを設定できます。

AvatarView でフォントを指定する方法については、「フォント」をご覧ください。

AvatarView に対する影の指定については、「影」を参照してください

重要

AvatarView は、AvatarView のサイズがレイアウトによって制限されていたり、AvatarView の HeightRequest または WidthRequest プロパティが指定されていたりしない限りは、48 という既定の WidthRequest および HeightRequest を使用します。 WidthRequest プロパティと HeightRequest プロパティは、デバイスに依存しない単位で測定されます。

背景色を設定する

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、またはストリームから取得した画像に設定できます。

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

<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 の間の距離を表す Thickness です。

次の例では、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 リポジトリにあります。

次の方法で共有

AvatarView

構文

XAML 名前空間を含める

AvatarView の使用

Properties

背景色を設定する

境界線の色を設定する

境界線の幅を設定する

角の半径を設定する

画像ソースを設定する

パディングを設定する

テキストを設定

テキストの色を設定する

例

API

その他のリソース