タブページ・アプリケーションの作り方

１．要点

複数のサンプルプログラムを1つの実行形式に入れる方法としてTabPageクラスを使いました。
各タブが１つのFormアプリケーションだと考えていただければと思います。
Formアプリケーションの始まり、終了の処理は、それぞれLoad()、FormClosing()を使いますが、タブアプリケーションではOnEnter()、OnLeave()を使いました。独立したプログラムを作成する場合は、この対応が利用できます。ただし、注意が必要なのは、Enter、Leaveイベントは、必ずしも対で発生するわけではなく、重複して発生することです。サンプルでは、フラグを使って対の関係を保っています。

 ２．タブページの追加

サンプルは、TabPageクラスを継承して作ってあります。プログラムは、タブごとに独立しています。デザイナが、直接サポートしないので以下の手順で作りました。（何か良い方法がありそうですが良く分かりません。）

1. 参照に、このDLLを追加します。
2. 通常のクラスを追加します。
3. クラス宣言を、
   public class xxx : TabPage ｛
   の形に、継承を追加します。
4. そうすると、「デザイナ」が、開けるようになるので、ChartCtrlコントロールをツールボックスから貼り付けます。
   下図のように、貼り付けたChartCtrlコントロールのプロパティで、DockをFillに設定するとTabPage全体が描画領域になります。
   ForeColor、Font、BackColorも変更できます。
5. この操作で、
   private ChartCtrl.ChartCtrl chartCtrl1;
   private IContainer component;
   private void InitializeComponent()
   {
   }
   のような、コントロールの初期化が追加されます。ただし、このメソッドは、呼び出す部分がありません。また、コントロール間の関連を追加する部分もありません。
6. そこで、コンストラクタを追加して、InitializeComponent()を呼び出すようにします。
7. コントロール間の関連を付けるためのメソッドを追加します。
   public void Initialize()
   {
               this.Controls.Add(this.chartCtrl1);
   }
8. Formには、TabControlを貼り付けておきます。
   自動的に、２つのタブページが追加されますが、右ボタンメニューで削除します。
9. このメソッドを、FormのLoad()から呼び出します。
   Wave tabPage_wave;
   //------------------------------------------------------------------
   private void Form1_Load(object sender, EventArgs e)
   {
       //タブページを設定
       tabPage_wave = new Wave();
       tabPage_wave.Initialize();
       //タブページを追加
       this.tabControl1.Controls.Add(tabPage_wave);

３．サンプルプログラムの内容

右ボタンメニューから「コードの表示」を選んで、TabPageを継承した、アプリケーションクラスを編集します。

 ３．１．コンストラクタの追加

 コントロールを貼り付けることで、デザイナが自動的に
InitializeComponent()
が、作られます。これを、コンストラクタから呼び出すようにします。コンストラクタは、クラスと同じ名前の、戻り値の宣言のない、メソッドです。（下記は、クラス名がWaveの場合）

３．２．Initialize()の追加

コントロール間の関連は、親のコントロールに、子のコントロールを追加することで表現します。この処理は、基本的に末端から行う必要があります。このクラスが、TabControlに追加される前に行う必要があります。このために、FormのLoad()から呼び出す処理としてInitialize()を追加します。名前は、決まっているわけではありません。

この処理で、ChartCtrlが、このTabPageに追加されます。
bDoneは、このアプリケーションで使っているループ脱出用のループ型のフラグです。Enter()、Leave()の多重処理の防止にも使っています。

３．３．Form1の変更

Form1には、あらかじめ、TabControlを貼っておきます。自動的に2つのタブが追加されますが、削除します。
Load()のタイミングで、タブページを作成、初期化し、TabControlに追加します。

３．４．タブページアプリケーションの開始

タブが選択されたときの処理をOnEnter()に記述します。
ソースコードのメソッドの記述可能箇所で、overrideと入力すると、インテリセンスが機能して一覧が表示されます。ここで、OnEnterを選択すると自動的にメソッドが追加されます。
ここでは、PCMの入力処理の準備、軸等の描画をしています。
 

３．５．タブページアプリケーションの終了

別のタブが選ばれた場合には、PCM入力処理を停止します。

 ３．６．タイマーイベントの処理

 ここでは、タイマでPCMデータを受信しています。デザイナで、ツールボックスからタイマーを貼り付けて、貼り付けたタイマをダブルクリックするとメソッドが追加されます。入力したPCMデータは、DrawWave()で波形をリアルタイム表示します。

３．７．入力波形のるあるタイム表示

 OnEnter()の処理で退避していた軸などの描画に、波形を重ねて描画します。