第6回：プログレスバーの作成に挑戦

2009.06.09

上村陽介（うえむらようすけ）
株式会社ディー・ディー・エフ
取締役兼Webグループ統括

Webプロモーションを得意とし，インタラクティブコンテンツ制作を主軸にDrupal（オープンソースCMS）によるWebアプリ構築，最近は不動産事業など展開。

　今回の挑戦は「プログレスバー」です。JavaScriptベースのSilverlight1では，いろんな方々がサンプルを作っていたり，サンプルが公開されているサイトを参考にできたり，なんとかなったものでした。しかしながらSilverlight2になったとたん，情報が少なすぎるっ！　ググれどもググれども・・・，な毎日でしたが，やっと光明が！

　ふむふむ，最初のSilverlight2独特のローディングアニメ（いわゆるスプラッシュ画面）はC#ではなくJavaScriptでコントロールするのですねっ。つまりSilverlight1と同じってことらしい。メインのXAML以外にローディング用のXAMLを用意しておいて，JavaScriptでローディングを監視。そしてローディングが終了したらローディング用XAMLを見えなくしておいて，メイン画面のXAMLを表示。という流れらしい。

　となれば，Silverlight1でのローディングは習得済みなので，早速サンプルを作ってみようではありませんか（図1）。

図1●サンプルの動作手続きの流れ

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

　Blend2から新しいプロジェクト「loaderTest」を作成。バナーの時と同じようにイメージデータをプロジェクトパネルから「既存のアイテムを追加」を選択して読み込みます。

　今回はローディング状況を把握したいので，大きめサイズのjpg画像（large_size_img.jpg サイズ：780K）を用意。その画像をPage.xamlに配置したら，ローディング専用のXAMLを作ります。イメージデータを取り込む時と同じ右クリックで，今度は「新しいアイテムの追加」を選びます（図2）。すると「新しいアイテム」ウィンドウが表示されるので，名前をloader.xamlとしてOKをクリックします（図3）。