ポップアップの概要

  • [アーティクル]

Popup コントロールには、指定された要素や画面座標を基準として現在のアプリケーション ウインドウの上を浮動する別のウィンドウにコンテンツを表示する方法が用意されています。 このトピックでは、Popup コントロールとその使用方法について説明します。

ポップアップとは

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

注意

マウス ポインターをその親オブジェクトの上に移動しても、Popup が自動的に開くことはありません。 Popup が自動的に開くようにするには、ToolTip クラスまたは ToolTipService クラスを使用します。 詳細については、ToolTip の概要を参照してください。

ポップアップの作成

次の例では、ToggleButton コントロールの子要素である Popup コントロールを定義する方法を示します。 ToggleButton は子要素を 1 つしか持てないため、この例では ToggleButton コントロールと Popup コントロールのテキストを StackPanel 内に配置しています。 Popup の内容は、アプリケーション ウィンドウの関連する ToggleButton コントロールの近くに浮動表示される別のウィンドウ内に表示されます。

<ToggleButton x:Name="TogglePopupButton" Height="30" Width="150" HorizontalAlignment="Left">
    <StackPanel>
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
            <Run Text="Is button toggled? " />
            <Run Text="{Binding IsChecked, ElementName=TogglePopupButton}" />
        </TextBlock>

        <Popup Name="myPopup" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton}">
            <Border BorderThickness="1">
                <TextBlock Name="myPopupText" Background="LightBlue" Foreground="Blue" Padding="30">
                Popup Text
                </TextBlock>
            </Border>
        </Popup>
    </StackPanel>
</ToggleButton>

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

Popup コントロールは他のコントロール内に作成できます。 次のコントロールでは、特定の使用目的で Popup コントロールが実装されています:

  • ToolTip。 要素のツールヒントを作成する場合は、ToolTip クラスと ToolTipService クラスを使用します。 詳細については、ToolTip の概要を参照してください。

  • ContextMenu. 要素のコンテキスト メニューを作成する場合は、ContextMenu コントロールを使用します。 詳細については、ContextMenu の概要を参照してください。

  • ComboBox. 表示または非表示にできるドロップダウン リスト ボックスがある選択コントロールを作成する場合は、ComboBox コントロールを使用します。

  • Expander. コンテンツを表示する折りたたみ可能な領域を持つヘッダーを表示するコントロールを作成する場合は、Expander コントロールを使用します。 詳細については、 Expander の概要を参照してください。

Popup コントロールには、その動作と外観をカスタマイズできる機能が用意されています。 たとえば、開くときと閉じるときの動作、アニメーション、不透明度とビットマップ効果、Popup のサイズと位置を設定できます。

オープンとクローズの動作

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

Popup のコンテンツ ウィンドウが開かれるか、閉じられると、Opened イベントおよび Closed イベントが発生します。

アニメーション

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

Storyboard のようなアニメーションを Popup コントロールに適用することもできます。

不透明度とビットマップ効果

Popup コントロールの Opacity プロパティによって、その内容が影響を受けることはありません。 既定では、Popup のコンテンツ ウィンドウは非透過的です。 透過的な Popup を作成するには、AllowsTransparency プロパティを true に設定します。

Popup の内容では、Popup コントロールまたは親ウィンドウの他の要素に直接設定されているビットマップ効果 (DropShadowBitmapEffect など) は継承されません。 ビットマップ効果が Popup の内容に表示されるにするには、その内容に直接ビットマップ効果を設定する必要があります。 たとえば、Popup の子が StackPanel の場合は、StackPanel にビットマップ効果を設定します。

既定では、Popup のサイズはその内容に合わせて自動的に調整されます。 自動サイズ調整が発生したとき、Popup の内容に対して定義された画面領域の既定のサイズがビットマップ効果を表示するのに十分でないため、一部のビットマップ効果が非表示になる場合があります。

Popup の内容に RenderTransform を設定すると、内容が見えにくくなることもあります。 このシナリオでは、変換された Popup が元の Popup の領域からはみ出して拡大された場合、一部の内容が隠れる場合があります。 ビットマップ効果または変換によって必要な領域が増える場合、より多くの領域をコントロールに提供するために、Popup のコンテンツの周囲に余白を定義することができます。

ポップアップ位置の定義

ポップアップの位置は、PlacementTarget、PlacementRectangle、Placement、HorizontalOffset、VerticalOffsetProperty の各プロパティで設定できます。 詳細については、「Popup Placement Behavior」を参照してください。 画面に 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 の内容の論理的な親のままになります。

関連項目