Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ウィザードで入力を行うASP.NET アプリケーションの作成

「Wizard for ASP.NET Wijmo」のC1Wizardコントロールを使ったアプリケーションの作成

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/02/15 14:00
目次

プロジェクトの準備とコントロールの配置

 まずは、ASP.NETアプリケーション用プロジェクトを用意します。マスターページを使う場合は、適宜不要な部分を削除するなど編集しておきます。

 ① フォームにC1Wizardコントロールをドラッグ&ドロップします。最初は、ステップが1つもないC1Wizardコントロールなので、ここにステップを追加していきます。C1Wizardコントロールのスマートタグを開き、「デザイナを開く」メニューをクリックします。

スマートタグから「デザイナを開く」メニューをクリック
スマートタグから「デザイナを開く」メニューをクリック

  「C1Wizardデザイナフォーム」が表示されますので、ツールバーの「子要素の追加」ボタンをクリックします。これで、「Step1」というステップが追加されます。

ツールバーの「子要素の追加」ボタンをクリック
ツールバーの「子要素の追加」ボタンをクリック

  ツールバーの「子要素の追加」ボタンを3回クリックし、全部で4つのステップを追加します。

  「Step1」をクリックし、「Title」を「アイテムの選択」に変更し、BackColorプロパティを「#FFFFCC」に設定します。

「Title」を「アイテムの選択」に変更し、BackColorプロパティを「#FFFFCC」に設定
「Title」を「アイテムの選択」に変更し、BackColorプロパティを「#FFFFCC」に設定

  この操作をStep2からStep4まで繰り返し、「Title」のテキストを変更しBackColorプロパティを「#FFFFCC」に設定します。

ステップ Title
Step2 個人情報の保護
Step3 ユーザー情報の入力
Step4 ダウンロードの実行

 ここで、C1WizardデザイナフォームのOKボタンをクリックして閉じます。

 これで、C1Wizardコントロールに4つのステップが追加され、ヘッダーが設定されます。

4つのステップが追加されヘッダーが設定される
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コントロールのデザインが出来上がりです。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5