次の方法で共有


ポップアップの概要

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

ポップアップとは

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

手記

マウス ポインターが親オブジェクトの上に移動しても、Popup は自動的には開きません。 Popup を自動的に開く場合は、ToolTip クラスまたは ToolTipService クラスを使用します。 詳細については、「ツールヒントの概要参照してください。

ポップアップの作成

次の例では、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 クラスを使用します。 詳細については、「ツールヒントの概要参照してください。

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

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

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

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

開く/閉じる動作

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

Opened イベントと Closed イベントは、Popup コンテンツ ウィンドウが開いているか閉じられたときに発生します。

アニメーション

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

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

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

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

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

既定では、Popup はコンテンツに合わせて自動的にサイズ設定されます。 自動サイズ変更が行われると、Popup コンテンツに定義されている画面領域の既定のサイズではビットマップ効果を表示するための十分な領域が提供されないため、一部のビットマップ効果が非表示になる可能性があります。

コンテンツ PopupRenderTransform を設定すると、コンテンツが隠れることがあります。 このシナリオでは、変換された Popup のコンテンツが元の Popupの領域を超えた場合、一部のコンテンツが非表示になる可能性があります。 ビットマップ効果または変換により多くの領域が必要な場合は、コントロールの領域を増やすために、Popup コンテンツの周囲に余白を定義できます。

ポップアップ位置の定義

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

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

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

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

Popup コントロールには独自のビジュアル ツリーがありません。PopupMeasureOverride メソッドが呼び出されると、代わりに 0 (ゼロ) のサイズが返されます。 ただし、PopupIsOpen プロパティを trueに設定すると、独自のビジュアル ツリーを持つ新しいウィンドウが作成されます。 新しいウィンドウには、PopupChild コンテンツが含まれています。 新しいウィンドウの幅と高さは、画面の幅または高さの 75% を超えることはできません。

Popup コントロールには、その Child の内容に対する参照が、論理的な子として維持されています。 新しいウィンドウが作成されると、Popup の内容はウィンドウの視覚的な子になり、Popupの論理子のままです。 逆に、PopupChild のコンテンツの論理的な親として残ります。

関連項目