Windowsストアアプリの画面構成部品、コントロール

速習 Windowsストアアプリケーション 第3回

フォーム系コントロール

　フォーム系コントロールは、チェックボックスやラジオボタンといったデータ入力に用いるコントロールを集めました。

　文字通りフォームで利用されるコントロール達です。

　Windowsストアアプリケーションでは、タッチでの操作を想定するため、入力フォームの出番も減りがちですが、設定コントラクトなどでアプリケーションの設定する場合などに利用します。

　項目を複数可能なチェックボックス、1つを選択するラジオボタン、パスワードを入力する際に入力された文字を伏せて表示するパスワードボックスなどが含まれます。

CheckBox

　チェックボックス（CheckBox）は、以下の画像のように四角にチェックを入れることで、項目を選択したことを表すコントロールです。

チェックボックスの表示

CheckBoxのコード

<TextBlock HorizontalAlignment="Left" Margin="55,10,0,0" TextWrapping="Wrap" Text="今日のごはんで食べたいのは？" VerticalAlignment="Top" FontFamily="Global User Interface" FontSize="17"/>
<CheckBox Content="刺身" HorizontalAlignment="Left" Margin="55,40,0,0" VerticalAlignment="Top" Width="132"/>
<CheckBox Content="ハンバーグ" HorizontalAlignment="Left" Margin="205,40,0,0" VerticalAlignment="Top" Width="132"/>
<CheckBox Content="シチュー" HorizontalAlignment="Left" Margin="378,40,0,0" VerticalAlignment="Top" Width="132"/>

ComboBox

　コンボボックス（ComboBox）を利用すると、複数の項目から1つを選択させることができます。

　機能はラジオボタンに似ていますが、選択肢はクリックすることで展開されて表示されます。項目が多い場合でも場所をとりません。

コンボボックスの表示

クリックで展開される

ComboBoxのコード

<ComboBox HorizontalAlignment="Left" Margin="55,117,0,0" VerticalAlignment="Top" Width="120">
    <x:String>刺身</x:String>
    <x:String>ハンバーグ</x:String>
    <x:String>シチュー</x:String>
</ComboBox>

PasswordBox

　パスワードボックス（PasswordBox）は、入力された文字列を伏字で表示するコントロールです。文字通りパスワードの入力などに利用します。

パスワードボックスの表示

PasswordBoxのコード

<PasswordBox HorizontalAlignment="Left" Margin="55,196,0,0" VerticalAlignment="Top" Width="237"/>

RadioButton

　ラジオボタン（RadioButton）は、複数の選択肢から1つを選択させるコントロールです。

　四角い枠がチェックボックス、丸い枠がラジオボタンというのは、Webサイトとも共通の視覚情報です。

ラジオボタンの表示

RadioButtonのコード

<RadioButton Content="刺身" HorizontalAlignment="Left" Margin="55,256,0,0" VerticalAlignment="Top" GroupName="lunch"/>
<RadioButton Content="ハンバーグ" HorizontalAlignment="Left" Margin="191,256,0,0" VerticalAlignment="Top" GroupName="lunch"/>
<RadioButton Content="シチュー" HorizontalAlignment="Left" Margin="352,256,0,0" VerticalAlignment="Top" GroupName="lunch"/>

Slider

　スライダーコントロール（Slider）は、バーをドラッグすることで値を変更できるコントロールです。

　数値の入力で最大値と最小値が決まっている場合は、テキストボックスに入力させるのではなく、スライダーで選択させるほうが親切かもしれません。

スライダーの表示

Sliderのコード

<Slider HorizontalAlignment="Left" Margin="55,321,0,0" VerticalAlignment="Top" Width="312"/>

ToggleButton

　トグルボタン（ToggleButton）は、2つの状態を持ったボタンです。2つの状態はオン/オフなどに使われることが多く、チェックボックスや後述するトグルスイッチと似ています。

　これまでプラットフォームによっては、オン/オフをボタンで表現するために選択状態のあるチェックボックスをカスタマイズすることもありましたが、WindowsストアアプリケーションではToggleButtonが利用できます。

トグルボタンの状態1

トグルボタンの状態2

ToggleButtonのコード

<ToggleButton Content="ToggleButton" HorizontalAlignment="Left" Margin="55,407,0,0" VerticalAlignment="Top"/>

ToggleSwitch

　トグルスイッチ（ToggleSwitch）も、トグルボタンと同様に2つの状態を持ったコントロールです。こちらも同じくオン/オフなどの切り替えに利用されることが多いです。

トグルスイッチの状態（オフ）

トグルスイッチの状態（オン）

ToggleSwitchのコード

<ToggleSwitch Header="ToggleSwitch" HorizontalAlignment="Left" Margin="69,490,0,0" VerticalAlignment="Top"/>