레이블
샘플 찾아보기.NET 다중 플랫폼 앱 UI(.NET MAUI) Label 는 한 줄 및 여러 줄 텍스트를 표시합니다. a로 표시되는 텍스트는 Label 색을 지정하고 간격을 지정할 수 있으며 텍스트 장식이 있을 수 있습니다.
Label는 다음 속성을 정의합니다.
CharacterSpacing형식double의 경우 표시된 텍스트에 있는 문자 사이의 간격을 설정합니다.FontAttributes형식FontAttributes의 텍스트 스타일을 결정합니다.FontAutoScalingEnabled형식bool의 은 텍스트가 운영 체제에 설정된 크기 조정 기본 설정을 반영하는지 여부를 정의합니다. 이 속성의 기본값은true입니다.FontFamily형식string의 글꼴 패밀리를 정의합니다.FontSize형식double의 글꼴 크기를 정의합니다.FormattedText형식FormattedString은 글꼴 및 색과 같은 여러 프레젠테이션 옵션을 사용하여 텍스트의 프레젠테이션을 지정합니다.HorizontalTextAlignment형식TextAlignment의 은 표시된 텍스트의 가로 맞춤을 정의합니다.LineBreakMode형식LineBreakMode의 한 줄에 맞지 않을 때 텍스트를 처리하는 방법을 결정합니다.LineHeight형식double의 은 텍스트를 표시할 때 기본 줄 높이에 적용할 승수를 지정합니다.MaxLines형식int의 < a0/a0>은 .에 Label허용되는 최대 줄 수를 나타냅니다.Padding형식Thickness의 레이블의 안쪽 여백을 결정합니다.Text형식string의 은 레이블의 내용으로 표시되는 텍스트를 정의합니다.TextColor형식 Color의 은 표시된 텍스트의 색을 정의합니다.TextDecorations형식TextDecorations의 경우 적용할 수 있는 텍스트 장식(밑줄 및 취소선)을 지정합니다.TextTransform형식TextTransform의 경우 표시된 텍스트의 대/소문자를 지정합니다.TextType형식TextType의 은 일반 텍스트 또는 HTML 텍스트를 표시해야 하는지 여부를 Label 결정합니다.VerticalTextAlignment형식TextAlignment의 는 표시된 텍스트의 세로 맞춤을 정의합니다.
이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.
글꼴을 지정하는 방법에 대한 자세한 내용은 글꼴을 Label참조 하세요.
레이블 만들기
다음 예제에서는 다음을 만드는 방법을 보여줍니다.Label
<Label Text="Hello world" />
해당하는 C# 코드는 다음과 같습니다.
Label label = new Label { Text = "Hello world" };
색 설정
속성을 통해 특정 텍스트 색을 사용하도록 레이블을 TextColor 설정할 수 있습니다.
다음 예제에서는 텍스트 색을 설정합니다.Label
<Label TextColor="#77d065"
Text="This is a green label." />
색에 대한 자세한 내용은 색을 참조 하세요.
문자 간격 설정
속성을 값으로 Label 설정하여 개체에 문자 간격을 CharacterSpacing 적용할 double 수 있습니다.
<Label Text="Character spaced text"
CharacterSpacing="10" />
그 결과 텍스트에 표시되는 Label 문자는 간격이 지정된 CharacterSpacing 디바이스 독립적 단위가 떨어져 있습니다.
새 줄 추가
XAML에서 텍스트를 새 줄로 강제 Label 적용하는 두 가지 기본 기술이 있습니다.
- " "인 유니코드 줄 바꿈 문자를 사용합니다.
- 속성 요소 구문을 사용하여 텍스트를 지정합니다.
다음 코드는 두 기술의 예를 보여 줍니다.
<!-- Unicode line feed character -->
<Label Text="First line Second line" />
<!-- Property element syntax -->
<Label>
<Label.Text>
First line
Second line
</Label.Text>
</Label>
C#에서 텍스트는 "\n" 문자가 있는 새 줄로 강제 적용할 수 있습니다.
Label label = new Label { Text = "First line\nSecond line" };
텍스트 잘림 및 래핑 제어
속성을 열거형 값으로 설정 LineBreakMode 하여 텍스트 줄 바꿈 및 잘림을 LineBreakMode 제어할 수 있습니다.
NoWrap— 텍스트를 줄 바꿈하지 않고 한 줄에 맞을 수 있는 만큼의 텍스트만 표시합니다.LineBreakMode속성의 기본값입니다.WordWrap— 단어 경계에 텍스트를 줄 바꿈합니다.CharacterWrap— 문자 경계의 새 줄에 텍스트를 줄 바꿈합니다.HeadTruncation— 끝 부분을 표시하는 텍스트의 머리를 자른다.MiddleTruncation- 텍스트의 시작과 끝을 표시하고 가운데는 줄임표로 바꿉니다.TailTruncation- 끝 부분을 잘라내어 텍스트의 시작을 표시합니다.
특정 줄 수 표시
속성을 int 값으로 설정 MaxLines 하여 한 Label 줄로 표시되는 줄 수를 지정할 수 있습니다.
- 기본값 Label 인 -1인 경우
MaxLines속성 값LineBreakMode은 한 줄만 표시하거나 잘렸거나 모든 텍스트가 있는 모든 줄을 표시합니다. - 0 Label 이면
MaxLines표시되지 않습니다. - 1인 경우
MaxLines결과는 속성을 ,HeadTruncationMiddleTruncation또는TailTruncation.로 설정하는LineBreakMode것과NoWrap동일합니다. 그러나 Label 해당되는 경우 줄임표의LineBreakMode배치와 관련하여 속성 값을 적용합니다. - 1 Label 보다 크면
MaxLines줄임표의 배치와 관련하여 속성 값을LineBreakMode유지하면서 지정된 줄 수까지 표시됩니다(해당하는 경우). 그러나 속성을 1보다 큰 값으로 설정MaxLines해도 속성이 1보다 큰 경우에는LineBreakModeNoWrap효과가 없습니다.
다음 XAML 예제에서는 다음에서 속성을 설정하는 MaxLines 방법을 보여 줍니다 Label.
<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
LineBreakMode="WordWrap"
MaxLines="2" />
선 높이 설정
속성을 double 값으로 Label 설정하여 세로 높이를 Label.LineHeight 사용자 지정할 수 있습니다.
참고 항목
- iOS에서 속성은
Label.LineHeight한 줄에 맞는 텍스트의 줄 높이와 여러 줄로 줄 바꿈되는 텍스트를 변경합니다. - Android에서 속성은
Label.LineHeight여러 줄로 줄 바꿈되는 텍스트의 줄 높이만 변경합니다. - Windows에서 속성은
Label.LineHeight여러 줄로 줄 바꿈되는 텍스트의 줄 높이를 변경합니다.
다음 예제에서는 다음에서 속성을 설정하는 LineHeight 방법을 보여 줍니다 Label.
<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
LineBreakMode="WordWrap"
LineHeight="1.8" />
다음 스크린샷은 속성을 1.8로 설정한 Label.LineHeight 결과를 보여줍니다.
HTML 표시
Important
HTML을 A Label 에 표시하는 것은 기본 플랫폼에서 지원하는 HTML 태그로 제한됩니다. 예를 들어 Android는 HTML 태그의 하위 집합만 지원하며, 다음과 같은 <span><p>블록 수준 요소에 대한 기본 스타일 지정 및 서식 지정에 중점을 줍니다. 더 복잡한 HTML 렌더링의 경우 사용 WebView 또는 FormattedText.를 사용하는 것이 좋습니다.
클래스에는 Label 개체에 TextType 일반 텍스트 또는 HTML 텍스트를 표시할지 여부를 Label 결정하는 속성이 있습니다. 이 속성은 열거형의 TextType 멤버 중 하나로 설정해야 합니다.
따라서 Label 개체는 속성을 HTML 문자열로 설정하고 속성을 HtmlText HTML 문자열로 설정 TextType 하여 HTML을 표시할 수 있습니다.
Label label = new Label
{
Text = "This is <span style=\"color:red;\"><strong>HTML</strong></span> text.",
TextType = TextType.Html
};
위의 예제에서 HTML의 큰따옴표 문자는 기호를 사용하여 \ 이스케이프해야 합니다.
XAML에서 HTML 문자열은 추가적으로 < 이스케이프 및 > 기호로 인해 읽을 수 없게 될 수 있습니다.
<Label Text="This is <span style="color:red"><strong>HTML</strong></span> text."
TextType="Html" />
또는 가독성을 높이기 위해 HTML을 섹션에 CDATA 인라인 처리할 수 있습니다.
<Label TextType="Html">
<![CDATA[
<Label Text="This is <span style="color:red"><strong>HTML</strong></span> text."
]]>
</Label>
이 예제 Text 에서 속성은 섹션에 인라인된 HTML 문자열로 CDATA 설정됩니다. 이는 속성이 Text 클래스에 ContentProperty 대한 속성이기 때문에 작동합니다 Label .
텍스트 데코레이트
속성을 하나 이상의 TextDecorations 열거형 멤버로 Label 설정 TextDecorations 하여 개체에 밑줄 및 취소선 텍스트 장식을 적용할 수 있습니다.
NoneUnderlineStrikethrough
다음 예제에서는 속성을 설정하는 방법을 TextDecorations 보여 줍니다.
<Label Text="This is underlined text." TextDecorations="Underline" />
<Label Text="This is text with strikethrough." TextDecorations="Strikethrough" />
<Label Text="This is underlined text with strikethrough." TextDecorations="Underline, Strikethrough" />
해당하는 C# 코드는 다음과 같습니다.
Label underlineLabel = new Label { Text = "This is underlined text.", TextDecorations = TextDecorations.Underline };
Label strikethroughLabel = new Label { Text = "This is text with strikethrough.", TextDecorations = TextDecorations.Strikethrough };
Label bothLabel = new Label { Text = "This is underlined text with strikethrough.", TextDecorations = TextDecorations.Underline | TextDecorations.Strikethrough };
다음 스크린샷은 인스턴스에 TextDecorations 적용된 열거형 멤버를 Label 보여줍니다.
텍스트 변환
A Label 는 속성을 열거형 값으로 설정 TextTransform 하여 속성에 Text 저장된 텍스트의 TextTransform 대/소문자를 변환할 수 있습니다. 이 열거형에는 다음 네 가지 값이 있습니다.
None는 텍스트가 변환되지 않음을 나타냅니다.Default는 플랫폼의 기본 동작이 사용됨을 나타냅니다.TextTransform속성의 기본값입니다.Lowercase는 텍스트가 소문자로 변환됨을 나타냅니다.Uppercase는 텍스트가 대문자로 변환됨을 나타냅니다.
다음 예제에서는 텍스트를 대문자로 변환하는 방법을 보여줍니다.
<Label Text="This text will be displayed in uppercase."
TextTransform="Uppercase" />
서식 있는 텍스트 사용
Label 는 FormattedText 동일한 보기에서 여러 글꼴과 색을 사용하여 텍스트를 표시할 수 있는 속성을 노출합니다. 속성은 FormattedText 속성을 통해 설정되는 하나 이상의 Span 인스턴스로 구성된 형식FormattedString입니다Spans.
참고 항목
에 HTML Span을 표시할 수 없습니다.
Span는 다음 속성을 정의합니다.
BackgroundColor범위 배경의 색을 나타내는 형식 Color의 입니다.CharacterSpacing형식double의 경우 표시된 텍스트에 있는 문자 사이의 간격을 설정합니다.FontAttributes형식FontAttributes의 텍스트 스타일을 결정합니다.FontAutoScalingEnabled형식bool의 은 텍스트가 운영 체제에 설정된 크기 조정 기본 설정을 반영하는지 여부를 정의합니다. 이 속성의 기본값은true입니다.FontFamily형식string의 글꼴 패밀리를 정의합니다.FontSize형식double의 글꼴 크기를 정의합니다.LineHeight형식double의 은 텍스트를 표시할 때 기본 줄 높이에 적용할 승수를 지정합니다.Style- 범위에 적용할 스타일인 형식 Style입니다.Text형식string의 < a0/>은 표시되는 텍스트를 해당 내용 Span으로 정의합니다.TextColor형식 Color의 은 표시된 텍스트의 색을 정의합니다.TextDecorations형식TextDecorations의 경우 적용할 수 있는 텍스트 장식(밑줄 및 취소선)을 지정합니다.TextTransform형식TextTransform의 경우 표시된 텍스트의 대/소문자를 지정합니다.
이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.
참고 항목
이 Span.LineHeight 속성은 Windows에 영향을 주지 않습니다.
또한 이 GestureRecognizers 속성을 사용하여 제스처에 Span응답할 제스처 인식기 컬렉션을 정의할 수 있습니다.
다음 XAML 예제에서는 세 Span 개의 인스턴스로 FormattedText 구성된 속성을 보여 줍니다.
<Label LineBreakMode="WordWrap">
<Label.FormattedText>
<FormattedString>
<Span Text="Red Bold, " TextColor="Red" FontAttributes="Bold" />
<Span Text="default, " FontSize="14">
<Span.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand}" />
</Span.GestureRecognizers>
</Span>
<Span Text="italic small." FontAttributes="Italic" FontSize="12" />
</FormattedString>
</Label.FormattedText>
</Label>
해당하는 C# 코드는 다음과 같습니다.
FormattedString formattedString = new FormattedString ();
formattedString.Spans.Add (new Span { Text = "Red bold, ", TextColor = Colors.Red, FontAttributes = FontAttributes.Bold });
Span span = new Span { Text = "default, " };
span.GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(async () => await DisplayAlert("Tapped", "This is a tapped Span.", "OK")) });
formattedString.Spans.Add(span);
formattedString.Spans.Add (new Span { Text = "italic small.", FontAttributes = FontAttributes.Italic, FontSize = 14 });
Label label = new Label { FormattedText = formattedString };
다음 스크린샷은 세 Span 개의 개체가 포함된 결과를 Label 보여 줍니다.
또한 A Span 는 범위의 GestureRecognizers 컬렉션에 추가되는 모든 제스처에 응답할 수 있습니다. 예를 들어 TapGestureRecognizer 위의 예제에서 두 번째 Span 에 a가 추가되었습니다. 따라서 이 Span 옵션을 탭 TapGestureRecognizer 하면 속성에 정의된 값을 실행하여 ICommand 응답합니다 Command . 탭 제스처 인식에 대한 자세한 내용은 탭 제스처 인식을 참조하세요.
하이퍼링크 만들기
다음 방법을 사용하여 표시한 Label 텍스트와 Span 인스턴스를 하이퍼링크로 전환할 수 있습니다.
- 또는 Span.의
TextColorLabel 속성 및TextDecoration속성을 설정합니다. - 속성이 a TapGestureRecognizer 에 바인딩되고
CommandParameter열 URL이 포함된Command속성의 컬렉션 SpanLabel 에 aICommand를 추가GestureRecognizers합니다. - 에 ICommand 의해 실행될 해당 항목을 정의합니다 TapGestureRecognizer.
- 에서 실행할 코드를 작성합니다 ICommand.
다음 예제에서는 해당 콘텐츠가 Label 여러 Span 개체에서 설정되는 것을 보여줍니다.
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="Alternatively, click " />
<Span Text="here"
TextColor="Blue"
TextDecorations="Underline">
<Span.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand}"
CommandParameter="https://learn.microsoft.com/dotnet/maui/" />
</Span.GestureRecognizers>
</Span>
<Span Text=" to view .NET MAUI documentation." />
</FormattedString>
</Label.FormattedText>
</Label>
이 예제에서 첫 번째 인스턴스와 세 번째 Span 인스턴스는 텍스트를 포함하고, 두 번째 Span 인스턴스는 탭 가능한 하이퍼링크를 나타냅니다. 텍스트 색이 파란색으로 설정되고 밑줄 텍스트 장식이 있습니다. 그러면 다음 스크린샷과 같이 하이퍼링크의 모양이 만들어집니다.
하이퍼링크를 탭 TapGestureRecognizer 하면 해당 속성으로 정의된 하이퍼링크를 ICommand 실행하여 응답합니다 Command . 또한 속성에 지정된 CommandParameter URL은 매개 변수로 전달 ICommand 됩니다.
XAML 페이지의 코드 숨김에는 다음 구현이 TapCommand 포함됩니다.
using System.Windows.Input;
public partial class MainPage : ContentPage
{
// Launcher.OpenAsync is provided by Essentials.
public ICommand TapCommand => new Command<string>(async (url) => await Launcher.OpenAsync(url));
public MainPage()
{
InitializeComponent();
BindingContext = this;
}
}
메서드 TapCommand 를 실행하여 Launcher.OpenAsync 속성 값을 매개 변수로 전달 TapGestureRecognizer.CommandParameter 합니다. 이 메서드는 Launcher.OpenAsync 웹 브라우저에서 URL을 엽니다. 따라서 전체적인 효과는 페이지에서 하이퍼링크를 탭하면 웹 브라우저가 나타나고 하이퍼링크와 연결된 URL이 탐색된다는 것입니다.
재사용 가능한 하이퍼링크 클래스 만들기
하이퍼링크를 만드는 이전 방법은 앱에서 하이퍼링크가 필요할 때마다 반복 코드를 작성해야 합니다. 그러나 제스처 인식기와 Span 텍스트 서식 코드가 추가된 상태에서 클래스와 HyperlinkSpan 클래스를 모두 Label 서브클래스하여 만들고 클래스를 만들 HyperlinkLabel 수 있습니다.
다음 예제에서는 클래스를 보여줍니다.HyperlinkSpan
public class HyperlinkSpan : Span
{
public static readonly BindableProperty UrlProperty =
BindableProperty.Create(nameof(Url), typeof(string), typeof(HyperlinkSpan), null);
public string Url
{
get { return (string)GetValue(UrlProperty); }
set { SetValue(UrlProperty, value); }
}
public HyperlinkSpan()
{
TextDecorations = TextDecorations.Underline;
TextColor = Colors.Blue;
GestureRecognizers.Add(new TapGestureRecognizer
{
// Launcher.OpenAsync is provided by Essentials.
Command = new Command(async () => await Launcher.OpenAsync(Url))
});
}
}
클래스는 HyperlinkSpan 속성과 연결된 BindableProperty속성을 정의 Url 하고, 생성자는 하이퍼링크 모양을 TapGestureRecognizer 설정하고 하이퍼링크를 탭할 때 응답합니다. 탭 HyperlinkSpan 하면 TapGestureRecognizer 웹 브라우저에서 속성에 지정된 URL을 Launcher.OpenAsync 여는 메서드를 Url 실행하여 응답합니다.
클래스의 HyperlinkSpan 인스턴스를 XAML에 추가하여 클래스를 사용할 수 있습니다.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HyperlinkDemo"
x:Class="HyperlinkDemo.MainPage">
<StackLayout>
...
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="Alternatively, click " />
<local:HyperlinkSpan Text="here"
Url="https://learn.microsoft.com/dotnet/" />
<Span Text=" to view .NET documentation." />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</ContentPage>
.NET MAUI
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기