Xamarin.Forms 레이블Xamarin.Forms Label

샘플 다운로드 샘플 다운로드Download Sample Download the sample

Xamarin.Forms에서 텍스트를 표시 합니다.Display text in Xamarin.Forms

합니다 Label 보기 단일 및 여러 줄 텍스트를 표시 하기 위해 사용 됩니다.The Label view is used for displaying text, both single and multi-line. 레이블 (패밀리, 크기 및 옵션) 사용자 지정 글꼴을 사용 및 텍스트 장식을 색이 지정 된 텍스트를 구축할 수 있습니다.Labels can have text decorations, colored text, and use custom fonts (families, sizes, and options).

텍스트 장식Text decorations

밑줄 및 취소선 텍스트 장식을 적용할 수 있습니다 Label 설정 하 여 인스턴스를 Label.TextDecorations 속성을 하나 이상의 TextDecorations 열거형 멤버:Underline and strikethrough text decorations can be applied to Label instances by setting the Label.TextDecorations property to one or more TextDecorations enumeration members:

  • None
  • Underline
  • Strikethrough

다음 XAML 예제에서는 설정 된 Label.TextDecorations 속성:The following XAML example demonstrates setting the Label.TextDecorations property:

<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# 코드는 다음과 같습니다.The equivalent C# code is:

var underlineLabel = new Label { Text = "This is underlined text.", TextDecorations = TextDecorations.Underline };
var strikethroughLabel = new Label { Text = "This is text with strikethrough.", TextDecorations = TextDecorations.Strikethrough };
var bothLabel = new Label { Text = "This is underlined text with strikethrough.", TextDecorations = TextDecorations.Underline | TextDecorations.Strikethrough };

다음 스크린샷에서 표시 된 TextDecorations 열거형 멤버에 적용 Label 인스턴스:The following screenshots show the TextDecorations enumeration members applied to Label instances:

텍스트 장식이 있는 레이블

참고

텍스트 장식을 적용할 수도 있습니다 Span 인스턴스.Text decorations can also be applied to Span instances. 에 대 한 자세한 내용은 합니다 Span 클래스를 참조 하십시오 서식 있는 텍스트합니다.For more information about the Span class, see Formatted Text.

문자 간격Character spacing

문자 간격은 Label.CharacterSpacing 속성을 double 값으로 설정 하 여 Label 인스턴스에 적용할 수 있습니다.Character spacing can be applied to Label instances by setting the Label.CharacterSpacing property to a double value:

<Label Text="Character spaced text"
       CharacterSpacing="10" />

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

Label label = new Label { Text = "Character spaced text", CharacterSpacing = 10 };

그 결과 Label 표시 되는 텍스트의 문자는 장치 독립적 단위 CharacterSpacing 간격이 떨어져 있습니다.The result is that characters in the text displayed by the Label are spaced CharacterSpacing device-independent units apart.

Colors

레이블은 바인딩 가능한를 통해 사용자 지정 텍스트 색을 사용 하도록 설정할 수 있습니다 TextColor 속성입니다.Labels can be set to use a custom text color via the bindable TextColor property.

특별 한 주의 색 각 플랫폼에서 사용할 수 있는지 확인 하는 데 필요한 경우Special care is necessary to ensure that colors will be usable on each platform. 각 플랫폼에 텍스트 및 배경색에 대 한 다른 기본값 때문에 각에서 작동 하는 기본값을 선택 하도록 주의 해야 합니다.Because each platform has different defaults for text and background colors, you'll need to be careful to pick a default that works on each.

텍스트 색을 설정 하는 다음 XAML 예제는 Label:The following XAML example sets the text color of a Label:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TextSample.LabelPage"
             Title="Label Demo">
    <StackLayout Padding="5,10">
      <Label TextColor="#77d065" FontSize = "20" Text="This is a green label." />
    </StackLayout>
</ContentPage>

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

public partial class LabelPage : ContentPage
{
    public LabelPage ()
    {
        InitializeComponent ();

        var layout = new StackLayout { Padding = new Thickness(5,10) };
        var label = new Label { Text="This is a green label.", TextColor = Color.FromHex("#77d065"), FontSize = 20 };
        layout.Children.Add(label);
        this.Content = layout;
    }
}

설정의 결과 표시 하는 다음 스크린샷에서 TextColor 속성:The following screenshots show the result of setting the TextColor property:

레이블 TextColor 예

색에 대 한 자세한 내용은 참조 하세요. 합니다.For more information about colors, see Colors.

글꼴Fonts

글꼴을 지정 하는 방법에 대 한 자세한 내용은 Label를 참조 하세요 글꼴합니다.For more information about specifying fonts on a Label, see Fonts.

잘라내기 및 줄 바꿈Truncation and wrapping

레이블을 설정할 수 있는 의해 노출 되는 여러 가지 방법 중 하나에서 한 줄에 맞지 않는 텍스트를 처리 합니다 LineBreakMode 속성입니다.Labels can be set to handle text that can't fit on one line in one of several ways, exposed by the LineBreakMode property. LineBreakMode 이 다음 값으로 열거형:LineBreakMode is an enumeration with the following values:

  • HeadTruncation – 끝 표시 텍스트의 머리를 자릅니다.HeadTruncation – truncates the head of the text, showing the end.
  • CharacterWrap – 문자 경계에서 새 줄에 텍스트를 배치 합니다.CharacterWrap – wraps text onto a new line at a character boundary.
  • MiddleTruncation – 줄임표로 중간 replace 사용 하 여 텍스트의 시작과 끝을 표시 합니다.MiddleTruncation – displays the beginning and end of the text, with the middle replace by an ellipsis.
  • NoWrap – 만 표시할 텍스트를 래핑하지 않으며 수 만큼 텍스트 한 줄에 적합 합니다.NoWrap – does not wrap text, displaying only as much text as can fit on one line.
  • TailTruncation – 끝 잘라내기 텍스트의 시작 부분을 보여줍니다.TailTruncation – shows the beginning of the text, truncating the end.
  • WordWrap – 단어 경계에서 텍스트를 배치 합니다.WordWrap – wraps text at the word boundary.

특정 줄 수를 표시 합니다.Display a specific number of lines

표시 되는 줄 번호를 Label 설정 하 여 지정할 수 있습니다 합니다 Label.MaxLines 속성을는 int 값:The number of lines displayed by a Label can be specified by setting the Label.MaxLines property to a int value:

  • MaxLines가 기본값 인-1 인 경우 LabelLineBreakMode 속성의 값을 사용 하 여 한 줄만 표시 하거나 잘린 상태로 표시 하거나 모든 텍스트를 포함 하는 모든 줄을 표시 합니다.When MaxLines is -1, which is its default value, the Label respects the value of the LineBreakMode property to either show just one line, possibly truncated, or all lines with all text.
  • MaxLines 0 이면 Label 표시 되지 않습니다.When MaxLines is 0, the Label isn't displayed.
  • MaxLines 가 1 이면 결과 동일 설정에는 LineBreakMode 속성을 NoWrap HeadTruncation , MiddleTruncation , 또는 TailTruncation 합니다.When MaxLines is 1, the result is identical to setting the LineBreakMode property to NoWrap, HeadTruncation, MiddleTruncation, or TailTruncation. 그러나 합니다 Label 의 값을 적용 합니다는 LineBreakMode 줄임표에 해당 하는 경우의 배치와 관련 하 여 속성입니다.However, the Label will respect the value of the LineBreakMode property with regard to placement of an ellipsis, if applicable.
  • MaxLines 1 보다 크면 합니다 Label 최대 선을 지정 된 수의 값을 유지 하는 동안 표시 됩니다는 LineBreakMode 줄임표에 해당 하는 경우의 배치와 관련 하 여 속성.When MaxLines is greater than 1, the Label will display up to the specified number of lines, while respecting the value of the LineBreakMode property with regard to placement of an ellipsis, if applicable. 그러나 설정를 MaxLines 1 영향을 주지 않습니다 경우는 보다 큰 값으로 속성을 LineBreakMode 속성이로 설정 되어 NoWrap .However, setting the MaxLines property to a value greater than 1 has no effect if the LineBreakMode property is set to NoWrap.

다음 XAML 예제에서는 설정 된 MaxLines 속성을 Label :The following XAML example demonstrates setting the MaxLines property on a 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" />

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

var 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 = LineBreakMode.WordWrap,
  MaxLines = 2
};

설정의 결과 표시 하는 다음 스크린샷에서 MaxLines 를 2, 텍스트는 2 개 이상의 줄을 차지 하기에 충분히 길지 속성:The following screenshots show the result of setting the MaxLines property to 2, when the text is long enough to occupy more than 2 lines:

레이블 MaxLines 예

HTML 표시Display HTML

Label 클래스에는 Label 인스턴스가 일반 텍스트 또는 HTML 텍스트를 표시 해야 하는지 여부를 결정 하는 TextType 속성이 있습니다.The Label class has a TextType property, which determines whether the Label instance should display plain text, or HTML text. 이 속성은 TextType 열거형의 멤버 중 하나로 설정 해야 합니다.This property should be set to one of the members of the TextType enumeration:

  • TextLabel 일반 텍스트를 표시 하 고 Label.TextType 속성의 기본값을 나타냅니다.Text indicates that the Label will display plain text, and is the default value of the Label.TextType property.
  • HtmlLabel HTML 텍스트를 표시 함을 나타냅니다.Html indicates that the Label will display HTML text.

따라서 Label 인스턴스는 Label.TextType 속성을 Html로 설정 하 고 Label.Text 속성을 html 문자열로 설정 하 여 html을 표시할 수 있습니다.Therefore, Label instances can display HTML by setting the Label.TextType property to Html, and the Label.Text property to a HTML string:

Label label = new Label
{
    Text = "This is <strong style=\"color:red\">HTML</strong> text.",
    TextType = TextType.Html
};

위의 예제에서 HTML의 큰따옴표 문자는 \ 기호를 사용 하 여 이스케이프 해야 합니다.In the example above, the double quote characters in the HTML have to be escaped using the \ symbol.

XAML에서 <> 기호를 추가로 이스케이프 하면 HTML 문자열을 읽을 수 없게 됩니다.In XAML, HTML strings can become unreadable due to additionally escaping the < and > symbols:

<Label Text="This is &lt;strong style=&quot;color:red&quot;&gt;HTML&lt;/strong&gt; text."
       TextType="Html"  />

또는 가독성을 높이기 위해 CDATA 섹션에서 HTML을 인라인 처리할 수 있습니다.Alternatively, for greater readability the HTML can be inlined in a CDATA section:

<Label TextType="Html">
    <![CDATA[
    This is <strong style="color:red">HTML</strong> text.
    ]]>
</Label>

이 예제에서 Label.Text 속성은 CDATA 섹션에서 인라인 된 HTML 문자열로 설정 됩니다.In this example, the Label.Text property is set to the HTML string that's inlined in the CDATA section. 이는 Text 속성이 Label 클래스의 ContentProperty 이기 때문에 작동 합니다.This works because the Text property is the ContentProperty for the Label class.

다음 스크린샷에는 HTML을 표시 하는 Label 표시 됩니다.The following screenshots show a Label displaying HTML:

IOS 및 Android에서 HTML을 표시 하는 레이블의 스크린샷

중요

Label 에 html을 표시 하는 것은 기본 플랫폼에서 지원 되는 html 태그로 제한 됩니다.Displaying HTML in a Label is limited to the HTML tags that are supported by the underlying platform.

서식 있는 텍스트Formatted text

레이블은 동일한 보기에서 여러 글꼴 및 색을 사용 하 여 텍스트를 표시할 수 있는 FormattedText 속성을 노출 합니다.Labels expose a FormattedText property that allows the presentation of text with multiple fonts and colors in the same view.

FormattedText 형식의 속성은 FormattedString 로 구성 된 하나 이상의 Span 인스턴스를 통해 설정 된 Spans 속성 .The FormattedText property is of type FormattedString, which comprises one or more Span instances, set via the Spans property. 다음 Span 모양을 설정 하려면 속성을 사용할 수 있습니다.The following Span properties can be used to set visual appearance:

  • BackgroundColor -s p a n 배경의 색입니다.BackgroundColor – the color of the span background.
  • double 형식의 CharacterSpacingSpan 텍스트를 구성하는 문자 사이의 간격입니다.CharacterSpacing, of type double, is the spacing between characters of the Span text.
  • Font – 범위에 있는 텍스트의 글꼴입니다.Font – the font for the text in the span.
  • FontAttributes – 범위에 있는 텍스트에 대 한 글꼴 특성입니다.FontAttributes – the font attributes for the text in the span.
  • FontFamily – 범위에 있는 텍스트의 글꼴을 속해 있는 글꼴 패밀리입니다.FontFamily – the font family to which the font for the text in the span belongs.
  • FontSize – 범위에 있는 텍스트의 글꼴 크기입니다.FontSize – the size of the font for the text in the span.
  • ForegroundColor – 범위에 있는 텍스트의 색입니다.ForegroundColor – the color for the text in the span. 이 속성은 사용 되지 않습니다 및 바뀌었습니다는 TextColor 속성입니다.This property is obsolete and has been replaced by the TextColor property.
  • LineHeight -범위의 기본 줄 높이에 적용할 승수입니다.LineHeight - the multiplier to apply to the default line height of the span. 자세한 내용은 줄 높이합니다.For more information, see Line Height.
  • Style – 범위에 적용 되는 스타일입니다.Style – the style to apply to the span.
  • Text – 텍스트 범위입니다.Text – the text of the span.
  • TextColor – 범위에 있는 텍스트의 색입니다.TextColor – the color for the text in the span.
  • TextDecorations -범위에 있는 텍스트에 적용할 장식 합니다.TextDecorations - the decorations to apply to the text in the span. 자세한 내용은 텍스트 장식을합니다.For more information, see Text Decorations.

BackgroundColor, TextText 바인딩 가능한 속성은 OneWay의 기본 바인딩 모드입니다.The BackgroundColor, Text, and Text bindable properties have a default binding mode of OneWay. 이 바인딩 모드에 대 한 자세한 내용은 바인딩 모드 가이드에서 기본 바인딩 모드 를 참조 하세요.For more information about this binding mode, see The Default Binding Mode in the Binding Mode guide.

또한 합니다 GestureRecognizers 응답할 제스처에서 제스처 인식기의 컬렉션을 정의 하려면 속성을 사용할 수 있습니다 합니다 Span 합니다.In addition, the GestureRecognizers property can be used to define a collection of gesture recognizers that will respond to gestures on the Span.

참고

Span에 HTML을 표시할 수 없습니다.It's not possible to display HTML in a Span.

다음 XAML 예제는 FormattedText 세 가지 구성 된 속성 Span 인스턴스:The following XAML example demonstrates a FormattedText property that consists of three Span instances:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TextSample.LabelPage"
             Title="Label Demo - XAML">
    <StackLayout Padding="5,10">
        ...
        <Label LineBreakMode="WordWrap">
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="Red Bold, " TextColor="Red" FontAttributes="Bold" />
                    <Span Text="default, " Style="{DynamicResource BodyStyle}">
                        <Span.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding TapCommand}" />
                        </Span.GestureRecognizers>
                    </Span>
                    <Span Text="italic small." FontAttributes="Italic" FontSize="Small" />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>
</ContentPage>

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

public class LabelPageCode : ContentPage
{
    public LabelPageCode ()
    {
        var layout = new StackLayout{ Padding = new Thickness (5, 10) };
        ...
        var formattedString = new FormattedString ();
        formattedString.Spans.Add (new Span{ Text = "Red bold, ", ForegroundColor = Color.Red, FontAttributes = FontAttributes.Bold });

        var 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 =  Device.GetNamedSize(NamedSize.Small, typeof(Label)) });

        layout.Children.Add (new Label { FormattedText = formattedString });
        this.Content = layout;
    }
}

중요

합니다 Text 의 속성을 Span 데이터 바인딩을 통해 설정할 수 있습니다.The Text property of a Span can be set through data binding. 자세한 내용은 데이터 바인딩을 참조하세요.For more information, see Data Binding.

Span 는 범위에 추가 되는 모든 제스처에 응답할 수도 GestureRecognizers 컬렉션입니다.Note that a Span can also respond to any gestures that are added to the span's GestureRecognizers collection. 예를 들어, 한 TapGestureRecognizer 두 번째 추가 되었습니다 Span 위의 코드 예제에서 합니다.For example, a TapGestureRecognizer has been added to the second Span in the above code examples. 따라서,이 Span 를 탭 할 합니다 TapGestureRecognizer 실행 하 여 응답 합니다를 ICommand 정의한를 Command 속성.Therefore, when this Span is tapped the TapGestureRecognizer will respond by executing the ICommand defined by the Command property. 제스처 인식기에 대 한 자세한 내용은 참조 하세요. Xamarin.Forms 제스처합니다.For more information about gesture recognizers, see Xamarin.Forms Gestures.

다음 스크린샷은 설정의 결과 표시 합니다 FormattedString 속성을 3 Span 인스턴스:The following screenshots show the result of setting the FormattedString property to three Span instances:

레이블 FormattedText 예제

줄 높이Line height

세로 높이 Label Span 설정 하 여 사용자 지정할 수 있습니다 합니다 Label.LineHeight 속성 또는 Span.LineHeight double 값입니다.The vertical height of a Label and a Span can be customized by setting the Label.LineHeight property or Span.LineHeight to a double value. IOS 및 Android에서 이러한 값은 원래 줄 높이 및 유니버설 Windows 플랫폼 (UWP)에서 승수는 Label.LineHeight 속성 값이 레이블 글꼴 크기의 승수입니다.On iOS and Android these values are multipliers of the original line height, and on the Universal Windows Platform (UWP) the Label.LineHeight property value is a multiplier of the label font size.

참고

다음 XAML 예제에서는 설정 된 LineHeight 속성을 Label :The following XAML example demonstrates setting the LineHeight property on a 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" />

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

var 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 = LineBreakMode.WordWrap,
  LineHeight = 1.8
};

다음 스크린샷은 설정의 결과 표시 합니다 Label.LineHeight 1.8 속성:The following screenshots show the result of setting the Label.LineHeight property to 1.8:

레이블 LineHeight 예

다음 XAML 예제에서는 설정 된 LineHeight 속성을 Span :The following XAML example demonstrates setting the LineHeight property on a Span:

<Label LineBreakMode="WordWrap">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tincidunt sem. Phasellus mollis sit amet turpis in rutrum. Sed aliquam ac urna id scelerisque. "
                  LineHeight="1.8"/>
            <Span Text="Nullam feugiat sodales elit, et maximus nibh vulputate id."
                  LineHeight="1.8" />
        </FormattedString>
    </Label.FormattedText>
</Label>

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

var formattedString = new FormattedString();
formattedString.Spans.Add(new Span
{
  Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tincidunt sem. Phasellus mollis sit amet turpis in rutrum. Sed aliquam ac urna id scelerisque. ",
  LineHeight = 1.8
});
formattedString.Spans.Add(new Span
{
  Text = "Nullam feugiat sodales elit, et maximus nibh vulputate id.",
  LineHeight = 1.8
});
var label = new Label
{
  FormattedText = formattedString,
  LineBreakMode = LineBreakMode.WordWrap
};

다음 스크린샷은 설정의 결과 표시 합니다 Span.LineHeight 1.8 속성:The following screenshots show the result of setting the Span.LineHeight property to 1.8:

Span LineHeight 예

안쪽 여백Padding

안쪽 여백은 요소와 자식 요소 사이의 공간을 나타내며 요소를 자체 콘텐츠에서 구분 하는 데 사용 됩니다.Padding represents the space between an element and its child elements, and is used to separate the element from its own content. Label.Padding 속성을 Thickness 값으로 설정 하 여 Label 인스턴스에 패딩을 적용할 수 있습니다.Padding can be applied to Label instances by setting the Label.Padding property to a Thickness value:

<Label Padding="10">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Lorem ipsum" />
            <Span Text="dolor sit amet." />
        </FormattedString>
    </Label.FormattedText>
</Label>

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

FormattedString formattedString = new FormattedString();
formattedString.Spans.Add(new Span
{
  Text = "Lorem ipsum"
});
formattedString.Spans.Add(new Span
{
  Text = "dolor sit amet."
});
Label label = new Label
{
    FormattedText = formattedString,
    Padding = new Thickness(20)
};

중요

IOS에서 Padding 속성을 설정 하는 Label 만들어질 때 패딩이 적용 되 고 패딩 값은 나중에 업데이트할 수 있습니다.On iOS, when a Label is created that sets the Padding property, padding will be applied and the padding value can be updated later. 그러나 Padding 속성을 설정 하지 않는 Label를 만든 경우 나중에 설정 하려는 시도는 영향을 주지 않습니다.However, when a Label is created that doesn't set the Padding property, attempting to set it later will have no effect.

Android 및 유니버설 Windows 플랫폼에서 Padding 속성 값은 Label를 만들 때 또는 나중에 지정할 수 있습니다.On Android and the Universal Windows Platform, the Padding property value can be specified when the Label is created, or later.

안쪽 여백에 대 한 자세한 내용은 여백 및 안쪽여백을 참조 하세요.For more information about padding, see Margins and Padding.

LabelSpan 인스턴스로 표시 되는 텍스트는 다음과 같은 방법으로 하이퍼링크로 전환 될 수 있습니다.The text displayed by Label and Span instances can be turned into hyperlinks with the following approach:

  1. Label 또는 SpanTextColorTextDecoration 속성을 설정 합니다.Set the TextColor and TextDecoration properties of the Label or Span.
  2. Command속성이 ICommand 에 바인딩되고 CommandParameter속성이 열 URL을 포함 하는 Label 또는 SpanGestureRecognizers 컬렉션에 TapGestureRecognizer 를 추가 합니다.Add a TapGestureRecognizer to the GestureRecognizers collection of the Label or Span, whose Command property binds to a ICommand, and whose CommandParameter property contains the URL to open.
  3. TapGestureRecognizer에 의해 실행 되는 ICommand을 정의 합니다.Define the ICommand that will be executed by the TapGestureRecognizer.
  4. ICommand에서 실행 되는 코드를 작성 합니다.Write the code that will be executed by the ICommand.

Hyperlink 데모 샘플에서 가져온 다음 코드 예제는 여러 Span 인스턴스에서 내용이 설정 된 Label 를 보여 줍니다.The following code example, taken from the Hyperlink Demos sample, shows a Label whose content is set from multiple Span instances:

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Alternatively, click " />
            <Span Text="here"
                  TextColor="Blue"
                  TextDecorations="Underline">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding TapCommand}"
                                          CommandParameter="https://docs.microsoft.com/xamarin/" />
                </Span.GestureRecognizers>
            </Span>
            <Span Text=" to view Xamarin documentation." />
        </FormattedString>
    </Label.FormattedText>
</Label>

이 예에서 첫 번째 및 세 번째 Span 인스턴스는 텍스트를 구성 하는 반면 두 번째 Span는 tappable 하이퍼링크를 나타냅니다.In this example, the first and third Span instances comprise text, while the second Span represents a tappable hyperlink. 텍스트 색이 blue로 설정 되어 있으며 밑줄 텍스트 장식이 있습니다.It has its text color set to blue, and has an underline text decoration. 그러면 다음 스크린샷에 표시 된 것 처럼 하이퍼링크 모양이 생성 됩니다.This creates the appearance of a hyperlink, as shown in the following screenshots:

링크Hyperlinks

하이퍼링크를 누르면 TapGestureRecognizer Command 속성으로 정의 된 ICommand를 실행 하 여 응답 합니다.When the hyperlink is tapped, the TapGestureRecognizer will respond by executing the ICommand defined by its Command property. 또한 CommandParameter 속성으로 지정 된 URL은 매개 변수로 ICommand 전달 됩니다.In addition, the URL specified by the CommandParameter property will be passed to the ICommand as a parameter.

XAML 페이지의 코드 숨김으로는 TapCommand 구현이 포함 되어 있습니다.The code-behind for the XAML page contains the TapCommand implementation:

public partial class MainPage : ContentPage
{
    // Launcher.OpenAsync is provided by Xamarin.Essentials.
    public ICommand TapCommand => new Command<string>(async (url) => await Launcher.OpenAsync(url));

    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
    }
}

TapCommand Launcher.OpenAsync 메서드를 실행 하 여 TapGestureRecognizer.CommandParameter 속성 값을 매개 변수로 전달 합니다.The TapCommand executes the Launcher.OpenAsync method, passing the TapGestureRecognizer.CommandParameter property value as a parameter. Launcher.OpenAsync 메서드는 Xamarin.ios에서 제공 되며 웹 브라우저에서 URL을 엽니다.The Launcher.OpenAsync method is provided by Xamarin.Essentials, and opens the URL in a web browser. 따라서 전체적인 효과는 하이퍼링크가 페이지에서 탭 되 면 웹 브라우저가 나타나고 하이퍼링크와 연결 된 URL을 탐색 하는 것입니다.Therefore, the overall effect is that when the hyperlink is tapped on the page, a web browser appears and the URL associated with the hyperlink is navigated to.

하이퍼링크를 만드는 이전 방법에는 응용 프로그램에서 하이퍼링크를 요구할 때마다 반복적인 코드를 작성 해야 합니다.The previous approach to creating a hyperlink requires writing repetitive code every time you require a hyperlink in your application. 그러나 LabelSpan 클래스를 서브클래싱 하 여 HyperlinkLabelHyperlinkSpan 클래스를 만들 수 있습니다. 여기에는 제스처 인식기와 텍스트 서식 지정 코드가 추가 됩니다.However, both the Label and Span classes can be subclassed to create HyperlinkLabel and HyperlinkSpan classes, with the gesture recognizer and text formatting code added there.

Hyperlink 데모 샘플에서 가져온 다음 코드 예제는 HyperlinkSpan 클래스를 보여 줍니다.The following code example, taken from the Hyperlink Demos sample, shows a HyperlinkSpan class:

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 = Color.Blue;
        GestureRecognizers.Add(new TapGestureRecognizer
        {
            // Launcher.OpenAsync is provided by Xamarin.Essentials.
            Command = new Command(async () => await Launcher.OpenAsync(Url))
        });
    }
}

HyperlinkSpan 클래스는 Url 속성 및 연결 된 BindableProperty을 정의 하 고, 생성자는 하이퍼링크 모양이 나 하이퍼링크를 누를 때 응답 하는 TapGestureRecognizer 를 설정 합니다.The HyperlinkSpan class defines a Url property, and associated BindableProperty, and the constructor sets the hyperlink appearance and the TapGestureRecognizer that will respond when the hyperlink is tapped. HyperlinkSpan 탭 하면 TapGestureRecognizer Launcher.OpenAsync 메서드를 실행 하 여 웹 브라우저에서 Url 속성으로 지정 된 URL을 엽니다.When a HyperlinkSpan is tapped, the TapGestureRecognizer will respond by executing the Launcher.OpenAsync method to open the URL, specified by the Url property, in a web browser.

클래스의 인스턴스를 XAML에 추가 하 여 HyperlinkSpan 클래스를 사용할 수 있습니다.The HyperlinkSpan class can be consumed by adding an instance of the class to the XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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://docs.microsoft.com/appcenter/" />
                    <Span Text=" to view AppCenter documentation." />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>
</ContentPage>

스타일 레이블Styling labels

이전 섹션에 설정 적용 Label 하 고 Span 인스턴스별 기준 속성입니다.The previous sections covered setting Label and Span properties on a per-instance basis. 그러나 속성 집합이 하나 이상의 보기에 일관 되 게 적용 되는 하나의 스타일 그룹화 할 수 있습니다.However, sets of properties can be grouped into one style that is consistently applied to one or many views. 코드의 가독성을 증가 하며 쉽게 디자인 변경 내용을 구현 합니다.This can increase readability of code and make design changes easier to implement. 자세한 내용은 스타일합니다.For more information, see Styles.