テクニカルレシピ(Visual C++のレシピ)

Home>>Visual C++>>コントロール LastUpdate:2009-01-21

お絵かきアイテム

コントロールはGUI用のお絵かきアイテムです。
ダイアログ上に色々GUI用の部品をドラッグアンドドロップで貼り付けることが出来ます。

コントロールには関数を起動するためのボタンやテキスト表示用の領域、
プログラムの進捗状況を表示するためのバーなど色々なものが用意されています。

Visual C++での編集画面は下のようになっています。
画面中央が編集対象のダイアログで、
この上に右側の「ツールボックス」から必要なアイテムを貼り付けていきます。

コントロールの種類

ツールボックスを具体的に見てみましょう。
ここでは特によく使う3つのコントロール「Button」「Edit Control」「Picture Control」を簡単に解説します。
(なお当サイトのサンプルアプリは基本的にこの3つのコントロールを使って作っています。)

control-menu
Button (重要)
ボタンですね。ボタンを押したときに対応したイベントハンドラ関数を呼び出します。

 

 

Edit Control (重要)
文字(Hello World!)や数字データ(3.141592)の入出力を行います。かなり使います。

 

 

Picture Control (重要)
線で囲まれた四角形領域を指定します。独立したデバイスコンテキストとして使います。


具体的にコントロールでGUIを作ってみましょう。
下のダイアログベースのアプリケーションにコントロールを追加してみます。

dialog

下がの図がアプリ例になります。
これだけでかなりWindowsアプリっぽくなった気がしませんか?
ツールバーからコントロールをピックアップして貼り付けるだけなので、
この程度のGUIなら1〜2分くらいで作れます。

control

ちなみに上のアプリはButtonとListBoxとCheckBoxを上段に並べ、
中央の大きな部分はEdit Controlを貼り付けています。
「OK」「キャンセル」ボタンは場所を移動させただけです。

コントロール変数

コントロールでGUI(外装)を作るのは簡単ですが、
実際にはコントロールとプログラムの中身を関連づけなくてはいけません。

このためGUIとして貼り付けたコントロールには変数を追加することになります。
(Buttonにはイベントハンドラを追加します。)
変数には「Control」タイプと「Value」タイプの2種類があることを憶えてください。

上のダイアログのEdit Control(大きな白い部分)に変数を追加してみます。
Edit Controlは文字列を表示したり、数字データの入出力を行うために使います。

まずValueタイプの変数ですが、これはいわゆる普通の変数です。
Edit ControlにCString(文字列)型の変数を追加してみましょう。

ダイアログ上のEdit Controlの上で「右クリック」し、「変数の追加」を選んでください。
下のようなダイアログが出てきます。

右側のカテゴリを「Value」にして、左側の変数の種類を「CString」にして下さい。
変数名は「m_edit」にして、右下の完了ボタンを押せば変数が追加されます。
(***Dlg.hに追加されています。***はプロジェクト名です。)

必要な操作はこれだけです。
あとはプログラムの中からm_editに値を入力すれば、Edit Controlに文字が表示されます。
例えばプログラム中で「m_edit="Hello World";」とすると画面上に「Hello World」が表示されます。
(正確にはUpdateDataという関数が必要ですが、詳しくは計算処理に書いてます。)

もちろん変数の種類はdoubleやintといった数値タイプにもできるので、
「m_edit=1.234;」とか「m_edit=15;」といった数字の入力も簡単です。
ここまではわかりやすいですね。Valueタイプの変数は普通のC/C++の変数ということです。

次にControlタイプの変数ですが、
このタイプの変数は値の入力だけでなく、GUI表示を変更させることが出来ます。
まずEdit Controlを例にControl変数を追加してみましょう。

右側のカテゴリを「Control」にすれば左側の変数が「CEdit」になります。
変数名は「m_edit」にして、右下の完了ボタンを押せば変数が追加されます。

Controlタイプの変数で文字を表示する場合、
「m_edit="test";」ではなく、「m_edit.SetWindowText("test");」となります。
つまりCEditクラスのメンバ関数を使って文字を表示するわけです。

また「m_edit.MoveWindow」、「m_edit.ShowWindow」といったメンバ関数を使えば、
Edit Controlの表示位置・大きさを変えたり、表示/非表示を切り替えたりできます。
(詳しくは動的レイアウト参照のこと。)

VCプログラムを初めたての頃はValueタイプの変数の方が使いやすいかもしれませんが、
洗練されたGUI作成にはControlタイプの変数を使いこなす必要があります。

コントロールプロパティ

コントロールの細かい見た目は「プロパティ」で調整します。
コントロールの上で右クリックして、メニューからプロパティ表示を選択して下さい。

例えばEdit Controlの場合では下図に示すようなプロパティがあり、
「MultiLine」という欄の値を「True」にすれば複数行表示が可能になったり、
「Border」という欄の値を「False」にすれば枠線がなくなったりします。

ここではEdit Controlを例に解説しましたが、
他のコントロールにも様々な型、プロパティがあります。
各自で色々調べて研究してみてください。

アプリの種類:前項<< ページの先頭に戻る >>次項:デバイスコンテキスト