ポップアップの配置動作

Popup コントロールは、アプリケーション ウィンドウの上にフロート表示される別のウィンドウ内にコンテンツを表示します。 Popup の位置は、PlacementTarget、Placement、PlacementRectangle、HorizontalOffset、VerticalOffset の各プロパティを使用して、コントロール、マウス、または画面を基準に指定できます。 これらのプロパティが連携することで、Popup の位置を柔軟に指定できます。

メモ
ToolTip クラスと ContextMenu クラスも、これらの 5 つのプロパティと動作を同じように定義します。

このトピックは、次のセクションで構成されています。

• ポップアップの配置
• 用語の定義 : ポップアップの構造
• プロパティの連携のしくみ
• ポップアップが画面の端に当たった場合
• 関連トピック

ポップアップの配置

Popup の配置は、UIElement または画面全体を基準に指定できます。 次の例では、UIElement (この例ではイメージ) を基準とする 4 つの Popup コントロールを作成します。 どの Popup コントロールについても、PlacementTarget プロパティが image1 に設定されますが、それぞれの Popup の配置プロパティには異なる値が指定されます。

<Canvas Width="200" Height="150">
  <Image Name="image1"
         Canvas.Left="75" 
         Source="Water_lilies.jpg" Height="200" Width="200"/>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Bottom">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Bottom</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Top">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Top</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Left">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Left</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Right">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Right</TextBlock>

  </Popup>
</Canvas>

次の図は、イメージと Popup コントロールを示しています。

4 つのポップアップを持つイメージ

この簡単な例は、PlacementTarget プロパティと Placement プロパティの設定方法を示していますが、PlacementRectangle、HorizontalOffset、VerticalOffset の各プロパティを使用することで、Popup の配置をより詳細に制御できます。

用語の定義 : ポップアップの構造

PlacementTarget、Placement、PlacementRectangle、HorizontalOffset、VerticalOffset の各プロパティの相互連携と Popup との関係を理解するうえで、次の用語の定義を理解しておくと便利です。

• ターゲット オブジェクト

• ターゲット領域

• ターゲットの基点

• ポップアップの配置点

これらの用語は、Popup やそれが関連付けられた制御のさまざまな側面を表現するのに便利です。

ターゲット オブジェクト

ターゲット オブジェクトは、Popup が関連付けられる要素です。 PlacementTarget プロパティが設定されると、それがターゲット オブジェクトを指定します。 PlacementTarget が設定されておらず、Popup に親がある場合、親がターゲット オブジェクトです。 PlacementTarget 値も親もない場合、ターゲット オブジェクトはなく、Popup は画面を基準に配置されます。

次の例は、Canvas の子である Popup を作成します。 この例は、Popup の PlacementTarget プロパティを設定しません。 Placement の既定値は PlacementMode.Bottom なので、Popup は Canvas の下に表示されます。

<Canvas Margin="5" Background="Red" Width="200" Height="150" >

  <Ellipse Canvas.Top="60" Canvas.Left="50"
           Height="85" Width="60" 
           Fill="Black"/>

  <Popup IsOpen="True" >
    <TextBlock Background="LightBlue" FontSize="18">This is a Popup</TextBlock>
  </Popup>
</Canvas>

次の図は、Popup が Canvas を基準に表示されることを示しています。

PlacementTarget のないポップアップ

次の例は、Canvas の子である Popup を作成しますが、今回は PlacementTarget が ellipse1 に設定されるので、ポップアップは Ellipse の下に表示されます。

<Canvas Margin="5" Background="Red" Width="200" Height="150" >

  <Ellipse Name="ellipse1"
           Canvas.Top="60" Canvas.Left="50"
           Height="85" Width="60" 
           Fill="Black"/>

  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=ellipse1}">
    <TextBlock Background="LightBlue" FontSize="18">This is a Popup</TextBlock>
  </Popup>
</Canvas>

次の図は、Popup が Ellipse を基準に表示されることを示しています。

PlacementTarget が指定されたポップアップ

メモ
ToolTip の場合、Placement の既定値は Mouse です。ContextMenu の場合、Placement の既定値は MousePoint です。これらの値については、「プロパティの連携のしくみ」で説明します。

ターゲット領域

ターゲット領域は、Popup の相対位置指定の基準となる、画面上の領域です。 前の例では、Popup はターゲット オブジェクトの境界に揃えられていますが、場合によっては、Popup にターゲット オブジェクトがあったとしても、Popup が他の境界に揃えられることがあります。 PlacementRectangle プロパティが設定されると、ターゲット領域はターゲット オブジェクトの境界ではなくなります。

次の例は、2 つの Canvas オブジェクトを作成します。それぞれに、Rectangle と Popup が 1 つずつあります。 どちらについても、Popup のターゲット オブジェクトは Canvas です。 最初の Canvas の Popup には PlacementRectangle が設定され、X、Y、Width、Height の各プロパティがそれぞれ 50、50、50、100 に指定されます。 2 番目の Canvas の Popup には PlacementRectangle が設定されません。 この結果、最初の Popup は PlacementRectangle の下に配置され、2 番目の Popup は Canvas の下に配置されます。 また、各 Canvas には、最初の Popup の PlacementRectangle と同じ境界を持つ Rectangle があります。 PlacementRectangle は、表示される要素をアプリケーションに作成しません。この例では、PlacementRectangle を表すために Rectangle を作成します。

<StackPanel Orientation="Horizontal" Margin="50,50,0,0">

  <Canvas Width="200" Height="200" Background="Red">
    <Rectangle Canvas.Top="50" Canvas.Left="50" 
               Width="50" Height="100"
               Stroke="White" StrokeThickness="3"/>
    <Popup IsOpen="True" PlacementRectangle="50,50,50,100">
      <TextBlock FontSize="14" Background="Yellow"
                 Width="140" TextWrapping="Wrap">
        This is a popup with a PlacementRectangle.
      </TextBlock>
    </Popup>
  </Canvas>

  <Canvas Width="200" Height="200" Background="Red" Margin="30,0,0,0">
    <Rectangle Canvas.Top="50" Canvas.Left="50" 
               Width="50" Height="100"
               Stroke="White" StrokeThickness="3"/>
    <Popup IsOpen="True">
      <TextBlock FontSize="14" Background="Yellow"
                 Width="140" TextWrapping="Wrap">
        This is a popup without a PlacementRectangle.
      </TextBlock>
    </Popup>
  </Canvas>

</StackPanel>

次の図は、前の例の結果を示しています。

PlacementRectangle が指定されたポップアップと指定されていないポップアップ

ターゲットの基点とポップアップの配置点

ターゲットの基点およびポップアップの配置点は、それぞれターゲット領域およびポップアップの参照ポイントで、位置決めに使用されます。 HorizontalOffset プロパティと VerticalOffset プロパティを使用して、ポップアップのターゲット領域からのオフセットを指定できます。 HorizontalOffset と VerticalOffset は、ターゲットの基点およびポップアップの配置点を基準とします。 Placement プロパティの値は、ターゲットの基点およびポップアップの配置点の位置を指定します。

Popup を作成し、HorizontalOffset プロパティと VerticalOffset プロパティを 20 に設定する例を次に示します。 Placement プロパティは Bottom (既定値) に設定されているため、ターゲットの基点はターゲット領域の左下隅になり、ポップアップの配置点は Popup の左上隅になります。

<Canvas Width="200" Height="200" Background="Yellow" Margin="20">
  <Popup IsOpen="True" Placement="Bottom"
         HorizontalOffset="20" VerticalOffset="20">
    <TextBlock FontSize="14" Background="#42F3FD">
      This is a popup.
    </TextBlock>
  </Popup>
</Canvas>

次の図は、前の例の結果を示しています。

HorizontalOffset と VerticalOffset が指定されたポップアップ

プロパティの連携のしくみ

ターゲット領域、ターゲットの基点、およびポップアップの配置点を正しく把握するには、PlacementTarget、PlacementRectangle、および Placement の値をまとめて考慮する必要があります。 たとえば、Placement の値が Mouse の場合、ターゲット オブジェクトはなく、PlacementRectangle は無視され、ターゲット領域はマウス ポインターの境界になります。 一方、Placement が Bottom の場合、PlacementTarget または親がターゲット オブジェクトを決定し、PlacementRectangle がターゲット領域を決定します。

次の表は、ターゲット オブジェクト、ターゲット領域、ターゲットの基点、およびポップアップの配置点について、PlacementTarget と PlacementRectangle が各 PlacementMode 列挙値で使用されるかどうかを示しています。

PlacementMode	ターゲット オブジェクト	ターゲット領域	ターゲットの基点	ポップアップの配置点
Absolute	該当なし PlacementTarget は無視されます。	画面、または設定された場合は PlacementRectangle。 PlacementRectangle は画面を基準にします。	ターゲット領域の左上隅。	Popup の左上隅。
AbsolutePoint	適用できません。 PlacementTarget は無視されます。	画面、または設定された場合は PlacementRectangle。 PlacementRectangle は画面を基準にします。	ターゲット領域の左上隅。	Popup の左上隅。
Bottom	PlacementTarget または親。	ターゲット オブジェクト、または設定された場合は PlacementRectangle。 PlacementRectangle はターゲット オブジェクトを基準にします。	ターゲット 領域の左下隅。	Popup の左上隅。
Center	PlacementTarget または親。	ターゲット オブジェクト、または設定された場合は PlacementRectangle。 PlacementRectangle はターゲット オブジェクトを基準にします。	ターゲット領域の中心。	Popup の中心。
Custom	PlacementTarget または親。	ターゲット オブジェクト、または設定された場合は PlacementRectangle。 PlacementRectangle はターゲット オブジェクトを基準にします。	CustomPopupPlacementCallback によって定義。	CustomPopupPlacementCallback によって定義。
Left	PlacementTarget または親。	ターゲット オブジェクト、または設定された場合は PlacementRectangle。 PlacementRectangle はターゲット オブジェクトを基準にします。	ターゲット領域の左上隅。	Popup の右上隅。
Mouse	適用できません。 PlacementTarget は無視されます。	マウス ポインターの境界。 PlacementRectangle は無視されます。	ターゲット 領域の左下隅。	Popup の左上隅。
MousePoint	適用できません。 PlacementTarget は無視されます。	マウス ポインターの境界。 PlacementRectangle は無視されます。	ターゲット領域の左上隅。	Popup の左上隅。
Relative	PlacementTarget または親。	ターゲット オブジェクト、または設定された場合は PlacementRectangle。 PlacementRectangle はターゲット オブジェクトを基準にします。	ターゲット領域の左上隅。	Popup の左上隅。
RelativePoint	PlacementTarget または親。	ターゲット オブジェクト、または設定された場合は PlacementRectangle。 PlacementRectangle はターゲット オブジェクトを基準にします。	ターゲット領域の左上隅。	Popup の左上隅。
Right	PlacementTarget または親。	ターゲット オブジェクト、または設定された場合は PlacementRectangle。 PlacementRectangle はターゲット オブジェクトを基準にします。	ターゲット領域の右上隅。	Popup の左上隅。
Top	PlacementTarget または親。	ターゲット オブジェクト、または設定された場合は PlacementRectangle。 PlacementRectangle はターゲット オブジェクトを基準にします。	ターゲット領域の左上隅。	Popup の左下隅。

次の図は、PlacementMode 値ごとの Popup、ターゲット オブジェクト、ターゲット領域、ターゲットの基点、およびポップアップの配置点を示しています。 各図では、ターゲット領域は黄で、Popup は青で示されます。

Placement が Absolute または AbsolutePoint

Placement が Bottom

Placement が Center

Placement が Left

Placement が Mouse

Placement が MousePoint

Placement が Relative または RelativePoint

Placement が Right

Placement が Top

ポップアップが画面の端に当たった場合

セキュリティ上の理由から、Popup が画面の端で隠れることはありません。 Popup が画面の端に当たった場合、ポップアップは次の 3 つのどれかを実行します。

• Popup が隠れる画面の端に沿って再配置される。

• 別のポップアップの配置点を使用する。

• 別のターゲットの基準とポップアップの配置点を使用する。

これらのオプションについては、このセクションで後ほど説明します。

画面の端に当たった場合の Popup の動作は、Placement プロパティの値とポップアップが当たった画面の端によって異なります。 次の表は、Popup が画面の端に当たったときの動作を PlacementMode 値別に示しています。

PlacementMode	上端	下端	左端	右端
Absolute	上端に揃えます。	下端に揃えます。	左端に揃えます。	右端に揃えます。
AbsolutePoint	上端に揃えます。	ポップアップの配置点が Popup の左下隅に変わります。	左端に揃えます。	ポップアップの配置点が Popup の右上隅に変わります。
Bottom	上端に揃えます。	ターゲットの基準がターゲット領域の左上隅に変わり、ポップアップの配置点が Popup の左下隅に変わります。	左端に揃えます。	右端に揃えます。
Center	上端に揃えます。	下端に揃えます。	左端に揃えます。	右端に揃えます。
Left	上端に揃えます。	下端に揃えます。	ターゲットの基準がターゲット領域の右上隅に変わり、ポップアップの配置点が Popup の左上隅に変わります。	右端に揃えます。
Mouse	上端に揃えます。	ターゲットの基準がターゲット領域 (マウス ポインターの境界) の左上隅に変わり、ポップアップの配置点が Popup の左下隅に変わります。	左端に揃えます。	右端に揃えます。
MousePoint	上端に揃えます。	ポップアップの配置点が Popup の左下隅に変わります。	左端に揃えます。	ポップアップの配置点がポップアップの右上隅に変わります。
Relative	上端に揃えます。	下端に揃えます。	左端に揃えます。	右端に揃えます。
RelativePoint	上端に揃えます。	ポップアップの配置点が Popup の左下隅に変わります。	左端に揃えます。	ポップアップの配置点がポップアップの右上隅に変わります。
Right	上端に揃えます。	下端に揃えます。	左端に揃えます。	ターゲットの基準がターゲット領域の左上隅に変わり、ポップアップの配置点が Popup の右上隅に変わります。
Top	ターゲットの基準がターゲット領域の左下隅に変わり、ポップアップの配置点が Popup の左上隅に変わります。 これは実質的に Placement が Bottom の場合と同じです。	下端に揃えます。	左端に揃えます。	右端に揃えます。

画面の端に対する整列

Popup 全体が画面内に表示されるように再配置することによって、Popup を画面の端に揃えることができます。 この動作が実行されると、ターゲットの基準とポップアップの配置点との間の距離が HorizontalOffset と VerticalOffset の値と違ってくることがあります。 Placement が Absolute、Center、または Relative の場合、Popup はすべての画面の端に揃えられます。 たとえば、Popup で Placement が Relative、VerticalOffset が 100 に設定されているとします。 画面の下端によって Popup の全部または一部が隠される場合、Popup は画面の下隅に沿って再配置され、ターゲットの基点とポップアップの配置点との垂直方向の距離は 100 未満になります。 次の図にこの状況を示します。

画面の下端に揃えたポップアップ

ポップアップの配置点の変化

Placement が AbsolutePoint、RelativePoint、または MousePoint の場合、ポップアップが画面の下端または右端に当たるとポップアップの配置点は変わります。

次の図は、画面の下端が Popup の全部または一部を隠す場合、ポップアップの配置点は Popup の左下隅になることを示しています。

ポップアップが画面の下端に当たってポップアップの配置点が変わる場合

次の図は、Popup が画面の右端で隠れる場合に、ポップアップの配置点が Popup の右上隅になることを示しています。

ポップアップが画面の右端に当たってポップアップの配置点が変わる場合

Popup が画面の下端と右端に当たる場合、ポップアップの配置点は Popup の右下隅になります。

ターゲットの基点とポップアップの配置点の変化

Placement が Bottom、Left、Mouse、Right、または Top の場合、ターゲットの基準とポップアップの配置点は画面のいずれかの端に当たると変わります。 画面のどの端によって位置が変化するかは、PlacementMode 値よって異なります。

次の図は、Placement が Bottom で Popup が画面の下端に当たった場合に、ターゲットの基準はターゲット領域の左上隅になり、ポップアップの配置点は Popup の左下隅になることを示しています。

Placement が Bottom でポップアップが画面の下端に当たる場合

次の図は、Placement が Left で Popup が画面の左端に当たった場合に、ターゲットの基準はターゲット領域の右上隅になり、ポップアップの配置点は Popup の左上隅になることを示しています。

Placement が Left でポップアップが画面の左端に当たる場合

次の図は、Placement が Right で Popup が画面の右端に当たった場合に、ターゲットの基準はターゲット領域の左上隅になり、ポップアップの配置点は Popup の右上隅になることを示しています。

Placement が Right でポップアップが画面の右端に当たる場合

次の図は、Placement が Top で Popup が画面の上端に当たった場合に、ターゲットの基準はターゲット領域の左下隅になり、ポップアップの配置点は Popup の左上隅になることを示しています。

Placement が Top でポップアップが画面の上端に当たる場合

次の図は、Placement が Mouse で Popup が画面の下端に当たった場合に、ターゲットの基準はターゲット領域 (マウス ポインターの境界) の左上隅になり、ポップアップの配置点は Popup の左下隅になることを示しています。

Placement が Mouse でポップアップが画面の下端に当たる場合

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

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

参照

その他の技術情報

Popup の配置のサンプル