ポップアップ配置の動作

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

ポップアップの配置

Popupの配置は、UIElementまたは画面全体に対して相対的に指定できます。 次の例では、Popup (この場合はイメージ) に対して相対的な 4 つのUIElement コントロールを作成します。 すべての 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 コントロールを示しています

この簡単な例では、 PlacementTarget プロパティと Placement プロパティを設定する方法を示しますが、 PlacementRectangle、 HorizontalOffset、および VerticalOffset プロパティを使用すると、 Popup の配置場所をさらに制御できます。

![注]手渡しに関連する Windows の設定によっては、ポップアップが上下に表示されるときに左揃えまたは右揃えになる場合があります。 前の図は、ポップアップを左に配置する右利きの配置を示しています。

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

次の用語は、 PlacementTarget、 Placement、 PlacementRectangle、 HorizontalOffset、および VerticalOffset の各プロパティが相互にどのように関連しているか、および Popupを理解するのに役立ちます。

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

• ターゲット領域

• ターゲットの配信元

• ポップアップ配置ポイント

これらの用語は、 Popup のさまざまな側面と、それに関連付けられているコントロールを参照する便利な方法を提供します。

ターゲット オブジェクト

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

次の例では、Popupの子であるCanvasを作成します。 この例では、PlacementTargetの Popup プロパティは設定されません。 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を基準にして配置されていることを示しています。

。

次の例では、Popupの子であるCanvasを作成しますが、今回は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を基準にして配置されていることを示しています。

ターゲット領域

ターゲット領域は、Popupが相対的な画面上の領域です。 前の例では、Popupはターゲット オブジェクトの境界に合わせて配置されますが、場合によっては、Popupにターゲット オブジェクトが含まれている場合でも、Popupは他の境界に配置されます。 PlacementRectangleプロパティが設定されている場合、ターゲット領域はターゲット オブジェクトの境界とは異なります。

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

<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>

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

ターゲットの原点とポップアップの配置ポイント

ターゲットの原点とポップアップの配置ポイントは、それぞれ、配置に使用されるターゲット領域とポップアップ上の参照ポイントです。 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>

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

プロパティの連携方法

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

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

次の図は、各Popup値のPlacementMode、ターゲット領域、ターゲットの原点、ポップアップ配置ポイントを示しています。 各図では、ターゲット領域は黄色で、 Popup は青です。

ポップアップが画面の端に到達したとき

セキュリティ上の理由から、 Popup を画面の端で非表示にすることはできません。 Popupが画面の端に遭遇すると、次の 3 つのいずれかが発生します。

• ポップアップは、画面の端に沿って再調整され、 Popupが隠されます。

• ポップアップでは、別のポップアップ配置ポイントが使用されます。

• ポップアップでは、別のターゲットの原点とポップアップ配置ポイントが使用されます。

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

Popupが画面の端に到達したときの動作は、Placementプロパティの値とポップアップで検出される画面の端によって異なります。 次の表は、 Popup が各 PlacementMode 値の画面の端を検出したときの動作をまとめたものです。

画面の端に合わせる

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 が Left され、 Popup が画面の左端に到達すると、ターゲットの原点がターゲット領域の右上隅になり、ポップアップ配置ポイントが Popupの左上隅であることを示しています。

次の図は、 Placement が Right され、 Popup が右端に到達すると、ターゲットの原点がターゲット領域の左上隅になり、ポップアップ配置ポイントが Popupの右上隅であることを示しています。

次の図は、 Placement が Top され、 Popup が画面の上端に到達すると、ターゲットの原点がターゲット領域の左下隅になり、ポップアップ配置ポイントが Popupの左上隅であることを示しています。

次の図は、 Placement が Mouse され、 Popup が画面の下端に到達したときに、ターゲットの原点がターゲット領域の左上隅 (マウス ポインターの境界) であり、ポップアップ配置ポイントが Popupの左下隅であることを示しています。

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

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

こちらも参照ください

• ポップアップ配置のサンプル