PR
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キャンバス」を指定してエクスポートしたものです。

図1●「すうどん」と追加できる具のメニュー,会計伝票が表示されている
図1●「すうどん」と追加できる具のメニュー,会計伝票が表示されている
[画像のクリックで拡大表示]
・サンプル・アプリケーションはこちらのURLで動作を確認できます。サンプルを動作させるには,Silverlightをインストールしておく必要があります。
・プログラム・ファイルをこちら(約46MB)からダウンロードできます。
図2●具のメニューから「えび天」を選択し,えび天が追加されているところ。メニューの「えび天」は「売り切れました」に変わり,伝票には「えび天」のデータが追加され,合計金額が表示される
図2●具のメニューから「えび天」を選択し,えび天が追加されているところ。メニューの「えび天」は「売り切れました」に変わり,伝票には「えび天」のデータが追加され,合計金額が表示される
[画像のクリックで拡大表示]
図3●すべての具を「すうどん」の上に追加すると,伝票にはすべての具を追加した場合の合計金額が表示される
図3●すべての具を「すうどん」の上に追加すると,伝票にはすべての具を追加した場合の合計金額が表示される
[画像のクリックで拡大表示]