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 書式設定文字列と 1 つのプレースホルダーを設定します。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 の形式の指定は、小数点以下が 2 桁で表示される値になります。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. これらのデータ バインディングをデバッグするときに、LabelStringFormat とともに XAML ファイルに追加して、中間結果を表示できます。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 ファイルの次のセクションは、BindingContext を静的な DateTime.Now プロパティを参照する x:Static マークアップ拡張に設定した 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. 2 つ目のバインディングでは DateTimeTicks プロパティが表示されますが、他の 2 つのバインディングでは特定の書式設定で 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.

最後のセクションでは、Math.PI の値に BindingContext を設定し、既定の書式設定と 2 つの異なる数値型の書式設定で表示します。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 FormattingString Formatting

ViewModels と String FormattingViewModels 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. 一般に、2 番目の手法は、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 オブジェクトの同じソース プロパティにバインドされている Slider 要素と Label 要素の 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 SelectorBetter 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. 1 つのソリューションとして、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.

もう 1 つの手法はより一般的です。後の記事の値コンバーターのバインディングに関する記事で示されているように、値コンバーターのバインディングを記述することができます。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.