AvatarView

CommunityToolKit MAUI AvatarView är en kontroll för att visa en användares avatarbild eller deras initialer. Avatarer kan vara text, bild, färgad, formad och stöder skugga och gester.

Syntax

Inklusive XAML-namnområdet

För att kunna använda verktygslådan i XAML måste följande xmlns läggas till på sidan eller vyn:

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

Därför följande:

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

Skulle ändras för att inkludera xmlns på följande sätt:

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

Använda AvatarView

I följande exempel visas hur du skapar en 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>

Motsvarande C#-kod är:

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Egenskaper

Dessa egenskaper backas upp av BindableProperty objekt, vilket innebär att de kan vara mål för databindningar och formatmallar.

Information om hur du anger teckensnitt på en AvatarViewfinns i Teckensnitt.

Information om hur du anger skuggor på en AvatarViewfinns i Skuggor

Ange bakgrundsfärg

Egenskapen BackgroundColor är en färg som avgör kontrollens bakgrundsfärg.

I följande exempel anges bakgrundsfärgen för en AvatarView:

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

Motsvarande C#-kod är:

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

Mer information om färger finns i Färger.

Ange kantlinjefärg

Egenskapen BorderColor är en färg som avgör kontrollens kantlinjefärg.

I följande exempel anges kantfärgen för en AvatarView:

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

Motsvarande C#-kod är:

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

Mer information om färger finns i Färger.

Ange kantlinjebredd

Egenskapen BorderWidth är ett doublevärde som anger den återgivna bredden på kontrollens kantlinje.

I följande exempel anges kantlinjebredden för en AvatarView:

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

Motsvarande C#-kod är:

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

Ange hörnradien

Egenskapen CornerRadius är en CornerRadius som bestämmer kontrollens form. Det kan ställas in på ett enda double enhetligt hörnradievärde, eller en CornerRadius struktur som definieras av fyra double värden som tillämpas på kontrollens övre vänstra, övre högra, nedre vänstra och nedre högra del.

I följande exempel anges hörnradien för ett AvatarView så att vart och ett av de fyra hörnen har en angiven radie:

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

Motsvarande C#-kod är:

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

I följande exempel anges hörnradien för ett AvatarView sådant att alla fyra hörnen har samma radie:

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

Motsvarande C#-kod är:

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

Ange bildkälla

Egenskapen ImageSource är en ImageSource som avgör avbildningen av kontrollen. Den kan ställas in på en avbildning som hämtats från en fil, en inbäddad resurs, en URI eller en dataström.

I följande exempel anges ImageSource för en AvatarView så att den använder en inbäddad resurs:

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

Motsvarande C#-kod är:

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

I följande exempel ställs ImageSource hos en AvatarView in för att använda en URL:

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

Motsvarande C#-kod är:

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

Ange utfyllnadsmarginal

Egenskapen Padding är en tjocklek som representerar avståndet mellan kontrollkantlinjen och Text eller ImageSource.

I följande exempel anges Padding för en AvatarView:

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

Motsvarande C#-kod är:

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

Ange text

Egenskapen Text är en sträng som avgör kontrollens text.

I följande exempel anges Text för en AvatarView:

<toolkit:AvatarView Text="ST" />

Motsvarande C#-kod är:

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

Ange textfärg

Egenskapen TextColor är en färg som avgör kontrollens textfärg.

I följande exempel anges textfärgen för en AvatarView:

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

Motsvarande C#-kod är:

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

Mer information om färger finns i Färger.

Exempel

Du hittar exempel på den här kontrollen i praktiken i .NET MAUI Community Toolkit Sample Application.

API

Källkoden för AvatarView finns på lagringsplatsen .NET MAUI Community Toolkit GitHub.