アニメーションでスクロールする画像リストの実装

NetAdvantage for .NET 2008 Volume 1 日本語版の新機能

Webページの作成

　WebImageViewerとWebDialogWindowコントロールを使うWebページは、通常のWebプロジェクトではなく、「ASP.NET AJAX-enabled Web site」を使用します。

テンプレートを選ぶ

　Visual Studioで［作成-Webサイト］を選ぶと、「テンプレート」を選ぶダイアログが表示されますので、ここで「ASP.NET AJAX-enabled Web Site」を選びます。

テンプレートはASP.NET AJAX-enabled Web siteを選ぶ

　作成される「Default.aspx」ページには、「ScriptManager」があらかじめ追加されていますので確認します。追加されていなければ、ツールボックスの「AJAX Extensions」タブにアイコンがありますので、ページにドラッグ＆ドロップして配置します。

「ScriptManager」が追加されているのを確認する

WebImageViewerの配置

　次に、適当にWebページをデザインし、WebImageViewerコントロールをページにドラッグ＆ドロップします。

　WebImageViewerがページに配置される前に、「デフォルトのスタイルセットが必要」という趣旨のダイアログが表示されますが、そのまま［OK］ボタンを押します。

「デフォルトのスタイルセットが必要」という趣旨のダイアログが表示される

　これは、WebImageViewerコントロールの作成にスタイルシートを使用するためで、あらかじめデフォルトのCSSファイルが用意されており、それが適用されるようになっています。このダイアログは、その作業を行うための確認のダイアログです。

　［OK］ボタンを押すと、プロジェクトに「ig_res」というフォルダが作成され、「Default」というフォルダに「ig_dialogwindow.css」というスタイルシートのファイルが作成されています（ソリューションエクスプローラの［最新の情報に更新］ボタンを押すとフォルダが表示されます）。と同時に、WebページにWebImageViewerコントロールが配置されます。

WebページにWebImageViewerコントロールが配置され、プロジェクトに「ig_dialogwindow.css」というスタイルシートのファイルが作成される

　WebImageViewerコントロールが配置されたら、「StyleSetName」プロパティの値欄で「Default」を選びます。また、WebImageViewerコントロールは、背景が透明になっていますので、BackColorプロパティで背景色を設定します。

画像の設定

　次に、WebImageViewerコントロールのタスクトレイから［項目の編集］を選びます。「Edit Image Items」ダイアログが開くので、［add item］ボタンを押すと「Image Item」が追加されます。これが、画像を設定するImageItemオブジェクトです。

　画像は、「ImageUrl」プロパティで設定します。参照用のボタンを押して、サブディレクトリ「images」にある画像を1つ選びます。

　WebImageViewerコントロールは、ここで設定した画像をコントロールのサイズに合った形で画像を表示します。

　また、「NavigateUrl」プロパティを使うと、WebImageViewerコントロール上で表示されている画像をクリックしたときに、実サイズで画像を表示することができるようになります。「ImageUrl」プロパティと同じように参照ボタンでサブディレクトリ「images」にある同じ画像を選びます。

「Edit Image Items」ダイアログで「ImageUrl」プロパティと「NavigateUrl」プロパティに画像を設定する

　いずれのプロパティにも、「~/images/sai-0501.jpg」というパス名付きで画像のファイル名が設定されますが、「NavigateUrl」プロパティはこのままだと画像が表示できないというエラーが発生してしまいます。

　そこで、「NavigateUrl」プロパティの値だけ、次のように「~/」を削除します。

修正前

~/images/sai-0501.jpg

修正後

images/sai-0501.jpg

　これで、正常にリンク先にジャンプできるようになります。

WebImageViewerコントロール上で表示されている画像をクリックすると...

実サイズで画像が表示される

　同様の操作で次々とImage Itemを追加し、「ImageUrl」プロパティと「NavigateUrl」プロパティに、参照ボタンを使ってサブディレクトリ「images」にある画像を設定していくと、画像がWebImageViewerコントロールにリスト状に組み込まれていきます。

画像がWebImageViewerコントロールにリスト状に組み込まれていく