AvatarView

CommunityToolKit MAUI AvatarView adalah kontrol untuk menampilkan gambar avatar pengguna atau inisial mereka. Avatar dapat berupa teks, gambar, berwarna, berbentuk dan mendukung bayangan dan gerakan.

Sintaks

Menyertakan namespace XAML

Untuk menggunakan toolkit di XAML, hal berikut xmlns perlu ditambahkan ke halaman atau tampilan Anda:

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

Oleh karena itu hal-hal berikut:

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

Akan dimodifikasi untuk menyertakan xmlns sebagai berikut:

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

Menggunakan AvatarView

Contoh berikut menunjukkan cara membuat 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>

Kode C# yang setara adalah:

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Properti

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti tersebut dapat menjadi target pengikatan data dan ditata.

Untuk informasi tentang menentukan font pada AvatarView, lihat Font.

Untuk informasi tentang menentukan bayangan pada AvatarView, lihat Bayangan

Mengatur warna latar belakang

Properti BackgroundColor adalah Warna yang menentukan warna latar belakang kontrol.

Contoh berikut mengatur warna latar belakang dari AvatarView:

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

Kode C# yang setara adalah:

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

Untuk informasi selengkapnya tentang warna, lihat Warna.

Mengatur warna batas

Properti BorderColor adalah Warna yang menentukan warna batas kontrol.

Contoh berikut mengatur warna batas dari AvatarView:

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

Kode C# yang setara adalah:

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

Untuk informasi selengkapnya tentang warna, lihat Warna.

Atur lebar batas

Properti BorderWidth adalah ganda yang menentukan lebar batas kontrol yang dirender.

Contoh berikut mengatur lebar AvatarViewbatas dari :

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

Kode C# yang setara adalah:

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

Mengatur radius sudut

Properti CornerRadius adalah CornerRadius yang menentukan bentuk kontrol. Ini dapat diatur ke double satu nilai radius sudut seragam, atau CornerRadius struktur yang ditentukan oleh empat double nilai yang diterapkan ke kiri atas, kanan atas, kiri bawah, dan kanan bawah kontrol.

Contoh berikut mengatur radius sudut singgahan AvatarView sehingga masing-masing dari empat sudut memiliki radius yang ditentukan:

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

Kode C# yang setara adalah:

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

Contoh berikut mengatur radius sudut singgahan AvatarView sehingga keempat sudut memiliki radius yang sama:

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

Kode C# yang setara adalah:

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

Atur sumber gambar

Properti ImageSource adalah ImageSource yang menentukan gambar kontrol. Ini dapat diatur ke gambar yang diambil dari file, sumber daya, URI, atau aliran yang disematkan.

Contoh berikut mengatur ImageSource dari AvatarView untuk menggunakan sumber daya yang disematkan:

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

Kode C# yang setara adalah:

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

Contoh berikut mengatur ImageSource dari untuk AvatarView menggunakan URL:

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

Kode C# yang setara adalah:

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

Mengatur padding

Properti Padding adalah Ketebalan yang mewakili jarak antara batas kontrol dan Text atau ImageSource.

Contoh berikut menetapkan Padding dari AvatarView:

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

Kode C# yang setara adalah:

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

Atur teks

Properti Text adalah string yang menentukan teks kontrol.

Contoh berikut menetapkan Text dari AvatarView:

<toolkit:AvatarView Text="ST" />

Kode C# yang setara adalah:

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

Mengatur warna teks

Properti TextColor adalah Warna yang menentukan warna teks kontrol.

Contoh berikut mengatur warna teks dari AvatarView:

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

Kode C# yang setara adalah:

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

Untuk informasi selengkapnya tentang warna, lihat Warna.

Contoh

Anda dapat menemukan contoh kontrol ini dalam tindakan di Aplikasi Sampel Toolkit Komunitas .NET MAUI.

API

Anda dapat menemukan kode sumber untuk AvatarView lebih pada repositori GitHub .NET MAUI Community Toolkit.