ポップアップの概要

[アーティクル]
09/17/2008

更新 : 2007 年 11 月

Popup コントロールは、現在のアプリケーションウィンドウの上の別のウィンドウにコンテンツを表示するための手段です。ウィンドウの表示位置は、特定の要素を基準として、または画面座標として指定されます。ここでは、Popup コントロールの概要と、使用方法に関する情報を示します。

このトピックには次のセクションが含まれています。

ポップアップとは
ポップアップの作成
ポップアップを実装するコントロール
ポップアップの動作および外観
ポップアップの位置の定義
ポップアップとビジュアルツリー
関連トピック

ポップアップとは

Popup コントロールは、画面上の要素または点を基準として別のウィンドウにコンテンツを表示します。Popup が表示されているときは、IsOpen プロパティが true に設定されています。

メモ :
Popup は、マウスポインタが親オブジェクト上に移動したときに自動的に開くわけではありません。Popup が自動的に開くようにする場合は、ToolTip クラスまたは ToolTipService クラスを使用します。詳細については、「ToolTip の概要」を参照してください。

ポップアップの作成

Button コントロールの子要素である Popup コントロールを定義する方法を次の例に示します。Button が持つことのできる子要素は 1 つだけであるので、この例では、Button コントロールおよび Popup コントロールのテキストを StackPanel の中に配置します。Popup のコンテンツは TextBlock コントロールに表示されます。このコントロールのテキストは、アプリケーションウィンドウ上の、関連付けられた Button コントロールの近くにフロート表示される別のウィンドウに表示されます。

<Button HorizontalAlignment="Left" Click="DisplayPopup" 
        Width="150" Margin="20,10,0,0">
  <StackPanel>
    <TextBlock>Display Your Popup Text</TextBlock>
    <Popup Name="myPopup">
      <TextBlock Name="myPopupText" 
                 Background="LightBlue" 
                 Foreground="Blue">
        Popup Text
      </TextBlock>
    </Popup>
  </StackPanel>
</Button>

<Button Name="ButtonForPopup" HorizontalAlignment="Left" 
        Click="CreatePopup"  
        Width="150" Margin="20,10,0,0">
  <StackPanel Name="aStackPanel">
    <TextBlock>Create Popup</TextBlock>
  </StackPanel>
</Button>

ポップアップを実装するコントロール

Popup コントロールは、他のコントロールの中に組み込むことができます。次のコントロールは、特定の使用目的の Popup コントロールを実装します。

ToolTip. 要素のツールヒントを作成する場合は、ToolTip クラスと ToolTipService クラスを使用します。詳細については、「ToolTip の概要」を参照してください。
ContextMenu. 要素のコンテキストメニューを作成する場合は、ContextMenu コントロールを使用します。詳細については、「ContextMenu の概要」を参照してください。
ComboBox. 表示と非表示の切り替えが可能なドロップダウンリストボックスを持つ選択コントロールを作成する場合は、ComboBox コントロールを使用します。
Expander. コンテンツを表示するための折りたたみ可能な領域を持つヘッダーを表示するコントロールを作成する場合は、Expander コントロールを使用します。詳細については、「エキスパンダの概要」を参照してください。

ポップアップの動作および外観

Popup コントロールには、その動作および外観をカスタマイズするための機能があります。たとえば、開く動作と閉じる動作、アニメーション、透過度効果とビットマップ効果、および Popup のサイズと位置を設定できます。

開く/閉じるの動作

Popup コントロールのコンテンツが表示されるのは、IsOpen プロパティが true に設定されているときです。既定の設定では、IsOpen プロパティが false に設定されるまでは Popup が開いたままになります。この既定の動作を変更するには、StaysOpen プロパティを false に設定します。このプロパティが false に設定されると、Popup コンテンツウィンドウがマウスキャプチャを持ちます。Popup ウィンドウの外部でマウスイベントが発生すると、Popup はマウスキャプチャを失い、ウィンドウが閉じます。

Popup コンテンツウィンドウが開いたときと閉じたときに、Opened イベントおよび Closed イベントが発生します。

アニメーション

Popup コントロールには、フェードインやスライドインのような動作に関連付けられているアニメーションのサポートが組み込まれています。このようなアニメーションを有効にするには、PopupAnimation プロパティを PopupAnimation 列挙値に設定します。Popup アニメーションを正常に動作させるためには、AllowsTransparency プロパティを true に設定する必要があります。

Storyboard のようなアニメーションを Popup コントロールに適用することもできます。例については、「アニメーション化された Popup のサンプル」を参照してください。

透過度効果とビットマップ効果

Popup コントロールの Opacity プロパティは、コンテンツには影響しません。既定の設定では、Popup コンテンツウィンドウは不透明です。透明の Popup を作成するには、AllowsTransparency プロパティを true に設定します。

Popup のコンテンツは、DropShadowBitmapEffect などのビットマップ効果を継承しません。ビットマップ効果は、Popup コントロールに対して直接設定されることも、親ウィンドウのその他の要素に対して設定されることもあります。ビットマップ効果を Popup のコンテンツに反映させるには、ビットマップ効果を直接コンテンツに対して設定する必要があります。たとえば、Popup の子が StackPanel の場合は、StackPanel に対してビットマップ効果を設定します。

ポップアップのサイズ

既定の設定では、Popup のサイズはコンテンツに合わせて自動的に調整されます。自動サイズ変更が行われたときに、ビットマップ効果の一部が反映されなくなることがあります。Popup のコンテンツに対して定義された画面領域の既定のサイズが、ビットマップ効果を表示するのに十分ではない場合です。

また、コンテンツに対して RenderTransform を設定した場合も、Popup のコンテンツが隠されることがあります。このシナリオでは、変換後の Popup の領域が元の Popup の領域よりも広い場合に、一部のコンテンツが非表示になります。ビットマップ効果または変換のために広い領域が必要な場合は、Popup コンテンツの周囲のマージンを定義して、コントロールの領域を広げます。詳細および例については、「アニメーション化された Popup のサンプル」を参照してください。

ポップアップの位置の定義

ポップアップの配置は、PlacementTarget、PlacementRectangle、Placement、HorizontalOffset、VerticalOffsetProperty の各プロパティを設定して指定できます。詳細については、「ポップアップの配置動作」を参照してください。Popup が画面に表示されると、その親の位置が変更された場合でも、それ自体の位置は変更されません。

ポップアップの配置のカスタマイズ

Popup コントロールを表示する位置を、PlacementTarget を基準とする相対座標として指定することで、Popup の配置をカスタマイズできます。

配置をカスタマイズするには、Placement プロパティを Custom に設定します。次に、Popup で使用可能な配置ポイントおよび主軸のセット (優先度順) を返す CustomPopupPlacementCallback デリゲートを定義します。Popup の最大部分を示すポイントは、自動的に選択されます。例については、「方法 : ポップアップのカスタム位置を指定する」を参照してください。

ポップアップとビジュアルツリー

Popup コントロールは独自のビジュアルツリーを持たないので、Popup の MeasureOverride メソッドが呼び出されると、代わりにサイズ 0 を返します。ただし、Popup の IsOpen プロパティを true に設定すると、独自のビジュアルツリーを持つ新しいウィンドウが作成されます。新しいウィンドウには、Popup の Child コンテンツが表示されます。新しいウィンドウの幅と高さは、最大で画面の幅または高さの 75% までです。

Popup コントロールは、論理上の子として Child コンテンツへの参照を保持します。新しいウィンドウが作成されたときに、Popup のコンテンツはビジュアルツリー上でウィンドウの子になりますが、Popup の論理上の子のままです。逆に、Popup は、Child コンテンツの論理上の親のままです。