PR
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画像が表示されている
図1●DataGridの「画像」列にPNG画像が表示されている
[画像のクリックで拡大表示]
・サンプル・アプリケーションはこちらのURLで動作を確認できます。サンプルを動作させるには,Silverlightをインストールしておく必要があります。
・プログラム・ファイルをこちらからダウンロードできます。
図2●「品番」が降順でソートされている
図2●「品番」が降順でソートされている
[画像のクリックで拡大表示]

 ヘッダの「画像」列の右の区切り線をドラッグして「画像」の列幅を縮小すると,自動的に画像が縮小されます(図3)。逆に「画像」の列幅を拡大すると自動的に画像も拡大します。これはDataGridコントロールがデフォルトで持っている機能です。

図3●「画像」の列幅を縮小すると自動的に画像が縮小されている
図3●「画像」の列幅を縮小すると自動的に画像が縮小されている
[画像のクリックで拡大表示]

この記事は会員登録で続きをご覧いただけます

日経クロステック登録会員になると…

新着が分かるメールマガジンが届く
キーワード登録、連載フォローが便利

さらに、有料会員に申し込むとすべての記事が読み放題に!
日経電子版セット今なら2カ月無料