


 
 
 
 
 
 
 |
DelphiXE4 [FMX]吹き出しパネル(CalloutPanel) 2015/04/07 |
前回は[Standard]内の「パネル(Panel)」について記述しましたので、今回は、同じく[Standard]内の「吹き出しパネル(CalloutPanel)」について記述します。これはDelphi2010、XE3・XE4のVCLアプリケーションにはありません。
【DelphiXE3[FMXアプリケーション]の記事はこちら】
XE4(FMX)
FMX.StdCtrls.TCalloutPanel |
XE3(FMX)
FMX.Controls.TCalloutPanel |
 |  |
 |  |
(ヘルプより)
CalloutLength
デフォルトではTCalloutPanelは、吹き出しのポインタを、その辺のうちの1つの上に二等辺三角形としてレンダリングするTCalloutRectangleを使用します。CalloutLengthは、この三角形の高さです。この三角形は、TCalloutPanelオブジェクトの境界四角形ShapeRect 内に含まれます。このため、CalloutLengthが長くなるにつれて、吹き出しパネル自身の高さ(または幅)は小さくなり、逆もまた然りです。三角形の長さが変更される際に境界四角形を同じサイズに維持するには、CalloutLengthが、三角形が現れる側に応じて、吹き出しパネルTCalloutPanel自身の高さまたは幅を変更する必要があります。 |
CalloutOffset
吹き出しポインタの位置を、それが表示される側の中央または端を基準に表します。 |
デフォルトでは、TCalloutPanelは、吹き出しのポインタ(関心のある領域を指すビジュアル要素)を、その辺のうちの1つの上に二等辺三角形としてレンダリングする、TCalloutRectangleを使用します。CalloutPositionは、三角形が現れる側を定義します。
CalloutOffset は、次の条件に従って実装された吹き出しポインタのオフセットです。
CalloutOffset がゼロの場合、吹き出しポインタは指定された側の中央に配置。
CalloutOffset が正数の場合、吹き出しポインタの角に対して最も近い頂点が、次の側の上での CalloutOffset オフセットを持ちます:
cpTop-- 左上隅から右へのオフセット。
cpLeft-- 左上隅から下へのオフセット。
cpRight-- 右上隅から下へのオフセット。
cpBottom-- 左下隅から右へのオフセット。
CalloutOffset が負数の場合、吹き出しポインタの角に対して最も近い頂点が、次の側の上での CalloutOffset オフセットを持ちます:
cpTop-- 右上隅から左へのオフセット。
cpLeft-- 左下隅から上へのオフセット。
cpRight-- 右下隅から上へのオフセット。
cpBottom-- 右下隅から左へのオフセット。 |
CalloutPosition
吹き出しのポインタが現れる側を定義します。
CalloutPositionを、TCalloutPositionで定義されている cpTop、cpLeft、cpBottom、または cpRight の定数のうちの 1 つに設定して、吹き出しのポインタが現れる側を定義します。
デフォルトでは、吹き出しのポインタは、上側に現れます(CalloutPosition = cpTop)。 |
TCalloutPosition
定数 | 意味 |
cpTop | 上側の辺 |
cpLeft | 左側の辺 |
cpBottom | 下側の辺 |
cpRight | 右側の辺 |
|
CalloutWidth
デフォルトでは TCalloutPanel は、吹き出しのポインタを、その辺のうちの 1 つの上に二等辺三角形としてレンダリングする、TCalloutRectangle を使用します。CalloutWidth は、三角形のベースの長さです。 |
|
ユニットが変わっており、グループボックス同様、オブジェクトインスペクタでのプロパティに TabOrderプロパティが追加されています。しかしながらこの TabOrderプロパティは グループボックス同様、オブジェクトインスペクタで数値を変更しても、[Tab]順序は変わってくれませんのでほとんど意味はありません。
吹き出しパネルのクライアント領域を確認するため、ClipChildrenプロパティを「True」にして、吹き出しパネル上にパネルを配置してみます。
・パネルのAlignプロパティを「alNone」のまま大きくしてみます
吹き出し用の三角は隠されてしまいました。
・パネルのAlignプロパティを「alClient」にしてみます
吹き出し用の三角は除外されるようです。
次に、CalloutLengthプロパティ値を変えてみます。
デフォルト値は「11」です。「20」に変えてみます。
吹き出し用の三角の高さが大きくなりますね。
吹き出しパネル全体の高さは同じです。
次に、CalloutOffsetプロパティ値を変えてみます。
デフォルト値は「0」です。「0」は中央を表す様子です。「1」に変えてみます。
次に、「110」に変えてみます。呼び出しパネルの横幅(Width)は「120」です。
はみ出してしまいました。
反対側から指定する場合はマイナス値で与えれば良いようです。
「-1」にしてみます。
次に、CalloutPositionプロパティ値を変えてみます。
CalloutOffsetプロパティ値は「10」にしておきます。
cpTop
 |
cpBottom
 |
cpLeft
 |
cpRight
 |
次に、CalloutWidthプロパティ値を変えてみます。
デフォルト値は「23」です。「50」に変えてみます。
吹き出し用の三角の底辺が大きくなりますね。
次に、スタイルブックを貼り付けて、スタイル「Air.Style」を指定し
パネルと比較してみます。
吹き出し用三角を除けば、パネルと同じ感じで使えますね。
但し、吹き出しパネル内に配置したコントロールのAlignプロパティを指定してレイアウトするような場合は、そのまま使ってしまうと吹き出し用三角を隠してしまうので、例えば、吹き出しパネル内にパネルを配置してパネルのAlignプロパティを「AlClient」にしてから、パネル上に各コントロールを貼り付ける、というような事をしないとまずいかもしれません。
下図のように画面レイアウトしてみました。
パネルは、グループボックス同様、フォーカスを持ちません。
指定無し |
Air.Style |

Amakrits.Style |

AquaGraphite.style |

Blend.Style |

Dark.style |

GoldenGraphite.Style |

Light.Style |

RubyGraphite.style |

Transparent.Style |
MacOSX アプリケーションでも動作OKです。
|
|
バッチファイル
BASIC
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Delphi入門編
>Delphi2010
>DelphiXE3
>DelphiXE4
△TOP
▲2015/04/06
2015/04/07
▼2015/04/08
シェアウェア
Script!World
データベース
|