Webページの作成
WebImageViewerとWebDialogWindowコントロールを使うWebページは、通常のWebプロジェクトではなく、「ASP.NET AJAX-enabled Web site」を使用します。
テンプレートを選ぶ
Visual Studioで［作成-Webサイト］を選ぶと、「テンプレート」を選ぶダイアログが表示されますので、ここで「ASP.NET AJAX-enabled Web Site」を選びます。
作成される「Default.aspx」ページには、「ScriptManager」があらかじめ追加されていますので確認します。追加されていなければ、ツールボックスの「AJAX Extensions」タブにアイコンがありますので、ページにドラッグ＆ドロップして配置します。
WebImageViewerの配置
次に、適当にWebページをデザインし、WebImageViewerコントロールをページにドラッグ＆ドロップします。
WebImageViewerがページに配置される前に、「デフォルトのスタイルセットが必要」という趣旨のダイアログが表示されますが、そのまま［OK］ボタンを押します。
これは、WebImageViewerコントロールの作成にスタイルシートを使用するためで、あらかじめデフォルトのCSSファイルが用意されており、それが適用されるようになっています。このダイアログは、その作業を行うための確認のダイアログです。
［OK］ボタンを押すと、プロジェクトに「ig_res」というフォルダが作成され、「Default」というフォルダに「ig_dialogwindow.css」というスタイルシートのファイルが作成されています（ソリューションエクスプローラの［最新の情報に更新］ボタンを押すとフォルダが表示されます）。と同時に、WebページにWebImageViewerコントロールが配置されます。
WebImageViewerコントロールが配置されたら、「StyleSetName」プロパティの値欄で「Default」を選びます。また、WebImageViewerコントロールは、背景が透明になっていますので、BackColorプロパティで背景色を設定します。
画像の設定
次に、WebImageViewerコントロールのタスクトレイから［項目の編集］を選びます。「Edit Image Items」ダイアログが開くので、［add item］ボタンを押すと「Image Item」が追加されます。これが、画像を設定するImageItemオブジェクトです。
画像は、「ImageUrl」プロパティで設定します。参照用のボタンを押して、サブディレクトリ「images」にある画像を1つ選びます。
WebImageViewerコントロールは、ここで設定した画像をコントロールのサイズに合った形で画像を表示します。
また、「NavigateUrl」プロパティを使うと、WebImageViewerコントロール上で表示されている画像をクリックしたときに、実サイズで画像を表示することができるようになります。「ImageUrl」プロパティと同じように参照ボタンでサブディレクトリ「images」にある同じ画像を選びます。
いずれのプロパティにも、「~/images/sai-0501.jpg」というパス名付きで画像のファイル名が設定されますが、「NavigateUrl」プロパティはこのままだと画像が表示できないというエラーが発生してしまいます。
そこで、「NavigateUrl」プロパティの値だけ、次のように「~/」を削除します。
~/images/sai-0501.jpg
images/sai-0501.jpg
これで、正常にリンク先にジャンプできるようになります。
同様の操作で次々とImage Itemを追加し、「ImageUrl」プロパティと「NavigateUrl」プロパティに、参照ボタンを使ってサブディレクトリ「images」にある画像を設定していくと、画像がWebImageViewerコントロールにリスト状に組み込まれていきます。
