AvatarView
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;
}
}
속성
| 속성 | Type | 설명 |
|---|---|---|
| BackgroundColor | Color |
속성 BackgroundColor 은 컨트롤의 배경색을 결정하는 Color입니다. 설정되지 않은 경우 배경은 흰색으로 렌더링되는 기본 Color 개체가 됩니다. |
| BorderColor | Color |
속성 BorderColor 은 컨트롤의 테두리 색을 결정 하는 색입니다. 설정되지 않은 경우 테두리는 검정으로 렌더링되는 기본 Color 개체가 됩니다. |
| BorderWidth | double |
속성은 BorderWidth 컨트롤 테두리의 렌더링된 너비를 결정하는 double입니다. 설정되지 않은 경우 테두리 너비가 기본값이 되며 1.0으로 렌더링됩니다. |
| CornerRadius | CornerRadius |
이 CornerRadius 속성은 컨트롤의 모양을 결정하는 CornerRadius입니다. 단일 double 균일한 모퉁이 반지름 값으로 설정하거나 CornerRadius 컨트롤의 왼쪽 위, 오른쪽 위, 왼쪽 아래 및 오른쪽 아래에 적용되는 4개의 double 값으로 정의된 구조체로 설정할 수 있습니다. 이 속성은 디바이스 독립적 단위로 측정됩니다. 설정하지 않으면 모퉁이 반경이 기본 CornerRadius 개체로, 24로 렌더링됩니다. |
| ImageSource | ImageSource |
속성은 ImageSource 컨트롤의 이미지를 결정하는 ImageSource입니다. 파일, 포함된 리소스, URI 또는 스트림에서 검색된 이미지로 설정할 수 있습니다. 설정하지 않으면 컨트롤이 속성을 렌더링합니다 Text . |
| 패딩 | Thickness |
속성은 Padding 컨트롤 테두리와 Text 또는 ImageSource사이의 거리를 나타내는 두께입니다. 설정되지 않은 경우 패딩은 기본 Thickness 개체(1)가 됩니다. |
| Text | string |
속성은 Text 컨트롤의 텍스트를 결정 하는 문자열입니다. 설정되지 않은 경우 텍스트가 기본값이 되어 '?'로 렌더링됩니다. |
| TextColor | Color |
속성 TextColor 은 컨트롤의 텍스트 색을 결정 하는 색입니다. 설정하지 않으면 텍스트가 기본 Color 개체가 됩니다. |
이러한 속성은 개체에 의해 BindableProperty 지원되므로 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정될 수 있습니다.
글꼴을 지정하는 방법에 대한 자세한 내용은 글꼴을 AvatarView참조 하세요.
그림자를 지정하는 방법에 대한 자세한 내용은 그림자를 AvatarView참조 하세요.
Important
AvatarView는 레이아웃 HeightRequestWidthRequest 에 의해 크기가 제한되거나 해당 속성 AvatarView 이 지정되지 않는 한 기본값 WidthRequestHeightRequest 과 48을 AvatarView 사용합니다. 및 HeightRequest 속성은 WidthRequest 디바이스 독립적 단위로 측정됩니다.
배경색 설정
속성 BackgroundColor 은 컨트롤의 배경색을 결정하는 Color입니다.
다음 예제에서는 다음의 배경색을 설정합니다.AvatarView
<toolkit:AvatarView BackgroundColor="Red" Text="BC" />
해당하는 C# 코드는 다음과 같습니다.
AvatarView avatarView = new()
{
Text = "BC",
BackgroundColor = Colors.Red,
};
색에 대한 자세한 내용은 색을 참조 하세요.
테두리 색 설정
속성 BorderColor 은 컨트롤의 테두리 색을 결정 하는 색입니다.
다음 예제에서는 다음의 테두리 색을 설정합니다.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 균일한 모퉁이 반지름 값으로 설정하거나 CornerRadius 컨트롤의 왼쪽 위, 오른쪽 위, 왼쪽 아래 및 오른쪽 아래에 적용되는 4개의 double 값으로 정의된 구조체로 설정할 수 있습니다.
다음 예제에서는 네 개의 모서리 각각에 지정된 반지름이 있도록 모퉁이 반 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,
};
다음 예제에서는 네 개의 모서리가 모두 동일한 반지름을 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 또는 스트림에서 검색된 이미지로 설정할 수 있습니다.
다음 예제에서는 포함된 리소스를 ImageSourceAvatarView 사용할 값을 설정합니다.
<toolkit:AvatarView ImageSource="Avatar_Icon_.png" Text="IS" />
해당하는 C# 코드는 다음과 같습니다.
AvatarView avatarView = new()
{
ImageSource = "Avatar_Icon_.png",
Text = "IS",
};
다음 예제에서는 URL을 ImageSourceAvatarView 사용할 값을 설정합니다.
<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사이의 거리를 나타내는 두께입니다.
다음 예제에서는 다음의 집합을 Padding 설정합니다.AvatarView
<toolkit:AvatarView Padding="2" Text="PA" />
해당하는 C# 코드는 다음과 같습니다.
AvatarView avatarView = new()
{
Padding = 2,
Text = "PA",
};
Set text
속성은 Text 컨트롤의 텍스트를 결정 하는 문자열입니다.
다음 예제에서는 다음의 집합을 Text 설정합니다.AvatarView
<toolkit:AvatarView Text="ST" />
해당하는 C# 코드는 다음과 같습니다.
AvatarView avatarView = new()
{
Text = "ST",
};
텍스트 색 설정
속성 TextColor 은 컨트롤의 텍스트 색을 결정 하는 색입니다.
다음 예제에서는 텍스트 색을 설정합니다.AvatarView
<toolkit:AvatarView Text="TC" TextColor="Green" />
해당하는 C# 코드는 다음과 같습니다.
AvatarView avatarView = new()
{
Text = "TC",
TextColor = Colors.Green,
};
색에 대한 자세한 내용은 색을 참조 하세요.
예제
.NET MAUI 커뮤니티 도구 키트 샘플 애플리케이션에서 작동 중인 이 컨트롤의 예제를 찾을 수 있습니다.
API
.NET MAUI 커뮤니티 도구 키트 GitHub 리포지토리에서 오버에 대한 AvatarView 소스 코드를 찾을 수 있습니다.
.NET MAUI Community Toolkit