Windowsストアアプリの画面を作ってみよう

作って学ぶ！ 新人研修／Windowsストアアプリで電子カタログを作ろう（3）

ボタンやリストを表示しよう

　Windowsストアアプリでは、ユーザからの入力を受け付けるために、ボタンやリストボックスなどさまざまな画面部品を使うことができます。この画面部品を「コントロール」と呼びます。すべての情報をテキストでキーボードから入力しても構いませんが、できる限りユーザが入力しやすいコントロールを使用することが、操作性の高いアプリを作るポイントになります。では、ホテルの宿泊料金を計算するためのコントロールを、default.htmlに配置する手順を説明します。

旅行先を入力する（リストボックス）

　ユーザに、旅行先を選択するためのリストボックスを配置します。まずは、旅行先にヨーロッパとビーチリゾートの2か所を設定します。旅行先はこの2か所以外にも増える可能性がありますので、利用するコントロールはリストボックスを使用します。リストボックスは、選択項目を一覧の中から選ぶことができます。リストボックスのid属性を”area”にします。

リスト5 リストボックス（default.htmlの抜粋）

Step1:旅行先を選んでください：
<select id="area" >
    <option>ヨーロッパ</option>
    <option>ビーチリゾート</option>
</select>
<hr>

　このプログラムを、default.htmlのmain-right要素の中に記述して、アプリケーションを実行すると、次のようなリストボックスが表示されます。

旅行先選択の表示

ホテルのグレードを入力する（ラジオボタン）

　次に、ホテルのグレードを選択するためのラジオボタンを配置します。ホテルのグレードは、スタンダードホテルとハイグレードホテルの2つを設定します。ラジオボタンは、選択項目を1つだけ選ぶことができます。ラジオボタンを使用するときは、<input>要素をグループ化して使用します。グループ化するためには、name属性に同じ値（サンプルの例では”hotel”）を指定します。デフォルトでスタンダードホテルを選択した状態にするため、HTMLの<input>要素に、checked属性を設定します。また、ホテルの1泊の料金をvalue属性に設定します。サンプルの例では、スタンダードホテルは1泊1万円でハイグレードホテルは3万円に設定しています。

リスト6 ラジオボタン（default.htmlの抜粋）

Step2:ホテルを選んでください：
<br>
<input type="radio" name="hotel" value="10000" checked /><label>スタンダードホテル</label>   
<input type="radio" name="hotel" value="30000" /><label>ハイグレードホテル</label>   
<hr>

　このプログラムを、default.htmlのmain-right要素の中に記述して、アプリケーションを実行すると、次のようなラジオボタンが表示されます。

ホテルのグレード選択の表示