第5回：非言語検索処理(5)～LINQ to XMLによるXAML検索の実装～

完成アプリケーション。画像をクリックすると，サンプル・アプリケーションの動作を確認できます

　本稿の内容は，Silverlight 2，Silverlight 3に共通です。Silverlight 3開発環境の場合は，第2回目のカコミ記事を参照して，環境を構築してください。ただし，画面キャプチャは，Silverlight 2を基本としています。

　今回のサンプルファイルは，こちらからダウンロードできます。Silverlight 2 アプリケーションは「PantomimeSearch」プロジェクト，Silverlight 3 アプリケーションは「PantomimeSearch_3_Silverlight3」プロジェクトです。連載第3回のプロジェクトに，第4回，第5回と処理を追加しながら完成させていくため，前回と同じプロジェクト名になっています。

　この連載では，リッチ・インターネット・アプリケーションにおける「非言語検索処理」の開発方法について解説しています。前回までで，生成した検索キーを視覚的に表現する処理を実装しました。今回は，LINQ to XMLによるXAMLドキュメントの検索処理を実装していきます。

検索対象サンプルデータの準備

イラストと写真の準備

　本サンプルでは，LINQ to XMLを用いて，2段階の検索処理を実装します。まず，XAMLで記述されたXML文書ファイルを検索して，画像をListBoxコントロール内に表示します。さらに，花の詳細データを記録したXML文書ファイルを検索して，ListBox内から選択された花の詳細データをDataGridコントロール内に表示します（図1）。

　LINQクエリを記述するには，検索対象とするXAMLやXMLの構造を知っておく必要があります。そこで，検索処理を実装する前に，サンプルデータの内容について見ておきましょう。

図1●2種類のXML文書ファイルを対象に，2段階の検索処理を実装する

[画像のクリックで拡大表示]

　今回検索に用いる画像データは，次の2種類です。

　一つは，Expression Designで描いた，ベクトルデータのイラストです。花びらを一筆描きの要領で，1個の要素となるように作図しています。

　もう一つは，デジカメで撮影した，ビットマップデータの写真です。Expression Designのアートボード上に，検索対象とする色で塗りつぶした図形を1個作図し，その上に，写真を貼り付けています。

　どちらも，「XAML Silverlightキャンバス」形式でエクスポートしておきます。イラストは単体のXAMLドキュメント，写真はpngファイルの関連付いたXAMLドキュメントとなります。

　これらXAMLドキュメントのコードの中で検索対象となるのは，最初の<Path>要素の"Fill"属性値のRGB値です（リスト1）。LINQクエリ式ではFirstメソッドを用いて選択します。11個の検索キーの色に合致する色の花があれば，その画像をListBoxコントロール内に表示します。

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="F3A2" Width="80" Height="80" Clip="F1 M 0,0L 80,0L 80,80L 0,80L 0,0">
  <Canvas x:Name="レイヤー_1" Width="80" Height="80" Canvas.Left="0" Canvas.Top="0">
    <Rectangle x:Name="Rectangle" Width="80" Height="80" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" Fill="#FFFFFFFF" />
    <Path x:Name="Path" Width="76.2779" Height="70.0686" Canvas.Left="2.40327" Canvas.Top="4.50976" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FFDDFF00" Fill="#FF0095FF" Data="F1 M 66.7681,46.5379C　～座標値略～　66.7681,46.5379 Z " />
    <Ellipse x:Name="Ellipse" Width="10.5571" Height="10.5571" Canvas.Left="35.7232" Canvas.Top="41.1007" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FFFFE600" Fill="#FFFFFFFF" />
    <Ellipse x:Name="Ellipse_0" Width="7.96427" Height="7.96428" Canvas.Left="37.0197" Canvas.Top="42.3972" Stretch="Fill" Fill="#FFFFE600" />
    <Ellipse x:Name="Ellipse_1" Width="4.77857" Height="4.77857" Canvas.Left="38.6125" Canvas.Top="43.99" Stretch="Fill" Fill="#FFDDFF00" />
  </Canvas>
</Canvas>