GrapeCity PlusPak for Windows Forms 11.0J
レイアウトの設定

ここでは、次のようなレイアウトの設計を行う手順を解説します。一部のセルには、最大表示領域や最小表示領域、リサイズの許可の設定を行います。



レイアウト設計の手順
次の手順では、GcTableLayoutContainer コントロールの行と列の設定を行い、コントロールのリサイズにあわせてセルをどのように動作させるかを設定します。
  1. Visual Studio を起動して、新規に Windows フォーム アプリケーション プロジェクトを作成する。
  2. Form1 の Size プロパティに (650, 500)、MinimumSize プロパティに (450, 400) を設定する。
  3. ツールボックスから「GcTableLayoutContainer」を選択し、Form1 にドラッグ&ドロップする。
  4. 「テイブルレイアウトのパターン」ダイアログが表示されるので、[Default]を選択する。
  5. GcTableLayoutContainer1 のスマートタグから[親コンテナにドッキングする]を選択する。
  6. GcTableLayoutContainer1 のスマートタグから[行の追加]を選択して行を1つ追加する。
  7. 1列目の2、3行目を選択しし、ツールバーの[セルのマージ]をクリックする。
  8. 1行目の行ヘッダをクリックし、ツールバーの[セルのマージ]をクリックする。
  9. 2行目の行ヘッダをクリックし、ツールバーの[実行時に列幅の変更を許可する]をクリックする。
  10. 行ヘッダのコンテキスト メニュー(右クリックメニュー)から[行の編集...]を選択し、TableRow コレクションエディターを表示する。
  11. TableRow コレクションエディターで以下の値を設定し、[OK] ボタンを押下する。
    メンバー SizeType プロパティ Height プロパティ MaxHeight プロパティ MinHeight プロパティ
    tableRow1 Absolute 30 0 0
    tableRow2 Percent 35 160 0
    tableRow3 Percent 65 0 180
  12. 列ヘッダのコンテキスト メニュー(右クリックメニュー)から[列の編集...]を選択し、TableColumn コレクションエディターを表示する。
  13. TableColumn コレクションエディターで以下の値を設定し、[OK] ボタンを押下する。
    メンバー SizeType プロパティ Width プロパティ MaxWidth プロパティ MinWidth プロパティ
    tableColumn1 Percent 30 240 150
    tableColumn2 Percent 70 0 0
以上で、基本的なレイアウトが作成できました。

次のステップでは、GcTableLayoutContainer コントロールのセルに Visual Studio 標準のコントロールを配置します。
コントロールの配置
上記で作成したレイアウトに Visual Studio 標準のコントロールを配置します。以下の手順では、それぞれのセルを下図の名称を使用して説明します。


  1. ツールボックスから「MenuStrip」を選択し、「セルA」にドラッグ&ドロップする。
  2. MenuStrip1 のメニュー項目に任意の文字を設定する。
  3. ツールボックスから「TreeView」を選択し、「セルB」にドラッグ&ドロップする。
  4. TreeView1 コントロールのスマートタグから[親コンテナにドッキングする]を選択する。
  5. TreeView1 コントロールのスマートタグから[ノードの編集...]を選択し、TreeNode エディターを表示する。
  6. TreeNode エディターを使用して、任意の項目を追加する。
  7. ツールボックスから「FlowLayoutPanel」を選択し、「セルC」にドラッグ&ドロップする。
  8. FlowLayoutPanel1 のスマートタグから[親コンテナにドッキングする]を選択する。
  9. FlowLayoutPanel1 を選択し、AutoScroll プロパティに True を設定する。
  10. FlowLayoutPanel1 を選択し、BackColor プロパティに White を設定する。
  11. ツールボックスから「Panel」を選択し、FlowLayoutPanel1 の上にドラッグ&ドロップする。
  12. 再度、ツールボックスから「Panel」を選択し、FlowLayoutPanel1 の上にドラッグ&ドロップする。
  13. Panel1、Panel2 の Size プロパティに (200, 135) を設定する。
  14. ツールボックスから「TextBox」を選択し、Panel1 の上にドラッグ&ドロップする。 この操作を繰り返して Panel1、Panel2 に TextBox を4個ずつ配置する。
  15. ツールボックスから「DataGridView」を選択し、「セルD」にドラッグ&ドロップする。
  16. DataGridView1 のスマートタグから[親コンテナにドッキングする]を選択する。
  17. DataGridView1 のスマートタグから[列の追加...]を選択し、「列の追加」ダイアログを表示する。
  18. 「列の追加」ダイアログの[追加]ボタンを押下して列を追加する。この操作を繰り返して DataGridView1 に5列を追加する。

プロジェクトを実行し、フォームのリサイズを行うと、それぞれのセルがフォームのサイズにあわせて拡大/縮小します。また、セルCとセルDの境界線はマウスでドラッグすることができます。
関連トピック

 

 


© 2008 GrapeCity inc. All rights reserved.