WCF RIAServicesで業務アプリケーションをよりシンプルに

Silverlight 4で作る新しいRIAアプリケーション（3）

コンボボックスの表示

　[図 15]の検索結果では、お小遣い分類テーブルのIDがそのまま表示されていることが分かります。お小遣い分類データソースを追加して、コンボボックスにお小遣い分類の名前を表示するように修正しましょう。

　データグリッドの中のコンボボックスにリストデータをバインドする場合は、次の手順でXAMLを修正してコンボボックスのリストデータをバインドします（リスト3）。

1. お小遣い分類ドメインデータソースをStaticResourceとして定義する。
2. お小遣い分類Idのデータテンプレートを編集し、CellTemplateプロパティとCellEditingTemplateプロパティに1のデータソースを表示するようにコンボボックスを設定する。

リスト3 お小遣い分類コンボボックスの表示

<sdk:DataGrid AutoGenerateColumns="False" 

  ... 略 ...

  <!-- 1.お小遣い分類ドメインデータソースをStaticResourceとして定義する。-->
  <sdk:DataGrid.Resources>
    <riaControls:DomainDataSource
      x:Key="お小遣い分類"
      AutoLoad="True" 
      Name="お小遣い分類DomainDataSource" 
      QueryName="Getお小遣い分類Query">

      <riaControls:DomainDataSource.DomainContext>
        <my:お小遣いContext />
      </riaControls:DomainDataSource.DomainContext>
    </riaControls:DomainDataSource>
  </sdk:DataGrid.Resources>

  ... 略 ...

  <!-- 2.お小遣い分類Idのデータテンプレートを編集し、
         CellTemplateプロパティとCellEditingTemplateプロパティに1のデータソースを表示するようにコンボボックスを設定する。-->
  <sdk:DataGridTemplateColumn Header="お小遣い分類" Width="SizeToHeader" >
    <sdk:DataGridTemplateColumn.CellEditingTemplate>
      <DataTemplate>
        <ComboBox IsSynchronizedWithCurrentItem="False" 
                  ItemsSource="{Binding Source={StaticResource お小遣い分類}, Path=Data}"
                  SelectedValue="{Binding Path=お小遣い分類Id, Mode=TwoWay}" 
                  SelectedValuePath="お小遣い分類Id"
                  DisplayMemberPath="分類名称" />
      </DataTemplate>
    </sdk:DataGridTemplateColumn.CellEditingTemplate>
    <sdk:DataGridTemplateColumn.CellTemplate>
      <DataTemplate>
        <ComboBox IsSynchronizedWithCurrentItem="False" 
                  ItemsSource="{Binding Source={StaticResource お小遣い分類}, Path=Data}"
                  SelectedValue="{Binding Path=お小遣い分類Id, Mode=TwoWay}" 
                  SelectedValuePath="お小遣い分類Id"
                  DisplayMemberPath="分類名称" />
      </DataTemplate>
    </sdk:DataGridTemplateColumn.CellTemplate>
  </sdk:DataGridTemplateColumn>

　実行すると、お小遣い分類がコンボボックスで表示されたことが確認できます（図16）。

図16 ドロップダウンリストの追加

データの更新とキャンセル

　ここまでで、データの一覧表示ができるようになりました。

　データグリッドのデータを直接編集することは可能ですが、このままではサーバ上のデータベースへ値の反映が行われません。データグリッドに行った修正をサーバー側に反映するには、DomainDataSource経由で値の確定かキャンセルを行う必要があります。

　データグリッドの下に保存ボタンとキャンセルボタンを用意します（リスト4）。

リスト4 保存ボタンとキャンセルボタン

<StackPanel Orientation="Horizontal">
  <Button Content="保存" Height="20" Width="60" />
  <Button Content="キャンセル" Height="20" Width="60" />
</StackPanel>

　保存ボタンの設定から行ってみましょう。

　ボタンにお小遣い明細テーブルへの保存機能を持たせるためには、「お小遣い明細DomainDataSourceオブジェクト」のSubmitChangesCommandメソッドをボタンに関連付けます。

　XAMLを直に編集しても良いのですが、ここはVisual Studioのデザイナーから設定してみましょう。Visual Studioのデザイナーでのバインディングは、次の3つの手順で行います（図17）。

1. 対象オブジェクトのプロパティで、データバインドの適用を選択する。
2. バインド元のオブジェクトを選択する。
3. バインド先のプロパティ(パス)を選択する。

図17 Visual Studioを使ったバインディングの手順

　データの保存と、データのキャンセルの実装は完了です。早速実行して、画面からデータを修正し、保存ボタンを押してください。Loadボタンで読み直すと、サーバ側のデータが更新されたことを確認できます。データ編集中は、Loadボタンをクリックすることはできません。また、何も編集していない状態では保存ボタンやキャンセルボタンをクリックすることはできません。

まとめ

　今回は、単純にデータの検索と更新をVisual Studioのデザイナーを利用して作成しました。検証や共有コードといった機能はまだ解説していませんが、WCF RIA Servicesを使って簡単にn階層のアプリケーションを作成できることを確認してもらえたのではないでしょうか。

　次回の後編では、データの検証、サーバ側とのコードの共有、WCF RIA Servicesの仕組みについて触れていきます。

参考

• Microsoft .NET RIA Services の概要 - May 2009 Preview