AvatarView

CommunityToolKit MAUI AvatarView , kullanıcının avatar görüntüsünü veya baş harflerini görüntülemek için bir denetimdir. Avatarlar metin, resim, renkli, şekilli olabilir ve gölge ve hareketleri destekler.

Sözdizimi

XAML ad alanını dahil edin

Araç setini XAML'de kullanmak için sayfanıza veya görünümünüzde aşağıdakilerin xmlns eklenmesi gerekir:

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

Bu nedenle aşağıdakiler:

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

aşağıdakiler dahil xmlns edilecek şekilde değiştirilir:

<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'ı kullanma

Aşağıdaki örnekte nasıl oluşturulacağı gösterilmektedir 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>

Eşdeğer C# kodu:

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Özellikler

Bu özellikler nesneler tarafından BindableProperty desteklenir, bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

üzerinde AvatarViewyazı tiplerini belirtme hakkında bilgi için bkz . Yazı Tipleri.

üzerinde AvatarViewgölge belirtme hakkında bilgi için bkz. Gölgeler

Arka plan rengini ayarlama

BackgroundColor özelliği, denetimin arka plan rengini belirleyen bir Color'dır.

Aşağıdaki örnek, bir AvatarViewöğesinin arka plan rengini ayarlar:

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

Eşdeğer C# kodu:

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

Renkler hakkında daha fazla bilgi için bkz . Renkler.

Kenarlık rengini ayarlama

BorderColor özelliği, denetimin kenarlık rengini belirleyen bir Color'dır.

Aşağıdaki örnek, bir AvatarViewdeğerinin kenarlık rengini ayarlar:

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

Eşdeğer C# kodu:

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

Renkler hakkında daha fazla bilgi için bkz . Renkler.

Kenarlık genişliğini ayarlama

BorderWidth özelliği, denetim kenarlarının işlenmiş genişliğini belirleyen bir çifttir.

Aşağıdaki örnek, bir AvatarViewdeğerinin kenarlık genişliğini ayarlar:

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

Eşdeğer C# kodu:

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

Köşe yarıçapını ayarlama

CornerRadius özelliği, denetimin şeklini belirleyen bir CornerRadius'tur. Tek double bir tek köşe yarıçapı değerine veya denetimin sol üst, sağ üst, sol alt ve sağ alta uygulanan dört double değerle tanımlanan bir CornerRadius yapıya ayarlanabilir.

Aşağıdaki örnek, dört köşenin AvatarView her birinin belirtilen yarıçapa sahip olması için köşe yarıçapını ayarlar:

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

Eşdeğer C# kodu:

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

Aşağıdaki örnek, dört köşenin de aynı yarıçapa sahip olacak şekilde köşe AvatarView yarıçapını ayarlar:

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

Eşdeğer C# kodu:

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

Görüntü kaynağını ayarlama

ImageSource özelliği, denetimin görüntüsünü belirleyen bir ImageSource'tır. Dosyadan, eklenmiş kaynaktan, URI'den veya akıştan alınan bir görüntüye ayarlanabilir.

Aşağıdaki örnek, ekli bir kaynağı kullanmak için değerini AvatarView ayarlarImageSource:

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

Eşdeğer C# kodu:

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

Aşağıdaki örnek, url kullanmak için değerini AvatarView ayarlarImageSource:

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

Eşdeğer C# kodu:

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

Doldurmayı ayarlama

Padding özelliği, denetim kenarlığı ile Text veya ImageSourcearasındaki uzaklığı temsil eden bir Kalınlıktır.

Aşağıdaki örnek bir AvatarViewdeğerini Padding ayarlar:

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

Eşdeğer C# kodu:

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

Metin ayarla

Text özelliği, denetimin metnini belirleyen bir dizedir.

Aşağıdaki örnek bir AvatarViewdeğerini Text ayarlar:

<toolkit:AvatarView Text="ST" />

Eşdeğer C# kodu:

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

Metin rengini ayarlama

TextColor özelliği, denetimin metin rengini belirleyen bir Color'dır.

Aşağıdaki örnek, bir AvatarViewdeğerinin metin rengini ayarlar:

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

Eşdeğer C# kodu:

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

Renkler hakkında daha fazla bilgi için bkz . Renkler.

Örnekler

Bu denetimin örneklerini .NET MAUI Community Toolkit Örnek Uygulaması'nda iş başında bulabilirsiniz.

API

üzerinde için AvatarViewkaynak kodunu .NET MAUI Community Toolkit GitHub deposunda bulabilirsiniz.