GUI部品を扱う

リストビューを利用する

ここでは、リストビューについて紹介します。
リストビューとは、エクスプローラなどで使われている、アイコンの一覧を表示することができる部品です。

アイコン表示だけでなく、詳細表示にすることも可能です。

リストビューを貼り付けるには、次のように書きます。

書式

《場所》《リストビュー名》というリストビューを作る

例文

メイン画面を表示する
待機する

メイン画面とは
	ウィンドウを継承する
	はじめの手順
		初期化する
		ーーデータをリストビューへ追加する
		データ(1)は、{「山田次郎」,「4/25」,「男」}
		データ(2)は、{「田中花子」,「7/31」,「女」}
		データ(3)は、{「相原貴之」,「9/12」,「男」}
		データ(4)は、{「高橋祐子」,「11/27」,「女」}
		データ(5)は、{「鈴木次郎」,「10/20」,「男」}
		リストビュー1の詳細一覧をデータに変える
	終わり
	初期化する手順
		この内容を「メイン画面」に変える
		このドラッグドロップを○に変える
		リストビュー1というリストビューを作る
			その位置と大きさを{0,0,284,261}に変える
			その表示方法を「詳細」に変える
			その見出し一覧を{「名前」,「誕生日」,「性別」}に変える
			その見出し幅を{111,80,60}に変える
			そのドッキング方向を「全体」に変える
	終わり

	リストビュー1の項目が選択された時の手順
		自分の内容を「[リストビュー1の選択項目の内容]を選択中」に変える
	終わり
終わり

 

項目を追加する

リストビューに項目を加えるには、「追加する」手順を使います。「追加する」手順で「リストビュー項目」のオブジェクトが生成されます。

書式

《リストビュー名》《名前》《アイコン》で追加する

《リストビュー名》は、項目を追加するリストビューを指定します。
《名前》は、リストビューの名称を指定します。追加する項目がどこの項目に属すかを指定します。
《アイコン》は、項目に使用するアイコンを指定します。「プロデルアイコン」種類または.icoファイルのパスを指定します。

例文

ファイルアイコンは、「shell32.dll」の1番目からアイコン画像を抽出したもの
リストビュー1に「お知らせ.txt」をファイルアイコンで追加する
	その詳細を{「9月10日」,「テキストファイル」}に変える

また、「詳細一覧」設定項目によって一度に項目を追加することもできます。

データ(1)は、{「山田次郎」,「4/25」,「男」}
データ(2)は、{「田中花子」,「7/31」,「女」}
データ(3)は、{「相原貴之」,「9/12」,「男」}
データ(4)は、{「高橋祐子」,「11/27」,「女」}
データ(5)は、{「鈴木次郎」,「10/20」,「男」}

ーーデータをリストビューへ追加
リストビュー1の詳細一覧をデータに変える

項目をクリック・ダブルクリックしたときの手順を作る

ツリーの項目をクリックした時は、次のような手順が実行されます。

《リストビュー名》がクリックされた時の手順

終わり
《リストビュー名》がダブルクリックされた時の手順

終わり

どの項目を選択したか調べるには、次のように書きます。

《リストビュー名》の内容
リストビュー1がダブルクリックされた時の手順
	リストビュー1の選択項目の内容を表示する
終わり

見出し(カラムヘッダ)の追加と変更

「見た目」設定項目を「詳細」に設定した場合、見出しに表示される項目をカラム(カラムヘッダ)と言います。

見出しを追加する

《リストビュー名》《項目名》という見出しを追加する
メイン画面を表示する
	待機する

	メイン画面とは
		ウィンドウを継承する
		はじめの手順
		初期化する
		リストビュー1に「ファイル名」という見出しを追加する
		その幅を150に変える
	終わり
	初期化する手順
		この内容を「メイン画面」に変える
		リストビュー1というリストビューを作る
		その位置と大きさを{12,64,260,140}に変える
		その表示方法を「詳細」に変える
	終わり
終わり

見出しの設定項目

設定項目 説明
表示順 見出しの表示順(1からカラムの項目数まで)
内容 見出しの内容
見出しのカラムの項目の幅
文字配置 カラムの項目の見出しの位置
左/右/中央で指定

リストビュー項目の名称を編集できるようにする

ユーザがリストビューの項目名を変更できるように設定できます。
項目名(ラベル)を変更する直前に「リストビュー1のラベルが変更する」イベント手順が発生して、直後に「リストビュー1のラベルが変更された」イベント手順が実行されます。

このイベント手順を使って正しい内容が指定されているかを確定する前に判断することができます。

イベント手順が発生した時の変更後の項目名は、「この時の編集後」で取得することができます。もし内容が正しくない場合は、「この時のキャンセル」をオンとするとラベルの変更内容が反映されずに元に戻ります。

メイン画面を表示する
待機する

メイン画面とは
	ウィンドウを継承する
	はじめの手順
		初期化する
		ファイルアイコンは、「shell32.dll」の1番目からアイコン画像を抽出したもの
		リストビュー1に「お知らせ.txt」をファイルアイコンで追加する
			その詳細を{「9月10日」,「テキストファイル」}に変える
	終わり
	初期化する手順
		この内容を「メイン画面」に変える
		リストビュー1というリストビューを作る
			その位置と大きさを{12,12,260,237}に変える
			そのラベル編集を○に変える
	終わり

	リストビュー1のラベルが変更された時の手順
		もしこの時の編集後が「」なら
			「名前を入力してください。」を警告アイコンで表示する
			この時のキャンセルは、○
		もし終わり
	終わり
終わり

 

チェックボックスを付けて項目にチェックが入れられるようする

リストビューの各項目にチェックボックスを付けることができます。

チェックボックスでチェックされたリストビュー項目を調べるには、「チェック項目一覧」設定項目や「チェック番号一覧」設定項目を使います。

メイン画面を表示する
待機する

メイン画面とは
	ウィンドウを継承する
	はじめの手順
		初期化する
		ーーリストビューのデータを加えます
		データ(1)は、{「山田次郎」,「4/25」,「男」}
		データ(2)は、{「田中花子」,「7/31」,「女」}
		データ(3)は、{「相原貴之」,「9/12」,「男」}
		データ(4)は、{「高橋祐子」,「11/27」,「女」}
		データ(5)は、{「鈴木次郎」,「10/20」,「男」}
		リストビュー1の詳細一覧をデータに変える
	終わり
	初期化する手順
		この内容を「リストビューのチェックボックス」に変える
		リストビュー1というリストビューを作る
			その位置と大きさを{0,31,284,230}に変える
			その表示方法を「詳細」に変える
			そのチェックボックスを○に変える
			その見出し一覧を{「名前」,「誕生日」,「性別」}に変える
			その見出し幅を{120,80,60}に変える
			そのドッキング方向を「全体」に変える
		自動配置パネル1という自動配置パネルを作る
			その位置と大きさを{0,0,284,31}に変える
			その移動順を2に変える
			そのドラッグドロップを○に変える
			そのドッキング方向を「上」に変える
		決定ボタンというボタンを自動配置パネル1へ作る
			その位置と大きさを{3,3,75,23}に変える
			その内容を「決定」に変える
			その移動順を1に変える
	終わり

	決定ボタンがクリックされた時の手順
		結果は、「」
		リストビュー1のチェック項目一覧のすべての要素についてそれぞれ繰り返す
			結果は、「[結果][要素の内容][改行]」
		繰り返し終わり
		結果を情報アイコンで表示する
	終わり
終わり

例文 特定の項目をチェックする

指定したリストビュー項目にチェックを入れることもできます。
例えば2番目のリストビュー項目にチェックを入れるには、次のように書きます。

リストビュー1の項目一覧(2)のチェックをオンに変える

例文 特定の項目がチェックされているかどうか調べる

同じように指定したリストビュー項目がチェックされているかどうかを調べることもできます。

もしリストビュー1の項目一覧(3)のチェックなら
	「3番目はチェックされています」を情報アイコンで表示する
そうでなければ
	「3番目はチェックされていません」を情報アイコンで表示する
もし終わり

文字の色などを変更する

指定した部分の項目名の色や背景を変更することができます。

書式

【リストビュー】の【番号番目の背景色を【色】に変える
【リストビュー】の【番号番目の太字をオンに変える
【リストビュー】の【番号番目の文字色を【色】に変える

項目名を「選択」とすると現在選択している項目に対して設定します。

窓としてウィンドウを作る

窓にリストビュー1というリストビューを作る
	そのドッキング方向を全体に変える
	その見出し一覧を{「名前」,「誕生日」,「性別」}に変える
	その表示方法を詳細に変える

データ(1)は、{「山田次郎」,「4/25」,「男」}
データ(2)は、{「田中花子」,「7/31」,「女」}
データ(3)は、{「相原貴之」,「9/12」,「男」}
データ(4)は、{「高橋祐子」,「11/27」,「女」}
データ(5)は、{「鈴木次郎」,「10/20」,「男」}
リストビュー1の詳細一覧をデータに変える

リストビュー1の2番目の文字色を緑色に変える
リストビュー1の2番目の背景色を黄色に変える

窓を表示する
待機する

ツリーを利用する

ツリーは、エクスプローラのフォルダ一覧のような木構造の一覧表を作るための部品です。
見た目が木の枝に似ていることからツリーなどといいます。

ツリーを作成する

ツリーを貼り付けるには、次のように書きます。

書式

《場所》《ツリー名》というツリーを作る

例文 ツリーを作る

メイン画面を表示する
待機する

メイン画面とは
	ウィンドウを受け継ぐ

	はじめの手順
		この内容を、「ツリーのテスト」に変える

		ツリー1としてツリーを作る
			その大きさを{200,200}に変える
			そのドッキング方向を全体に変える
		ノードAは、ツリー1:「文章」を「..\image\folder_close.ico」で追加したもの
		ノードA:「..\image\folder_close.ico」で「9月」を追加する
		ノードA:「..\image\folder_close.ico」で「10月」を追加する

		ノードBは、ツリー1:「写真」を「..\image\folder_close.ico」で追加したもの
		ノードB:「..\image\folder_close.ico」で「旅行」を追加する
		ノードB:「..\image\folder_close.ico」で「バーベキュー」を追加する
		ノードB:「..\image\folder_close.ico」で「海」を追加する
	終わり

	ツリー1が折りたたみ後時の手順
		イベントの対象のアイコンを「..\image\folder_close.ico」に変える
	終わり
	ツリー1が展開後時の手順
		イベントの対象のアイコンを「..\image\folder_open.ico」に変える
	終わり
終わり

アイコンは、任意ですので、サンプルにあるアイコンを使って試してみてください。

※以降、例は、ツリー1を操作するものとして説明しています。
ツリーの番号が違う場合は、「ツリー2」などと変更して
連続して使用する場合は、「それ」を使って書き換えてください。

項目を追加する

実行すると次のようなツリーにノードを作れます。「ツリー項目」でノードの状態を変えることができます。

【親のツリー項目】へ【項目名】を〈【アイコン】で〉追加する

枝の展開と折りたたみ

枝を展開して子となる項目を出したときと、枝を折りたたんだときにも手順が実行されます。
開いたときと閉じたときで、アイコンの形を変えるときなどに使います。

ツリー1が折りたたみ後時の手順
	イベントの対象のアイコンを「..\image\folder_close.ico」に変える
終わり
ツリー1が展開後時の手順
	イベントの対象のアイコンを「..\image\folder_open.ico」に変える
終わり

ツリー項目の名称を編集できるようにする

ツリーの項目名を変更できるようにすることもできます。
項目名(ラベル)を変更する直前に「編集前」イベント手順が実行され、直後に「編集後」イベント手順が実行されます。

変更後の項目名は、「この時の内容」で取得することができますので これらを使って正しい内容が指定されているか判断することができます。

もし内容が正しくない場合は、「この時のキャンセル」で○ を設定すると、編集中のラベルが変更されずに編集前に戻ります。

ツリー1の名前編集を○に変える

ツリー1が編集後時の手順
	//ラベルの編集の確認
	もしこの時の内容が「」なら
		「空白にはできません」を警告アイコンで表示する
		この時のキャンセルは、○
	もし終わり
終わり

チェックが入れられるようする

ツリーの各項目にチェックを入れることもできます。

ツリー1のチェックボックスを○に変える

こうすることで各項目にチェックボックスが表示されます。

チェックされているかどうか調べる場合は、次のように書きます。

《ツリー名》《項目名または番号》のチェック

項目名は、追加するときに指定した名前です。

また、選択している部分に関して調べるときは、次のようにすることもできます。

《ツリー名》のチェック

さらに細かい設定をしたい

以上でツリーの基本的な使い方は、説明しましたが、ここではツリーの細かい設定項目について説明します。

文字の色などを変更する

指定した部分の項目名の色や背景を変更することができます。

《ツリー名》《項目名または番号》の色を青に変える
《ツリー名》《項目名または番号》の太字をオンに変える
《ツリー名》《項目名または番号》の背景を灰色に変える

項目名を「選択」とすると現在選択している項目に対して設定します。

ボタンをチェック可能にする

昔のラジオのボタンのように、ボタンをチェックオブジェクトのようにすることもできます。

ツールバー1の1番目のスタイルを1に変える
ツールバー1の1番目のチェックを○に変える

このようにすると、1番目のボタンがチェック状態になります。

項目についての情報を調べる

指定した項目の属する位置や親の項目名、子の項目の数などの情報を調べることもできます。

《ツリー名》《項目名または番号》のパス
《ツリー名》《項目名または番号》の親
《ツリー名》《項目名または番号》の個数

ページ先頭へ