Sdílet prostřednictvím

AvatarView

  • Článek

CommunityToolKit MAUI AvatarView je ovládací prvek pro zobrazení obrázku avatara uživatele nebo jejich iniciály. Avatary můžou být text, obrázek, barevné, tvarované a podporují stíny a gesta.

Syntaxe

Zahrnutí oboru názvů XAML

Pokud chcete použít sadu nástrojů v XAML, musíte do stránky nebo zobrazení přidat následující xmlns položky:

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

Proto platí následující:

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

Bylo by změněno tak, aby zahrnovalo xmlns následující:

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

Použití AvatarView

Následující příklad ukazuje, jak vytvořit 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>

Ekvivalentní kód jazyka C# je:

using CommunityToolkit.Maui.Views;

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

		Content = avatarView;
	}
}

Vlastnosti

Vlastnost Type Popis
Backgroundcolor Color Vlastnost BackgroundColor je Barva, která určuje barvu pozadí ovládacího prvku. Pokud není nastavená sada, pozadí bude výchozím barevným objektem, který se vykreslí jako bílý.
BorderColor Color Vlastnost BorderColor je Barva, která určuje barvu ohraničení ovládacího prvku. Pokud není nastaveno, bude ohraničení výchozím barevným objektem, který se vykreslí jako černý.
Borderwidth double Vlastnost BorderWidth je dvojitá, která určuje vykreslenou šířku ohraničení ovládacího prvku. Pokud ji nenasadíte, bude výchozí šířka ohraničení, která se vykreslí jako 1,0.
Cornerradius CornerRadius Vlastnost CornerRadius je CornerRadius, který určuje tvar ovládacího prvku. Dá se nastavit na jednu double jednotnou hodnotu poloměru rohů nebo strukturu definovanou CornerRadius čtyřmi double hodnotami, které se použijí v levém horním rohu, v pravém horním rohu, v levém dolním rohu a v pravém dolním rohu ovládacího prvku. Tato vlastnost se měří v jednotkách nezávislých na zařízeních. Pokud není nastaveno, bude poloměr rohu výchozím objektem CornerRadius, který se zobrazí jako 24.
Imagesource ImageSource Vlastnost ImageSource je ImageSource, která určuje obrázek ovládacího prvku. Dá se nastavit na obrázek načtený ze souboru, vloženého prostředku, identifikátoru URI nebo datového proudu. Pokud není nastavena, ovládací prvek vykreslí Text vlastnost.
Odsazení Thickness Vlastnost Padding je Tloušťka, která představuje vzdálenost mezi ohraničení ovládacího prvku a Text nebo ImageSource. V případě zrušení nastavení bude odsazení výchozím objektem Tloušťka, což je 1.
Text string Vlastnost Text je řetězec, který určuje text ovládacího prvku. Pokud ji nenasadíte, bude výchozí text, který se vykreslí jako "?".
Textcolor Color Vlastnost TextColor je Barva, která určuje barvu textu ovládacího prvku. Pokud text není nastaven, bude výchozím barevným objektem.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cílem datových vazeb a stylů.

Informace o zadávání písem v souboru AvatarViewnaleznete v tématu Písma.

Informace o zadávání stínů na objektu AvatarView, naleznete v tématu Stíny

Důležité

AvatarViewpoužije výchozí hodnotu a HeightRequest hodnotu 48, pokud není velikost AvatarView omezena rozložením nebo HeightRequestWidthRequest vlastností zadaného objektuAvatarView.WidthRequest Vlastnosti WidthRequest a HeightRequest vlastnosti se měří v jednotkách nezávislých na zařízeních.

Nastavení barvy pozadí

Vlastnost BackgroundColor je Barva, která určuje barvu pozadí ovládacího prvku.

Následující příklad nastaví barvu AvatarViewpozadí :

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

Ekvivalentní kód jazyka C# je:

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

Další informace o barvách naleznete v tématu Barvy.

Nastavení barvy ohraničení

Vlastnost BorderColor je Barva, která určuje barvu ohraničení ovládacího prvku.

Následující příklad nastaví barvu ohraničení AvatarView:

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

Ekvivalentní kód jazyka C# je:

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

Další informace o barvách naleznete v tématu Barvy.

Nastavení šířky ohraničení

Vlastnost BorderWidth je dvojitá, která určuje vykreslenou šířku ohraničení ovládacího prvku.

Následující příklad nastaví šířku ohraničení AvatarView:

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

Ekvivalentní kód jazyka C# je:

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

Nastavení poloměru rohu

Vlastnost CornerRadius je CornerRadius, který určuje tvar ovládacího prvku. Dá se nastavit na jednu double jednotnou hodnotu poloměru rohů nebo strukturu definovanou CornerRadius čtyřmi double hodnotami, které se použijí v levém horním rohu, v pravém horním rohu, v levém dolním rohu a v pravém dolním rohu ovládacího prvku.

Následující příklad nastaví rohový poloměr AvatarView tak, aby každý ze čtyř rohů měl zadaný poloměr:

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

Ekvivalentní kód jazyka C# je:

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

Následující příklad nastaví poloměr rohu tak AvatarView , aby všechny čtyři rohy měly stejný poloměr:

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

Ekvivalentní kód jazyka C# je:

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

Nastavení zdroje image

Vlastnost ImageSource je ImageSource, která určuje obrázek ovládacího prvku. Dá se nastavit na obrázek načtený ze souboru, vloženého prostředku, identifikátoru URI nebo datového proudu.

Následující příklad nastaví ImageSource použití AvatarView vloženého prostředku:

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

Ekvivalentní kód jazyka C# je:

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

Následující příklad nastaví ImageSource adresu AvatarView URL pro použití:

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

Ekvivalentní kód jazyka C# je:

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

Nastavení odsazení

Vlastnost Padding je Tloušťka, která představuje vzdálenost mezi ohraničení ovládacího prvku a Text nebo ImageSource.

Následující příklad nastaví Padding :AvatarView

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

Ekvivalentní kód jazyka C# je:

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

Nastavit text

Vlastnost Text je řetězec, který určuje text ovládacího prvku.

Následující příklad nastaví Text :AvatarView

<toolkit:AvatarView Text="ST" />

Ekvivalentní kód jazyka C# je:

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

Nastavení barvy textu

Vlastnost TextColor je Barva, která určuje barvu textu ovládacího prvku.

Následující příklad nastaví barvu AvatarViewtextu :

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

Ekvivalentní kód jazyka C# je:

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

Další informace o barvách naleznete v tématu Barvy.

Příklady

Příklady tohoto ovládacího prvku najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

rozhraní API

Zdrojový kód AvatarView najdete v úložišti .NET MAUI Community Toolkit na GitHubu.