Popup Overlays

Popup は独立したウィンドウとしてコンテンツをフローティング表示するコントロールです。ToolTip とは異なり、ホバーで自動表示されず、プログラムから開閉を制御します。多くのオーバーレイコントロールの基盤として使われています。

概要

WPF の Popup は FrameworkElement を継承したコントロールで、メインウィンドウの上にフローティングするコンテンツを表示します。IsOpen プロパティを True に設定するとポップアップが表示され、False にすると非表示になります。

Popup は ToolTip、ComboBox のドロップダウン、Menu のサブメニューなど多くの標準コントロールで内部的に使用されています。低レベルなオーバーレイ UI を直接実装する場合に Popup を使用します。

StaysOpen が False（デフォルト）の場合、Popup 外をクリックすると自動的に閉じます。True にすると手動で閉じるまで表示されたままになります。

PlacementMode の多彩なオプションにより、対象要素の上下左右や画面座標など、柔軟な配置が可能です。HorizontalOffset と VerticalOffset で位置を微調整できます。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`IsOpen`	`bool`	True のときポップアップが表示されます。TwoWay バインドで ViewModel から開閉を制御するか、トグルボタンの IsChecked にバインドするパターンがよく使われます。IsOpen を True にした瞬間にポップアップが表示され、False にすると消えます。よくあるはまりポイントとして、IsOpen をバインドしているのに外側をクリックしても閉じない場合は `StaysOpen=False` の設定が漏れていることがほとんどです。IsOpen バインドと StaysOpen=False を必ずセットで設定することで、クリックアウトによる自動クローズが有効になります。
`StaysOpen`	`bool`	False（デフォルト）のときポップアップ外をクリックすると自動的に閉じます。True にすると手動で閉じるまで表示が続きます。StaysOpen=False の場合、ユーザーがポップアップ外をクリックすると IsOpen が自動で False になり、自然なクローズ動作を提供します。True にする場面は、明示的な閉じるボタンが必要なモーダルに近い UI や、ユーザーが内部コントロールを操作する間ポップアップを維持したい場合です。StaysOpen=True のまま閉じるロジックを実装しないと、ポップアップが閉じられなくなるため注意してください。
`AllowsTransparency`	`bool`	True にするとポップアップウィンドウが透明をサポートします。ドロップシャドウや角丸のポップアップを作成する際に必要です。
`Placement`	`PlacementMode`	ポップアップの配置基準を設定します。Mouse はカーソル付近、Bottom/Top は対象要素の上下、Left/Right は横、Center は対象要素の中央、Absolute は画面座標で配置します。Bottom はターゲット要素の真下に表示されるなど、各値によって PlacementTarget との相対位置が決まります。`Absolute` を使用すると PlacementTarget を無視して画面座標で配置されるため、PlacementRectangle や Offset と組み合わせて正確な位置を指定する必要があります。意図した位置になっているか必ず確認し、画面端や (0,0) に表示される場合は Placement の値と Offset の組み合わせを見直してください。
`PlacementTarget`	`UIElement`	ポップアップの配置基準となる要素を設定します。指定しない場合は視覚ツリー上の親要素が基準になります。DataTemplate 内で Popup を使用するとき、PlacementTarget を ElementName で指定しないと意図した要素を基準にできない場合があります。DataTemplate 内では `RelativeSource` で `TemplatedParent` を参照するか、PlacementTarget を明示的にバインドして正しい基準要素を設定してください。
`HorizontalOffset / VerticalOffset`	`double`	配置基準点からの水平・垂直オフセットを設定します。HorizontalOffset では正値で右方向、負値で左方向にずらし、VerticalOffset では正値で下方向、負値で上方向に微調整します。ただし Placement の値によってオフセットの向きが変わる場合があるため、Placement=Top などでは想定と逆方向に動くことがあります。思った方向に動かない場合は符号を反転させて試してください。
`PopupAnimation`	`None/Fade/Slide/Scroll`	ポップアップが開閉する際のアニメーションを設定します。AllowsTransparency=True の場合に効果があります。
`Child`	`UIElement`	ポップアップ内に表示するコンテンツを設定します。任意の WPF 要素を配置できます。

XAML 使用例

<!-- トグルボタンに連動するポップアップ -->
<Grid>
  <ToggleButton x:Name="toggleBtn" Content="オプションを開く"
               IsChecked="{Binding IsPopupOpen, Mode=TwoWay}" />
  <Popup IsOpen="{Binding IsPopupOpen, Mode=TwoWay}"
         StaysOpen="False"
         PlacementTarget="{Binding ElementName=toggleBtn}"
         Placement="Bottom"
         AllowsTransparency="True"
         PopupAnimation="Fade">
    <Border Background="White" BorderBrush="Gray"
            BorderThickness="1" CornerRadius="4"
            Padding="12">
      <StackPanel>
        <CheckBox Content="オプション 1" IsChecked="{Binding Opt1}" />
        <CheckBox Content="オプション 2" IsChecked="{Binding Opt2}" />
        <Button Content="適用" Command="{Binding ApplyCommand}"
                Margin="0,8,0,0" />
      </StackPanel>
    </Border>
  </Popup>
</Grid>

主な使用例

カスタムドロップダウンパネル — ボタンに連動してフィルターオプションや設定パネルをポップアップ表示します。
カラーピッカー — ボタンをクリックするとカラーパレットがポップアップ表示されるカスタムカラー選択 UI を実装します。
日付ピッカーのカレンダー — DatePicker のカレンダー部分は内部的に Popup で実装されています。カスタム日付ピッカーを作成する際に使用します。
通知バナー — 画面の端にフローティングで通知メッセージを表示する非モーダルな通知 UI に使用します。
コンテキストヘルプ — ヘルプボタンをクリックすると詳細な説明がポップアップ表示されるインラインヘルプを実装します。

ヒントとベストプラクティス

StaysOpen=False で自動クローズを活用 — ほとんどのケースでは StaysOpen=False が適切です。ポップアップ外をクリックすると自動で閉じる自然な動作を提供します。
アニメーションには AllowsTransparency が必要 — PopupAnimation を設定する場合は AllowsTransparency=True も設定します。
Popup は視覚ツリーから独立している — Popup 内の要素は、メインウィンドウの DataContext を継承しないことがあります。RelativeSource や Freezable を使ってバインドコンテキストを渡します。
フォーカス管理に注意 — Popup を開いてもフォーカスは自動では移動しません。Popup が開いたら内部の最初の要素にフォーカスを設定するコードが必要な場合があります。
Window の外に出られる — Popup は専用の HWND ウィンドウとして描画されるため、親ウィンドウの境界をはみ出して表示できます。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。

GitHub で Popup のソースコードを見る →