2017. 5.11.
石立 喬

Visual Studio Community 2017の使い方(4)

―― CheckBox、RadioButton、ToggleSwitchを使用して簡単な計算を行う ――

 コントロール部品のCheckBox、RadioButton、ToggleSwitchを使って簡単な計算を行う例を示す。具体的には、3個のCheckBoxで購入する商品を選び、RadioButtonで、排他的に特売日であるかどうかを選択し、最後にToggleSwitchでレジ袋持参の有無を入力して、必要金額を算出する。コントロールの使い方の紹介が主目的なので、計算内容は簡単なものになっている。これは、「Visual Studio Community 2015の使い方(4)」のUWP版である。

新しく使用したコントロール部品
◎CheckBox
 正方形の小さい箱で、デフォルトではuncheckedとcheckedの二状態のみで、マウスでクリックする度に、チェック状態と非チェック状態を繰り返す。「プロパティ」ウィンドウで、IsThreeStateにチェックを付けると、unchecked、checked、indeterminateの3種類になる。初期状態の設定はIsCheckedプロパティに、{x:Null}、False、Trueのいずれかを入れることにより行う。
 CheckBoxが選択されているか否かは、そのIsCheckedプロパティで調べることができるが、
  if(checkBox1->IsChecked == true)
とすると、「int形からPlatform::IBox<bool>^型への変換ができません」と言われてしまう。
 Platform::IBox<bool>は、C++/CXで用いるnullable bool(nullを含むbool型)の入れ物で、取り出すには、そのValueプロパティ(false、true、nullの三種類)を使用する。したがって、
  if(checkBox1->IsChecked->Value == true)
を使用するとうまく行く。
 C#では、if(checkBox1.IsChecked == true) が、全く問題なくビルドでき実行できる。これは、C#には、nullable boolとしてbool?型が用意されていて、これを使用しているためである。
◎RadioButton
 丸いボタンで、複数のボタンの間で、排他的に選択できる。これもデフォルトでは二状態のみであるが、三状態でも使用できる。チェック状態をしらべるには、やはり、radioButton1->IsChecked->Valueを使用する。
 WindowsフォームにあったGroupBoxが無くなったので、グループ化には、後述のStackPanelを使用する。
◎ToggleSwitch
 マウスでクリックすると、丸が移動してスイッチの状態を示す、より視覚的な二状態のスイッチである。toggleSwich1->IsOnは、単純なbool値を返すので、
  if(togglr1->IsOn == true)
が使える。
◎StackPanel
 レイアウト用のパネルの一種で、Grid、Canvasの類である。各種コントロール部品を垂直または水平方向に一列に並べる(積み重ねる、stack)のに使用する。デフォルトは垂直方向で、Orientation = "Vertical"になっている。Orientation = "Horizontal"とすると、部品を水平方向に並べることができる。WindowsフォームにあったGroupBoxが無いので、その代わりに使用することも多いが、枠に文字列を入れることはできない。
 主なプロパティには、
   BorderBrush ------ 周辺を囲む枠の線の色
   BorderThickness --- 周辺を囲む枠の線の幅(デフォルトは0、すなわち枠がない)
   CornerRadius ------ 枠の角に丸みを帯びさせる径のピクセル値(デフォルトは0、丸みがない)
   Padding ----------- 枠の内側の余白
   Background ------- 枠の内部の色
があり、内部の部品の配置は、XAMLコードでの記述の順に、詰めて並べられるので、個々の内部部品のMargin設定は必要ない。

XAMLによるコントロール部品の設定
 新たに使用した部品(CheckBox、RadioButton、ToggleSwitch、StackPanelのXAMLコードの一例を下記に示す。StackPanelの内部に配置する場合は、上から順に詰めて(OrientationがVerticalの場合)、または左から順に詰めて(OrientationがHorizontalの場合)配置されるので、HorizontalAlignment、Margin、VerticalAlignmentのプロパティは使用しない(必要ない)。
◎CheckBox
 マウスで選択・非選択を入力できるコントロールで、二種の選択がデフォルトとなっているが、IsThreeState="true"で三種類になる。
   <CheckBox x:Name="checkBox1" -------- プログラムで読み取るために名前を付けておく
           Content="牛乳(180円)" ------ チェックを付ける項目名
           HorizontalAlignment="Left" ---- デフォルト
           Margin="50, 80, 0,0”
           VerticalAlignment="Top" ------ デフォルト
   />
◎RadioButton
 マウスで選択・非選択を入力できるのはCheckBoxと同様であるが、最も内側のコンテナー内で排他的となる。これも、三種類にできる。
   <RadioButton x:Name="radioButton1" ------- プログラムで読み取るために名前を付けておく
            Content="通常価格" --------- チェックを付ける項目名
            HorizontalAlignment="Left" ---- デフォルト
            Margin="220, 80, 0, 0"
            VerticalAlignment="Top"------- デフォルト
            IsChecked="true" ----------- あらかじめチェックを付けておく、デフォルトはfalse
   />
◎ToggleSwitch
 マウスで選択・非選択を入力できるのはCheckBoxと同様であるが、より視覚的である。これは三種類にできない。TextBlockを用いなくても、Headerでスイッチ名を表示でき、オン・オフに応じて表示文字列を変えることができて分かり易い。
   <ToggleSwitch x:Name="toggle1" -------------- プログラムで読み取るために名前を付けておく
             Header="レジ袋を辞退(-2円)"---- スイッチの項目名
             HorizontalAlignment="Left" ------ デフォルト
             Margin="380, 86, 0, 0"
             VerticalAlignment="Top"--------- デフォルト
             OffContent="しない" ----------- オフの時に表示される文字列
             OnContent="する" ------------- オンの時に表示される文字列
   />
◎StackPanel
 コンテナーの一つで、GroupBoxの代わりなどに使用する。内蔵させる部品の配置の設定が楽である。
   <StackPanel HorizontalAlignment="Left" -- デフォルト
          Height="150"
          Margin="40, 40, 0, 0"
          VerticalAlignment="Top" ------ デフォルト
          Width="180"
          BorderBrush="Black" -------- 枠の色(BorderThicknessが1以上で有効)
          BorderThickness="1" -------- 枠の幅
          Padding="12" -------------- 枠の内側の余白の長さ
          CornerRadius="10" ---------- 枠の四隅に丸みを付けるときの半径
          Background="Wheat" -------- 枠の内部を特定の色で塗りつぶす
    />

StackPanelを使用しない場合の応用例
 プログラム実行時の画面が図3に示されているので、「デザイン」画面は省略して、「XAML」エディタの内容を図1に示す。StackPanelを使っていないので、コントロールすべての位置をMarginで指定する必要がある。縦横の位置関係を揃えるために、座標値の設定に注意した。
 図2はプログラムの部分で、Buttonをクリックした場合のイベントハンドラーのみを作成する。内容的には、特に説明の必要はないと思われる。


図1 StackPanelを使用しない場合のXAMLコード



図2 「金額」ボタンをクリックした時のイベントハンドラー


StackPanelを使用しない場合の得られた結果
 得られた結果の一例を図3に示す。StackPanelを使っていないので、枠でグループ化するなどの視覚的効果はない。


図3 StackPanelを使用しない場合の結果


StackPanelを使用した場合の応用例
 GroupBoxが無くなったので、その代わりにStackPanelを使用してグループ化を行った。StackPanelには、枠づけや着色ができるので、視覚的にも分かり易い画面を得ることができる。
 図4は使用したXAMLコードで、
     TextBlock 一個と CheckBox 三個 ------ 垂直に並べ、枠で囲み着色する
     TextBlock 一個と RadioButton 二個 ---- 垂直に並べ、枠で囲み着色する
     Button 一個と TextBox 一個 ---------- 水平に並べ、枠なし
をそれぞれのStackPanelに入れた。
 C++/CXのコードには全く変更がなく、図2のものをそのまま使用した。
 得られた結果を図5に示す。


図4 StackPanelを使用した場合のXAMLコード



図5 StackPanelを使用した場合の結果










「Visual C++の勉強部屋」(目次)