Xamarin.Forms 문자열 형식 지정Xamarin.Forms String Formatting

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

데이터 바인딩을 사용하여 개체나 값의 문자열 표현을 나타내는 것이 편리한 경우도 있습니다.Sometimes it's convenient to use data bindings to display the string representation of an object or value. 예를 들어, Label을 사용하여 Slider의 현재 값을 표시할 수 있습니다.For example, you might want to use a Label to display the current value of a Slider. 이 데이터 바인딩에서 Slider는 원본이고 대상은 LabelText 속성입니다.In this data binding, the Slider is the source, and the target is the Text property of the Label.

코드로 문자열을 나타낼 때 가장 강력한 도구는 정적 String.Format 메서드입니다.When displaying strings in code, the most powerful tool is the static String.Format method. 문자열 형식 지정에는 다양한 유형의 개체에 대한 형식 지정 코드가 포함되며 형식이 지정되는 값과 함께 다른 텍스트를 포함할 수 있습니다.The formatting string includes formatting codes specific to various types of objects, and you can include other text along with the values being formatted. 문자열 형식 지정에 대한 자세한 내용은 .NET의 형식 지정 유형 문서를 참조하세요.See the Formatting Types in .NET article for more information on string formatting.

StringFormat 속성The StringFormat Property

이 기능은 데이터 바인딩으로 전달됩니다. 하나의 자리 표시자를 사용하여 BindingStringFormat 속성(또는 Binding 태그 확장의 StringFormat 속성)을 표준 .NET 문자열 형식 지정으로 설정합니다.This facility is carried over into data bindings: You set the StringFormat property of Binding (or the StringFormat property of the Binding markup extension) to a standard .NET formatting string with one placeholder:

<Slider x:Name="slider" />
<Label Text="{Binding Source={x:Reference slider},
                      Path=Value,
                      StringFormat='The slider value is {0:F2}'}" />

XAML 파서가 중괄호를 다른 XAML 태그 확장으로 처리하는 것을 방지하기 위해서 형식 지정 문자열을 작은따옴표(아포스트로피) 문자로 구분합니다.Notice that the formatting string is delimited by single-quote (apostrophe) characters to help the XAML parser avoid treating the curly braces as another XAML markup extension. 이렇게 하지 않으면 작은따옴표 문자가 없는 문자열이 String.Format 호출에서 부동 소수점 값을 표시하는 데 사용하는 문자열과 같아집니다.Otherwise, that string without the single-quote character is the same string you'd use to display a floating-point value in a call to String.Format. F2 형식 지정 사양으로 인해 값이 소수점 이하 두 자리로 표시됩니다.A formatting specification of F2 causes the value to be displayed with two decimal places.

StringFormat 속성은 대상 속성이 string 유형이고 바인딩 모드가 OneWay 또는 TwoWay인 경우에만 의미가 있습니다.The StringFormat property only makes sense when the target property is of type string, and the binding mode is OneWay or TwoWay. 양방향 바인딩의 경우 StringFormat은 원본에서 대상으로 전달되는 값에만 적용할 수 있습니다.For two-way bindings, the StringFormat is only applicable for values passing from the source to the target.

바인딩 경로에 대한 다음 문서에서 살펴보겠지만 데이터 바인딩은 매우 복잡하고 난해할 수 있습니다.As you'll see in the next article on the Binding Path, data bindings can become quite complex and convoluted. 이러한 데이터 바인딩을 디버깅할 때 StringFormat과 함께 XAML 파일에 Label을 추가하여 중간 결과를 표시할 수 있습니다.When debugging these data bindings, you can add a Label into the XAML file with a StringFormat to display some intermediate results. 개체 형식을 나타내는 데에만 사용하더라도 도움이 될 수 있습니다.Even if you use it only to display an object's type, that can be helpful.

String Formatting(문자열 형식 지정) 페이지에서는 StringFormat 속성의 여러 용도를 보여줍니다.The String Formatting page illustrates several uses of the StringFormat property:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             x:Class="DataBindingDemos.StringFormattingPage"
             Title="String Formatting">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="HorizontalTextAlignment" Value="Center" />
            </Style>

            <Style TargetType="BoxView">
                <Setter Property="Color" Value="Blue" />
                <Setter Property="HeightRequest" Value="2" />
                <Setter Property="Margin" Value="0, 5" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout Margin="10">
        <Slider x:Name="slider" />
        <Label Text="{Binding Source={x:Reference slider},
                              Path=Value,
                              StringFormat='The slider value is {0:F2}'}" />

        <BoxView />

        <TimePicker x:Name="timePicker" />
        <Label Text="{Binding Source={x:Reference timePicker},
                              Path=Time,
                              StringFormat='The TimeSpan is {0:c}'}" />

        <BoxView />

        <Entry x:Name="entry" />
        <Label Text="{Binding Source={x:Reference entry},
                              Path=Text,
                              StringFormat='The Entry text is &quot;{0}&quot;'}" />

        <BoxView />

        <StackLayout BindingContext="{x:Static sys:DateTime.Now}">
            <Label Text="{Binding}" />
            <Label Text="{Binding Path=Ticks,
                                  StringFormat='{0:N0} ticks since 1/1/1'}" />
            <Label Text="{Binding StringFormat='The {{0:MMMM}} specifier produces {0:MMMM}'}" />
            <Label Text="{Binding StringFormat='The long date is {0:D}'}" />
        </StackLayout>

        <BoxView />

        <StackLayout BindingContext="{x:Static sys:Math.PI}">
            <Label Text="{Binding}" />
            <Label Text="{Binding StringFormat='PI to 4 decimal points = {0:F4}'}" />
            <Label Text="{Binding StringFormat='PI in scientific notation = {0:E7}'}" />
        </StackLayout>
    </StackLayout>
</ContentPage>

SliderTimePicker의 바인딩은 doubleTimeSpan 데이터 형식에 해당하는 형식 사양을 사용하는 방법을 보여줍니다.The bindings on the Slider and TimePicker show the use of format specifications particular to double and TimeSpan data types. Entry 뷰의 텍스트를 표시하는 StringFormat&quot; HTML 엔터티를 사용하여 형식 지정 문자열에 큰따옴표를 지정하는 방법을 보여줍니다.The StringFormat that displays the text from the Entry view demonstrates how to specify double quotation marks in the formatting string with the use of the &quot; HTML entity.

XAML 파일의 다음 섹션은 정적 DateTime.Now 속성을 참조하는 x:Static 태그 확장으로 BindingContext가 설정된 StackLayout입니다.The next section in the XAML file is a StackLayout with a BindingContext set to an x:Static markup extension that references the static DateTime.Now property. 첫 번째 바인딩에는 속성이 없습니다.The first binding has no properties:

<Label Text="{Binding}" />

BindingContextDateTime 값을 기본 형식으로 표시합니다.This simply displays the DateTime value of the BindingContext with default formatting. 두 번째 바인딩은 DateTimeTicks 속성을 표시하지만 다른 두 바인딩은 특정 형식의 DateTime 자체를 표시합니다.The second binding displays the Ticks property of DateTime, while the other two bindings display the DateTime itself with specific formatting. 아래 StringFormat을 확인하세요.Notice this StringFormat:

<Label Text="{Binding StringFormat='The {{0:MMMM}} specifier produces {0:MMMM}'}" />

형식 지정 문자열에 왼쪽 또는 오른쪽 중괄호를 표시해야 하는 경우에는 한 쌍을 사용하면 됩니다.If you need to display left or right curly braces in your formatting string, simply use a pair of them.

마지막 섹션에서는 BindingContextMath.PI 값으로 설정하고 기본 형식과 두 가지 다른 유형의 숫자 형식을 사용하여 표시합니다.The last section sets the BindingContext to the value of Math.PI and displays it with default formatting and two different types of numeric formatting.

실행 중인 프로그램은 다음과 같습니다.Here's the program running:

문자열 형식 지정String Formatting

ViewModels 및 문자열 형식 지정ViewModels and String Formatting

LabelStringFormat을 사용하여 ViewModel의 대상이기도 한 보기의 값을 표시하는 경우에는 뷰에서 Label로 바인딩을 정의하거나 ViewModel에서 Label로 바인딩을 정의할 수 있습니다.When you're using Label and StringFormat to display the value of a view that is also the target of a ViewModel, you can either define the binding from the view to the Label or from the ViewModel to the Label. 일반적으로 두 번째 방법이 가장 좋습니다. View와 ViewModel 사이의 바인딩이 작동하는지 확인하기 때문입니다.In general, the second approach is best because it verifies that the bindings between the View and ViewModel are working.

이 방법은 Better Color Selector(더 나은 색 선택기) 샘플에 나와 있으며 바인딩 모드 문서에 표시된 Simple Color Selector(간단한 색 선택기) 프로그램과 동일한 ViewModel이 사용되었습니다.This approach is shown in the Better Color Selector sample, which uses the same ViewModel as the Simple Color Selector program shown in the Binding Mode article:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataBindingDemos"
             x:Class="DataBindingDemos.BetterColorSelectorPage"
             Title="Better Color Selector">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Slider">
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
            </Style>

            <Style TargetType="Label">
                <Setter Property="HorizontalTextAlignment" Value="Center" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout>
        <StackLayout.BindingContext>
            <local:HslColorViewModel Color="Sienna" />
        </StackLayout.BindingContext>

        <BoxView Color="{Binding Color}"
                 VerticalOptions="FillAndExpand" />

        <StackLayout Margin="10, 0">
            <Label Text="{Binding Name}" />

            <Slider Value="{Binding Hue}" />
            <Label Text="{Binding Hue, StringFormat='Hue = {0:F2}'}" />

            <Slider Value="{Binding Saturation}" />
            <Label Text="{Binding Saturation, StringFormat='Saturation = {0:F2}'}" />

            <Slider Value="{Binding Luminosity}" />
            <Label Text="{Binding Luminosity, StringFormat='Luminosity = {0:F2}'}" />
        </StackLayout>
    </StackLayout>
</ContentPage>    

이제 HslColorViewModel 개체의 동일한 원본 속성에 바인딩된 SliderLabel 요소 쌍이 3개 있습니다.There are now three pairs of Slider and Label elements that are bound to the same source property in the HslColorViewModel object. 유일한 차이는 Label에 각 Slider 값을 표시하는 StringFormat 속성이 있는 것입니다.The only difference is that Label has a StringFormat property to display each Slider value.

더 나은 색 선택기Better Color Selector

RGB(빨강, 녹색, 파랑) 값을 기존의 2자리 16진수 형식으로 표현하는 방법이 궁금할 수도 있습니다.You might be wondering how you could display RGB (red, green, blue) values in traditional two-digit hexadecimal format. 이러한 정수 값은 Color 구조체에서 직접 사용할 수 없습니다.Those integer values aren't directly available from the Color structure. 한 가지 솔루션은 ViewModel에서 색 구성 요소의 정수 값을 계산하여 속성으로 나타내는 것입니다.One solution would be to calculate integer values of the color components within the ViewModel and expose them as properties. 그런 다음, X2 형식 지정 사양을 사용하여 형식을 지정할 수 있습니다.You could then format them using the X2 formatting specification.

다른 방식은 더 일반적입니다. 바인딩 값 변환기 문서 뒷부분의 설명대로 ‘바인딩 값 변환기’를 작성할 수 있습니다.Another approach is more general: You can write a binding value converter as discussed in the later article, Binding Value Converters.

하지만 다음 문서에서는 바인딩 경로에 대해 더 자세히 살펴보고 이것을 사용하여 컬렉션의 하위 속성과 항목을 참조하는 방법을 보여줍니다.The next article, however, explores the Binding Path in more detail, and show how you can use it to reference sub-properties and items in collections.