2023/02/06

フォームコントロールの内側サイズ

• １．概要
• ２．ユーザーフォーム
• 　２ー１．WidthとHeight
• 　２ー２．InsideWidthとInsideHeight
• 　　よりみち（VBEのフォームグリッドの単位）
• ３．Frameコントロール
• 　３ー１．WidthとHeight
• 　３ー２．InsideWidthとInsideHeight
• 　　よりみち（コンテナ化）
• ４．MultiPageコントロール
• 　４ー１．WidthとHeight
• 　４ー２．InsideWidthとInsideHeight
• 　　よりみち（DoEventsで変更内容の反映）
• ５．まとめ
• アプリ実例

１．概要

ユーザーフォーム上に配置するコントロールの内、「Frame」と MultiPageの「Page」部分は操作するコントロールでは無く、他のコントロールの「ベース」となるものです。またUserForm自体もコントロールのベースとなっています。
これら「UserForm」「Frame」「Page」には、他のコントロールには無いプロパティがあります。

全てのコントロールには、その寸法を取得／設定する「Width」「Heitht」というプロパティがあるのですが、「UserForm」「Frame」「Page」にはベースの役割をする上で必要な「InsideWidth」「InsideHeight」プロパティがあるのです。
今回は、この「InsideWidth」「InsideHeight」プロパティに注目します。

２．ユーザーフォーム（UserForm）

２ー１．WidthとHeight

まず「Width」と「Height」ですが、フォームの見た目の幅・高さでは無いようです。
例えば図１のような設定でユーザーフォームを起動すると、フォームの左上角が「Excelのドキュメント座標原点」に一致します。

0. '==========　⇩(1)　フォーム設定（左上角を原点に合わせる）　============
1. Private Sub UserForm_Initialize()
2. 　Me.StartUpPosition = 0
3. 　Me.Left = ActiveWindow.PointsToScreenPixelsX(0) * 0.75
4. 　Me.Top = ActiveWindow.PointsToScreenPixelsY(0) * 0.75
5. End Sub

図１別窓

０２行目「Me.StartUpPosition = 0」で、フォームの起動位置を手動モードにします。
０３行目「Me.Left = ActiveWindow.PointsToScreenPixelsX(0) * 0.75」では、フォームの左端の位置をExcelドキュメント座標原点（X：左右方向）に合わせます。なお「PointsToScreenPixelsX(0)」の単位はピクセルですので、フォームの位置指定に使用するポイント単位に変換するため「0.75」を掛け算します。なおこれは、Excelの表示倍率が100%の時です。
０４行目「Me.Top = ActiveWindow.PointsToScreenPixelsY(0) * 0.75」では、フォームの上端の位置をExcelドキュメント座標原点（Y：上下方向）に合わせます。

一方、図２のような設定でユーザーフォームを起動すると、フォーム右下角が「Excelのドキュメント座標原点」に一致します。

10. '==========　⇩(2)　フォーム設定（右下角を原点に合わせる）　============
11. Private Sub UserForm_Initialize()
12. 　Me.StartUpPosition = 0
13. 　Me.Left = ActiveWindow.PointsToScreenPixelsX(0) * 0.75 - Me.Width
14. 　Me.Top = ActiveWindow.PointsToScreenPixelsY(0) * 0.75 - Me.Height
15. End Sub

図２別窓

１２行目「Me.StartUpPosition = 0」は図１と同じく、フォームの起動位置を手動モードにしています。
１３行目「Me.Left = ActiveWindow.PointsToScreenPixelsX(0) * 0.75 - Me.Width」は、図１の０３行目に対して「フォームの幅」を差し引いていますので、フォームの右端が原点に合うことになります。
１４行目「Me.Top = ActiveWindow.PointsToScreenPixelsY(0) * 0.75 - Me.Height」は、図１の０４行目に対して「フォームの高さ」を差し引いていますので、フォームの下端が原点に合うことになります。
１３～１４行目を合わせて、フォームの右下角を原点に合わせています。

図１の設定でフォームを起動した結果が図３の左側、図２の設定で起動した結果が右側です。

図３別窓

図３でも分かるように、フォームの実際の左右端は見かけの左右端よりも少しだけ外側です。あたかも両端が透明になっているような形です。
また図３の右側では、フォームの下端も見かけより外側となっています。なお上端は、ほぼ見た目通りです。

２ー２．InsideWidthとInsideHeight

UserFormのInsideWidthとInsideHeightの範囲を調べる為に、まずユーザーフォーム内に「Imageコントロール」を配置します。そのImageをフォーム内部一杯に広げるのが図４のコードです。なお数多くあるコントロールの中からImageを選択した理由は、色々試してみて最も境界が明確だったからです。

20. '==========　⇩(3)　フォーム設定（フォーム内部一杯にコントロールを表示）　============
21. Private Sub UserForm_Initialize()
22. 　Me.Image1.Left = 0
23. 　Me.Image1.Top = 0
24. 　Me.Image1.Width = Me.InsideWidth
25. 　Me.Image1.Height = Me.InsideHeight
26. 　Me.Image1.BorderColor = RGB(255, 0, 0)
27. End Sub

図４別窓

２２行目「Me.Image1.Left = 0」で、Imageコントロールの左端をフォーム内側左端に合わせます。
２３行目「Me.Image1.Top = 0」で、Imageコントロールの上端をフォーム内側上端に合わせます。
２４行目「Me.Image1.Width = Me.InsideWidth」で、Imageコントロールの横幅を内側一杯に延ばします。
２５行目「Me.Image1.Height = Me.InsideHeight」で、Imageコントロールの高さを内側一杯に延ばします。
２６行目「Me.Image1.BorderColor = RGB(255, 0, 0)」で、Imageコントロールの外枠線を赤色にします。

図４のコードでフォームを起動すると、図５のようになります。
赤線（Imageコントロールの外枠線）で示されている範囲が、フォームのInsideWidth × InsideHeight になります。

図５別窓

図５のフォームの寸法を調べてみると、以下のようになりました。

項目		寸法(ポイント)
幅	Width	216.75
	InsideWidth	204.75
高 さ	Height	189
	InsideHeight	159.75

図６別窓

もちろん絶対値はどうでも良いのですが、内側と外側の「差」はフォームのサイズに関係無く一定のようです。但し、フォームのプロパティ（例えばBorderStyle）によっては、内側寸法が変化します。

また、この値を検証するために図７のように「セルのサイズ」で測定してみました。

図７別窓

フォーム内側の赤枠に沿うようにセル幅・高さを合わせ、マウスで列・行の境界線をクリックすると図７の緑字のように寸法が表示されます。幅の表示値は「文字数」ですが、カッコ内にピクセル単位での値が表示されますし、高さは「ポイント数」とカッコ内にピクセル値が表示されます。

ピクセル値は「ディスプレイ拡大率＝100%」「Excel表示倍率＝100%」であれば、 ピクセル値 × 0.75 ＝ ポイント値 ですので、計算すると図６の値に一致することが分かります。

図７とは別な方法での検証も考えてみました。図８のようにフォームレイアウト画面でのグリッドの数を数える方法です。 図８別窓 グリッドの間隔を数えてみると、ちょうど34個です。これに、VBEの「ツール」→「オプション」→「全般」で設定可能な「グリッドの表示幅」を掛けると「34 × 6 = 204」となります。「グリッドの表示幅」の単位は「twip」なので「20 twip = 1ポイント」で計算をして「204 ÷ 20 = 10.2」・・・ と、ここまで計算して「なに？10.2ポイント！？」と気が付きました。あまりにも小さい値だからです。 そこで、10.2ポイントに近い「10ポイントのフォント」でフォーム上に文字列を配置してみたのが図９です。 図９別窓 やはり横幅は「10.2ポイント」では無いように思えます。そこで見返してみると「204twip ≒ 図６の204.75」に気づきます。 と言うことは、VBEのグリッド間隔は 「×：twip単位　〇：ポイント単位」という事になります。 グリッド間隔の単位「twip」は、今まで気にもしていなかったのですが「誤記」の可能性があります。と言って、この単位を見ながらコントロールを配置している方は少ないと思うので、実害は無さそうです。

３．Frameコントロール

３ー１．WidthとHeight

フォーム上でのFrameコントロールのWidthとHeightを調べる為に、フォーム上にFrameを１つ配置し図１０の設定をします。

30. '==========　⇩(4)　フォーム設定（フォーム内部一杯にFrameを表示）　============
31. Private Sub UserForm_Initialize()
32. 　Me.Frame1.Left = 0
33. 　Me.Frame1.Top = 0
34. 　Me.Frame1.Width = Me.InsideWidth
35. 　Me.Frame1.Height = Me.InsideHeight
36. 　Me.Frame1.BorderStyle = fmBorderStyleSingle
37. 　Me.Frame1.BorderColor = RGB(255, 0, 0)
38. End Sub

図１０別窓

３２行目「Me.Frame1.Left = 0」で、Frameの左端をフォーム内側左端に合わせます。
３３行目「Me.Frame1.Top = 0」で、Frameの上端をフォーム内側上端に合わせます。
３４行目「Me.Frame1.Width = Me.InsideWidth」で、Frameの横幅をフォーム内側一杯に延ばします。
３５行目「Me.Frame1.Height = Me.InsideHeight」で、Frameの高さをフォーム内側一杯に延ばします。
３６行目「Me.Frame1.BorderStyle = fmBorderStyleSingle」で、Frameの枠線を「線あり」にします。
３７行目「Me.Frame1.BorderColor = RGB(255, 0, 0)」で、Frameの枠線色を赤色にします。
なお３６行目のBorderStyle設定をしない（既定は枠線無し）と、３７行目で枠線色を設定しても着色しません。

フォームを起動した結果が図１１の中央図です。

図１１別窓

Frameの左右端は「フォーム内側一杯」に設定される事が分かります。また下端もフォーム内側一杯です。
一方、上端は「Frameの文字列の上端」になっています。Frameの枠線は「文字列の中央辺り」の高さになります。

なお図１１の中央図の元は、図１１の右側図です。下でInsideWidthとInsideHeightを説明するために、Frameの中にImageコントロールを１つ配置しています。

３ー２．InsideWidthとInsideHeight

FrameのInsideWidthとInsideHeightを確認する為に、図１１の右側図のようなフォームを作成し図１２のような設定をします。

50. '==========　⇩(5)　フォーム設定（Frame内側にImageを一杯に表示）　============
51. Private Sub UserForm_Initialize()
52. 　Me.Frame1.Left = 0
53. 　Me.Frame1.Top = 0
54. 　Me.Frame1.Width = Me.InsideWidth
55. 　Me.Frame1.Height = Me.InsideHeight
57. 　Me.Image1.Left = 0
58. 　Me.Image1.Top = 0
59. 　Me.Image1.Width = Me.Frame1.InsideWidth
60. 　Me.Image1.Height = Me.Frame1.InsideHeight
61. 　Me.Image1.BorderColor = RGB(255, 0, 0)
62. End Sub

図１２別窓

５２～５５行目は図１０の３２～３５行目と同じで、フォーム内一杯にFrameを表示させています。枠線に着色はしていません。

５７行目「Me.Image1.Left = 0」で、Imageの左端を「Frame内部」の左端に合わせています。

今回は図１１の右側図のように「Frame1の内部にImage1コントロールを配置」しています。このように配置すると、Image1はFrame1のコントロール配下になる（Frame1のControlプロパティにImage1が登録される）ので、Image1の位置は「Frame1ベース」という事になります。 また、Frame内に配置されたImageのParentを調べる（Me.Image1.Parent）事で、「Frame1」オブジェクトが親だと分かります。もしFrame外にImageを置いた場合は、Parentを調べると「UserForm」オブジェクトが親となります。 子供にとっての親（Parent）は「コンテナ」と呼ばれるので、Frameの配下になる事は「コンテナ化」する　と言っても良いかもしれません。

５８行目「Me.Image1.Top = 0」で、Imageの上端を「Frame内部」の上端に合わせています。
５９行目「Me.Image1.Width = Me.Frame1.InsideWidth」で、Imageの横幅をFrame内部一杯に延ばします。
６０行目「Me.Image1.Height = Me.Frame1.InsideHeight」で、Imageの高さをFrame内部一杯に延ばします。
６１行目「Me.Image1.BorderColor = RGB(255, 0, 0)」で、Image外枠線の色を赤色に設定します。

起動したフォームが図１３です。（一番左側の図は、フォームの内側領域を明示しているものです。）

図１３別窓

図１３の中央と右側では、FrameコントロールのFontサイズが異なります。中央が（標準の）9ポイント、右側が18ポイントに設定変更したものです。
Frame枠線（薄い灰色）に沿った赤い枠線が、Frame内側の領域（＝Imageの外側）です。その枠線は、FrameのFontサイズによって違ってきます。サイズが大きくなる（図１３の右側図）と、枠線が下がってきます。

また「Frameの文字列のところで、赤いImageの枠線が切れている」ことも確認できます。切れていると言うことは「Frame内に配置したコントロールの一部が見えない」事になります。
そこで「Frame内側の上部から、何ポイント下げればコントロールが隠れないか」を調べたのが図１４です。

図１４別窓

ここではFontサイズのみを変えていますが、他のプロパティ（例えばBorder）でも影響を受けますので御注意下さい。
大雑把な考え方では、「Fontサイズの半分（例えばFontが9ポイントであれば4.5ポイント、Fontが18ポイントであれば9ポイント）以上」を下げれば、Frame内のコントロールが隠れることは無さそうです。

４．MultiPageコントロール

ここで扱うMultiPageコントロールは、複数のPageの集合体です。MultiPage内の１つ１つのページが「Page」となります。
以下で説明する「WidthとHeight」はMultiPageのプロパティであり、また「InsideWidthとInsideHeight」はPageのプロパティです。しかし、MultiPageには「InsideWidthとInsideHeight」は無く、Pageには「WidthとHeight」はありません。

４ー１．WidthとHeight

MultiPageコントロールのWidthとHeightを調べるために、フォーム上にMultiPageを１つ配置し、図１５の設定をします。

70. '==========　⇩(6)　フォーム設定（フォーム内部一杯にMultiPageを表示）　============
71. Private Sub UserForm_Initialize()
72. 　Me.MultiPage1.Left = 0
73. 　Me.MultiPage1.Top = 0
74. 　Me.MultiPage1.Width = Me.InsideWidth
75. 　Me.MultiPage1.Height = Me.InsideHeight
76. 　Me.MultiPage1.BackColor = RGB(200, 200, 200)
77. End Sub

図１５別窓

７２行目「Me.MultiPage1.Left = 0」で、MultiPageの左端をフォーム内側左端に合わせます。
７３行目「Me.MultiPage1.Top = 0」で、MultiPageの上端をフォーム内側上端に合わせます。
７４行目「Me.MultiPage1.Width = Me.InsideWidth」で、MultiPageの横幅をフォーム内側一杯に延ばします。
７５行目「Me.MultiPage1.Height = Me.InsideHeight」で、MultiPageの高さをフォーム内側一杯に延ばします。
７６行目「Me.MultiPage1.BackColor = RGB(200, 200, 200)」で、MultiPageの背景色を「灰色」にします。背景色を変更したのは、MultiPageには枠線というものが無い為の代用です。

フォームを起動した結果が図１６の中央図です。

図１６別窓

MultiPageの左右は「フォーム内側一杯」に設定される事が分かります。
一方、上下方向の下端はフォーム内側一杯で、上端は「MultiPageのタブ上端」となっています。

なお図１６の中央図の元は、図１６の右側図です。下でInsideWidthとInsideHeightを説明するために、MultiPageの１ページ目の中にImageコントロールを１つ配置しています。

４ー２．InsideWidthとInsideHeight

PageのInsideWidthとInsideHeightを確認する為に、図１６の右側図のようなフォームを作成し、図１７の設定をします。

90. '==========　⇩(7)　フォーム設定（MultiPage内部一杯にImageを表示）　============
91. Private Sub UserForm_Initialize()
92. 　Me.MultiPage1.Left = 0
93. 　Me.MultiPage1.Top = 0
94. 　Me.MultiPage1.Width = Me.InsideWidth
95. 　Me.MultiPage1.Height = Me.InsideHeight
97. 　DoEvents: DoEvents
99. 　Me.Image1.Left = 0
100. 　Me.Image1.Top = 0
101. 　Me.Image1.Width = Me.MultiPage1.Pages(0).InsideWidth
102. 　Me.Image1.Height = Me.MultiPage1.Pages(0).InsideHeight
103. 　Me.Image1.BorderColor = RGB(255, 0, 0)
104. End Sub

図１７別窓

９２～９５行目は、図１５の７２～７５行目と同じで、MultiPageをフォーム内側一杯に表示しています。

９７行目「DoEvents: DoEvents」では制御を一旦O/Sへ戻し、「Pageの内側寸法の変更内容をフォームに反映」させています。

この「DoEvents」が担っているのは「変更内容の反映」という機能です。 普通に考えれば９４～９５行目の実行と共に「内側寸法が変更」されるはずなのですが、試行してみるとDoEventsを実行する直前では「元サイズのPageの内側寸法」を保持しているのです（PC環境により異なるかもしれません）。そのため、ここでDoEventsを実行しないと、１０１～１０２行目で変更設定するImageコントロールのサイズが旧データ（最大には広がらない）となってしまいます。 しかし、Frame内にImageを配置した図１２の場合には「DoEventsが不要」でしたので、何か理由がありそうです。例えばFrameにはWidthとInsideWidthが両方存在するのに対し、MultiPageにはWidthがあるがInsideWidthは無く、子どもに相当する「Pageに存在」する等です。 また「コンボボックスのテキストボックス部に複数列を表示」でも、DoEventsを使ってListBoxのサイズを反映させる必要がありましたが、何か今回と状況が似ているような気もします。 また図１６の右図のように、１ページ目（＝Me.MultiPage1.Pages(0) ）を開いた形でMultiPageを配置すると、DoEventsを実行した時に正しい値になるのは１ページ目だけです。 且つ、途中で「MultiPage1.Value = 1」等を実行して「ページを切り替える」と、切り替えられたページも正しい値に切り替わります。切り替えられていないページ（＝ 一度も表面に出てきていないページ）は古い値のままなのです。 結局、原因は分からないのですが、ActiveX（ユーザーフォーム）のコントロールでサイズ変更が反映されない状況が発生したら「DoEventsを入れてみる」というのが、１つの解決法のようです。

９９行目「Me.Image1.Left = 0」で、Imageの左端を「Page内部」の左端に合わせています。
１００行目「Me.Image1.Top = 0」で、Imageの上端を「Page内部」の上端に合わせています。
１０１行目「Me.Image1.Width = Me.MultiPage1.Pages(0).InsideWidth」で、Imageの横幅をPage内部一杯に延ばします。ここでInsideWidthを取得するページは「配置時に表面に出ているページ」または「途中で表面にしたページ」にする必要がありますので、１ページ目（ Pages(0) ）を指定しています。
１０２行目「Me.Image1.Height = Me.MultiPage1.Pages(0).InsideHeig」で、Imageの高さをPage内部一杯に延ばします。
１０３行目「Me.Image1.BorderColor = RGB(255, 0, 0)」で、Image外枠線の色を赤色に設定します。

起動したフォームが図１８です。（一番左側の図は、フォームの内側領域を明示しているものです。）

図１８別窓

図１８の中央と右側では、PageのFontサイズが異なっています。中央が（標準の）9ポイント、右側が18ポイントに設定変更したものです。
赤い枠線で囲まれ「Page1」「Page2」･･･のタブの下側が、Page内側の領域（＝Imageの外側）です。Frameコントロールよりは分かり易いですし、タブで領域が隠れてしまうこともありません。
なおFontサイズにより内側寸法が変わるのは同じで、サイズが大きくなる（図１８の右側図）と、内側領域も小さくなります。

５．まとめ

UserForm／Frame／MultiPage（Page）の「Width」「Heitht」及び「InsideWidth」「InsideHeight」の寸法は、図１９のようになります。青色が外側寸法（WidthとHeitht）、緑色が内側寸法（InsideWidthとInsideHeight）です。

図１９別窓

今回説明した内部寸法（InsideWidth、InsideHeight）は、そのコントロールのサイズ（Width、Heitht）が同じでも、Fontサイズや他プロパティにより値が変わってきます。また「InsideWidth」「InsideHeight」は、取得のみが可能なプロパティなので、必要なサイズを直接指定する訳にもいきません。
最終的には手調整しながらコントロールを配置するしか無いのでしょうが、今回の説明内容が少しでも参考になれば幸いです。

アプリ実例

「MonthViewコントロールを使ったカレンダー」
「Excel図形等の位置、ディスプレイ上の位置の取得」
「Book内で完結するフォーム表示のHelp画面」
「ラベルカレンダーをクリックし日付入力」
「年賀状リスト等の宛名検索（ブック内検索可）」