プロジェクトの準備とコントロールの配置
まずは、ASP.NETアプリケーション用プロジェクトを用意します。マスターページを使う場合は、適宜不要な部分を削除するなど編集しておきます。
① フォームにC1Wizardコントロールをドラッグ＆ドロップします。最初は、ステップが1つもないC1Wizardコントロールなので、ここにステップを追加していきます。C1Wizardコントロールのスマートタグを開き、「デザイナを開く」メニューをクリックします。
② 「C1Wizardデザイナフォーム」が表示されますので、ツールバーの「子要素の追加」ボタンをクリックします。これで、「Step1」というステップが追加されます。
③ ツールバーの「子要素の追加」ボタンを3回クリックし、全部で4つのステップを追加します。
④ 「Step1」をクリックし、「Title」を「アイテムの選択」に変更し、BackColorプロパティを「#FFFFCC」に設定します。
⑤ この操作をStep2からStep4まで繰り返し、「Title」のテキストを変更しBackColorプロパティを「#FFFFCC」に設定します。
| ステップ | Title |
|---|---|
| Step2 | 個人情報の保護 |
| Step3 | ユーザー情報の入力 |
| Step4 | ダウンロードの実行 |
ここで、C1WizardデザイナフォームのOKボタンをクリックして閉じます。
これで、C1Wizardコントロールに4つのステップが追加され、ヘッダーが設定されます。
⑥ C1Wizardコントロールのプロパティウィンドウを使い、C1Wizardコントロールのサイズや動作を次のプロパティで設定します。
| プロパティ | 設定値 |
|---|---|
| AutoPostBack | True |
| NaviButtons | Common |
| Height | 400 |
| Theme | Cobalt |
| Width | 540 |
ナビゲーションバーは、「前へ」「次へ」のボタンタイプに変更します。テーマは「Common」を使用し、C1Wizardコントロール全体をコンパクトにします。
⑦ ステップヘッダーがかなり大きいので、フォントを少し小さくします。プロパティウィンドウで「StepHeaderTemplate」プロパティの値欄をクリックし、「<h1>#{title}」を「<h3>#{title}」に変更します。
<h1>#{title}</h1>#{desc} ⇒ <h3>#{title}</h3>#{desc}
これで、ステップヘッダーのサイズが小さくなります。
以上で、メインページとC1Wizardコントロールのデザインが出来上がりです。
