2017. 4.20.
石立 喬

Visual Studio Community 2017の使い方(2)

――― TextBoxへ入力して演算結果をTextBlockへ表示する―――

 ここでは、本格的なUWPプログラムとは言えないが、UWPでの数値計算の基礎となるコントロール部品のTextBox、TextBlock、ComboBox、Buttonを使用する方法を紹介する。

作成するプログラム
 TextBox、TextBlock、ComboBox、Buttonを使って、四則演算を行なうプログラムを作成する。具体的には、TextBoxを二個設けて数値aとbを入力させ、ComboBoxから加減乗除(+、-、*、/)の内の一つを選択し、「実行」ButtonをクリックするとTextBlockに結果を表示するものである。
 「Visual C++ 2010 Expressの易しい使い方(3)」で説明したWindowsフォームアプリケーションのUWP版と言える。Windowsフォームでは、TextBlockがなく、類似の機能のLabelがあった。

プロジェクトの新規作成と「デザイン」画面の表示
1)「スタート ページ」ウィンドウで、「新しいプロジェクト」欄の最下部の「新しいプロジェクトの作成」をクリックする。
2)「新しいプロジェクト」ウィンドウで、左欄から「Visual C++」→「Windowsユニバーサル」、右欄から「空白のアプリ(ユニバーサルWindows) Visual C++」を選び、「名前」をデフォルトの「App1」のままとし、その他もデフォルトのままで、「OK」をクリックする。
3)「新しいユニバーサルWindowsプロジェクト」ウィンドウが開くので、「ターゲットバージョン」、「最小バージョン」欄をそのままにして、「OK」をクリックする。
3)「コードエディタ」ウインドウが開き、「App.xaml.cpp」ができている。
4)右側の「ソリューションエクスプローラー」で、「MainPage.xaml」をダブルクリックして、「MainPage.xaml」を表示させる。上半分の「デザイン」画面の 左上の欄で、「13.3"Desktop」を選び、左下の欄で「100%」を選んだ(一般的に推奨)結果を図1に示す。


図1 コントローラー部品を配置する「デザイン」画面を設定する


部品の配置と設定
メニューで、「表示」→「ツールボックス」を選択し、「ツールボックス」ウィンドウを開く。
 部品の配置は、「ツールボックス」から持ってきて、「デザイン」画面上の適当な場所にとりあえず乗せておくと良い。後で、全体の配置を考えながら、「XAML」エディタ上で細かく精度よく設定できる。
 位置合わせには垂直または水平の直線(スナップ線)が現れるので、それを参考にする。

◎TextBox
 「ツールボックス」から「TextBox」をクリックして選択し、「デザイン」画面上の大体の希望する場所で再びクリックする(または、ドラッグ・ドロップする)。これを2回行い、TextBoxを二個作る。
 プログラム作成に必要な名称は、それぞれ「textBox1」、「textBox2」とし、PlaceholderText(入力する場所を確保するもの、入力をガイドするものの文字)として、それぞれ、「Aの入力」、「Bの入力」を入れておく。図2は、一番目のTextBoxのための「プロパティ」ウィンドウを示す。


図2 一番目のTextBoxの名前を「textBox1」とし、PlaceholderTextに「Aを入力」と入れる


◎TextBlock
 これは、文字を表示することはできるが、そこへキーボード等から文字列を入力することができないRead-Onlyの入れ物である。WinodowsフォームのLabelに相当する。これも二個作成し、最初のTextBlockは、プログラムで書き込まないので、名前を付ける必要がなく、「Text」欄には「=」(等号)を入れておく。第二のTextBlockは、結果を表示させするので、名前を「textBlock1」とし、「Text」欄は空白にする。
 図3は、第二のTextBlockの設定後の「プロパティ」ウィンドウである。


図3 文字列出力用の第二のTextBoxの名前を「textBox1」とし、Textは空欄にしておく


◎ComboBox
 「ツールボックス」から「ComboBox」をクリックして選択し、前述の二つのTextBoxの間に、一個配置する。「プロパティ」ウィンドウで名前を「comboBox1」とする。 また、「共通」→「SelectedIndex」に「0」を入力して、デフォルトで0番目の項目(item)が表示されるようにする。ここまでの設定をした「プロパティ」ウィンドウを図4に示す。


図4 ComboBoxの「プロパティ」ウィンドウで、名前を「comboBox1」、SelectedIndexを「0」に設定する


 次に、「プロパティ」ウィンドウの「共通」欄の「Items」を選択し、右側の四角いアイコン(図4を参照)をクリックすると、図5に示す「Objectコレクションエディター::Items」が現れるので、下部のボックスから「ComboBoxItem」を選択し、順次、右側の「プロパティ」欄の「共通」→「Content」に、「記号」、「+」、「-」、「*」、「/」を入力する。「OK」をクリックするとウィンドウだ閉じるので、「プロパティ」ウィンドウに戻って、繰り返す必要がある。図5は、5個の項目のContentを入れ終わったのちに、左側の「項目」欄で0番目の項目を選択して、右側の「Content」欄に「記号」と入力されていることを確認したところである。


図5 5個のアイテムを登録し、0番目の「Content」が「記号」になっていることを確認したところ


 このようにして得られたComboBoxを「XAML」エディタで見てみると、
  <ComboBox x:Name="comboBox1"
          HorizontalAlignment="Left"
          Margin="190, 80, 0, 0"
          VerticalAlignment="Top"
          Width="120"
          IsSynchronizedWithCurrentItem=”False”
          SelectedIndex="0">
    <ComboBoxItem Content="記号"/>
    <ComboBoxItem Content=" +"/>
    <ComboBoxItem Content=" -"/>
    <ComboBoxItem Content=" *"/>
    <ComboBoxItem Content=" /"/>
  </ComboBox>
 となっている。XAMLの知識があれば、XAMLコードに直接書き込む方が速いし、間違いがない。「Object コレクションエディタ」で作成した内容を後から編集できる。

◎Button
 「ツールボックス」から「Button」をクリックして選択し、「デザイン」画面上の希望する場所で再びクリックする。
 名称は、「buttonExecute」、Content(Button上に書かれる文字)を「実行」とする。「プロパティ」ウィンドウの右上の「イベント」(稲妻マーク)ボタンをクリックし、「Click」をダブルクリックすると、イベントハンドラー「buttonExecute_Click」ができる。
 以上の結果を図6に示す。


図6 左は「プロパティ」(レンチマーク)ボタン、右は「イベント」(稲妻マーク)ボタンが押された状態


XAMLで記述されたコントロール
 以上の設定を行うと、「デザイン」画面と「XAML」エディタへのコントロール部品の配置が完成する。図7は、「デザイン」画面上で二個目のTextBlockを選択した(文字列が書き込まれていないので、幅が0)状態で、「XAML」エディタの二番目のTextBlockが着色されている。


図7 「デザイン」の画面、textBox1が選択されている



 図8 「ツールボックス」を使用し、後にエディタ上で手直ししたXAMLの記述(一部)


プログラム作成に当たって必要な予備知識
◎Platform::String^とwstringの相互変換
 UWPでユーザーインターフェイスに使用する文字列は、C++/CXではPlatform::String^型であり、Unicode文字の集合である。一方、標準のC++で対応するのはwstring(ワイド文字列)であるので、TextBoxでの文字列のやり取りは、
    Platform::String^ ←→wstring
の変換が必要になる。
 TextBox入力を読み取るには(Platformをnamespaceとして)
    String^ string1= textBox1->Text;
    wstring wstring1(string1->Data());
 TextBoxに表示するには、
    String^ string2 = ref new String(wstring2.c_str());
    textBox1->Text = string1;
などを用いる。
◎文字列と数値との相互変換
 wstring文字列から数値への変換には、
    a = stoi(wstring1); ------ intへの変換
    a = stof(wstring1); ------ floatへの変換
    a = stod(wstring1); ------ doubleへの変換
を使用するか、<sstrieam>をインクルードして、wstringstreamを使用する(詳細は図13を参照)。
 数値からString^文字列への変換には、
    textBox1->Text=a.ToString();
を使用する。aがfloat型の場合には、小数点を含めて最大7桁の文字列で表示される。aがdouble型の場合は、同様に最大15桁で表示される筈であるが、実際には、7桁までしか表示されなかった。調べた結果、ToString()が原因ではなく、現在のところ原因不明である。

「実行」ボタンをクリックした時に作動するプログラムの作成
 MainPage.xaml.cppにできているbuttonExecute_Clickイベントハンドラのスケルトンに、下記を記述する。


図9 「実行」ボタン(button1)がクリックされた時に実行するプログラム


プログラムのビルドと実行
 メニューの「ローカルコンピューター」をクリックすると、「このプロジェクトは変更されています ビルドしますか」のウィンドウが現れるので、「はい」をクリックする。しばらくして、スプラッシュスクリーン(splash screen、アプリの起動中に現れる画像)ののちに、実行結果が画面に表示される。
 図10〜12は、その結果である。ゼロ割りをするとどうなるかが心配であったが、「INF」、「-INF」、「-NAN(IND)」(0/0の場合)などとそれぞれ表示され、エラーにはならなかった。


図10 プログラムを起動した直後の画面



図11 ComboBoxで「/」(除算)を選び、「実行」ボタンをクリックした結果



図12 ComboBoxを展開して「+」を選んだところ(実行済みではあるが)


TextBoxおよびTextBlockの表示桁数について
 数値から数字(文字列)への変換を行い、TextBoxやTextBlockで表示させると、小数点を含めて7桁しか表示できない現象があった。そこで、確認のために以下の確認を行ったが、まだ不明の点が残っている。
 1)文字を直接入れる
   textBox1->Text = "1.23456789";
   textBlock1->Text = "1.23456789";
   textBox1->Text = L"1.23456789"
   textBlock1->Text = L"1.23456789";
 のいずれも、正常に「1.23456789」と表示された。
 2)ToString()の結果を入れる
   float a = 1.23456789;
   textBox1->Text = a.ToString();
   textBlock1->Text = a.ToString();
 の場合(flostとしては数値が長すぎるが)も、
   double a = 1.23456789;
   textBox1->Text = a.ToString();
   textBlock1->Text = a.ToString();
 の場合も、表示されたのは「1.23457」であった。
 3)wstringstreamによる変換結果を入れる
  wstringstreamを用いて数値から文字列に変換する場合を図13に示す。数値がfloatでもdoubleでも、結果は「1.23457」であった。textBlock1に入れる場合でも、textBox1に入れる場合でも、結果は同じであった。


図13 ToString()の代わりに、wstringstreamを用いて数値から文字列へ変換する方法













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