Silverlightで実装するデータの取得、表示の処理

Silverlightで行うデータ処理アプリケーション開発の第一歩 第3回

表示データのフォーマット

　前述したサンプルシステムの実行結果においては、価格情報が30000.0000のように表示されています。このシステムに限らず、価格情報は￥30,000のように表示したいはずです。

　また、商品の情報には本来画像が表示されるのですが、現時点では何も出ていません。これは、サンプルシステムでは画像データのアドレス自体をデータベースの中で管理しており、このアドレスは相対パスとなっているためです。これもまた、システムを配置する環境が特定できないためによくある手法です。

　この仕組みを実現するために、データフォーマット（データコンバート）を実装してみましょう。実は次回に掲載する予定のデータバインドに属する内容なのですが、この部分のみ先にお伝えしておきます。今回は金額データの部分を例に紹介します。

　これには、IValueConverterインターフェイスを継承したクラスをデータフォーマッタとして用意するとXaml上での定義が可能となるため、今回はこの手法で実装します。

　SilverlightアプリケーションであるMSStoreSample.Clientプロジェクト上に、データフォーマッタクラスを実装します。今回はFormattingConverter.csという名前で新たにクラスを追加して以下を記述します。

リスト FormattingConverter.cs

using System;
using System.Globalization;
using System.Windows.Data;
using System.ComponentModel;

namespace MSStoreSample.Client.Data
{
    public class FormattingConverter : IValueConverter
    {
        public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
        {
            string format = parameter as string;
            if(value != null && format != null)
            {
                                return string.Format(format, value);
            }
            return value == null ? string.Empty : value.ToString();
        }

        public object ConvertBack(object value, Type targetType,
object parameter, CultureInfo culture)
        {
            return value;
        }
    }
}

　IValueConverterインターフェイスには、ConvertとConvertBackというメンバーが存在します。Convertメソッドは、データソースからターゲット（コントロール）に対してデータのコンバートを行います。ConvertBackはその逆です。

　今回は、データベースにある金額データをコントロールで表示する際の見た目を変更するために、Convertメソッドの実装を行っています。

　Convertメソッドの引数であるvalueには、データソースからの値、parameterには、xaml上で指定する書式の文字列がセットされます。xaml上の指定は以下です。

リスト xaml上でのコンバーターの使用（Home.xaml）

<TextBlock Text="{Binding Price,
                        Converter={StaticResource FormattingConverter}, ConverterParameter=\{0:C\}}"
                        Grid.Column="1"
                        FontWeight="Bold"/>

　この例では、事前にFormattingConverterをリソースとして設定しており、それをConverterプロパティにセットしています。

　また、ConverterParameterが書式を決定する文字列です。{0:C}となっているため、Currencyとしてコンバートされます。

　今回の記事では書ききれていませんが、同様に画像データに関しても、相対アドレスの補完ロジックをコンバーターに実装しています。

　この詳細な手順は、上記のサンプルシステムサイトにある、「4. データのフォーマット（コンバーターの使用）」をご確認ください（この説明用のソースコードのダウンロードも可能です）。

実行結果

　データフォーマットに関してはSilverlight 4でWPFと同等の機能である、バインディングプロパティStringFormatが追加されています。これを用いると下記のように非常に簡単な実装が可能になります。

リスト Silverlight4におけるデータフォーマット

<TextBlock Text="{Binding Price, StringFormat= ' {0:C}'}"
                        Grid.Column="1" 
                        FontWeight="Bold"/>