PROJECT KySS（プロジェクト・キッス）
四国のSOHO。薬師寺 国安と，薬師寺 聖によるコラボレーション・ユニット。XMLや.NETプログラミングに関する執筆多数。両名とも，Microsoft MVP for Development Platforms - XML(Oct 2003-Sep 2009)，http://www.PROJECTKySS.NET
今回は，DataGridコントロールの任意の列に画像を表示させるサンプルを作ってみましょう。既存のビットマップ画像の中にはベクトル化が難しかったり，手間なものもありますが，それらもベクトル・ベースのXAMLとして同じ画面上で扱うことができます。
図1ではDataGridの「画像」列に「うどん」のPNG画像が表示されています。「画像」と「価格」以外のヘッダをダブルクリックするとヘッダに▼や▲マークが表示され，昇順や降順ソートが可能になります(図2)。ただし，「価格」には三桁区切りで値が表示されているため，文字列として処理され，うまくソートができないのでソートを無効としています。
図1●DataGridの「画像」列にPNG画像が表示されている
[画像のクリックで拡大表示]
・サンプル・アプリケーションはこちらのURLで動作を確認できます。サンプルを動作させるには，Silverlightをインストールしておく必要があります。
・プログラム・ファイルをこちらからダウンロードできます。
・プログラム・ファイルをこちらからダウンロードできます。
図2●「品番」が降順でソートされている
[画像のクリックで拡大表示]
ヘッダの「画像」列の右の区切り線をドラッグして「画像」の列幅を縮小すると，自動的に画像が縮小されます(図3)。逆に「画像」の列幅を拡大すると自動的に画像も拡大します。これはDataGridコントロールがデフォルトで持っている機能です。
図3●「画像」の列幅を縮小すると自動的に画像が縮小されている
[画像のクリックで拡大表示]
