第6回（最終回）　視覚的にわかりやすい注文画面を作る

2009.03.13

PROJECT KySS（プロジェクト・キッス）

四国のSOHO。薬師寺国安と，薬師寺聖によるコラボレーション・ユニット。XMLや.NETプログラミングに関する執筆多数。両名とも，Microsoft MVP for Development Platforms - XML(Oct 2003-Sep 2009)，http://www.PROJECTKySS.NET

　これまでの5回で，Silverlight2アプリケーションでの基本的なデータ処理とアニメーション作成操作は見てきました。最終回である今回は，それらを組み合わせて，視覚的にわかりやすい注文画面を作ってみましょう。

　図1のように，画面上には葱だけ乗った「すうどん」があり，トッピングとして追加できる5種類の具がメニューとして表示されています。任意の具を選択すると，「すうどん」の上に，選択した具が追加されていきます（図2）。具を追加する動きは，Blend2によるアニメーションで表現しています。

　同時に，会計伝票には，選択した具の料金が加算され，合計金額が表示されます（図3）。一度選択した具は「売り切れました」となり，再度選択することはできません。「リセット」メニューを選択すると，「すうどん」の上に乗っていた具は消え，再び選択することが可能となります。

　なお，今回のサンプルで使っている画像はすべて，Expression Design2で描き，「XAML Silverlightキャンバス」を指定してエクスポートしたものです。