快顯功能表放置行為

更新：2007 年 11 月

Popup 控制項可顯示浮動於應用程式上之個別視窗中的內容。您可以使用 PlacementTarget、Placement、PlacementRectangle、HorizontalOffset 和 VerticalOffset 屬性，指定相對於控制項、滑鼠或畫面的 Popup 位置。這些屬性搭配運作而讓您有足夠的彈性可指定 Popup 的位置。

注意事項：
ToolTip 和 ContextMenu 類別也可定義這五個屬性，且兩者行為方式類似。

這個主題包含下列章節。

• 定位快顯功能表
• 詞彙定義：快顯功能表的結構
• 屬性搭配運作的方式
• 當快顯功能表接觸到畫面邊緣時
• 相關主題

定位快顯功能表

Popup 的放置可相對於 UIElement 或整個畫面。下列範例會建立四個相對於 UIElement 的 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 控制項

具有四個快顯功能表的影像

這個簡單範例將示範如何設定 PlacementTarget 和 Placement 屬性，但在使用 PlacementRectangle、HorizontalOffset 與 VerticalOffset 屬性時，您更能掌控 Popup 的定位位置。

詞彙定義：快顯功能表的結構

下列詞彙有助於了解 PlacementTarget、Placement、PlacementRectangle、HorizontalOffset 和 VerticalOffset 屬性彼此之間以及與 Popup 的關聯：

• 目標物件

• 目標區域

• 目標原點

• 快顯功能表對齊點

這些詞彙可讓您輕鬆地參照 Popup 的各個面向及其相關的控制項。

目標物件

「目標物件」(Target Object) 就是與 Popup 相關聯的項目。若已設定 PlacementTarget 屬性，此屬性會指定目標物件。若未設定 PlacementTarget，且 Popup 具有父代，則父代就是目標物件。若既沒有 PlacementTarget 值，也沒有父代，則不會有目標物件，而 Popup 會定位於畫面的相對位置。

下列範例會建立 Popup，做為 Canvas 的子系。此範例不會設定 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。這些值將在稍後的「屬性搭配運作的方式」中予以說明。

目標區域

「目標區域」(Target Area) 是指 Popup 在畫面上的相對區域。在前述幾個範例中，Popup 與目標物件的各個邊界對齊，但在某些情況下，Popup 會與其他邊界對齊，即使 Popup 具有目標物件亦然。若已設定 PlacementRectangle 屬性，則目標區域會與目標物件的邊界不同。

下列範例會建立兩個 Canvas 物件，兩者各包含一個 Rectangle 與一個 Popup。在這兩種情況下，Popup 的目標物件為 Canvas。第一個 Canvas 中的 Popup 具有 PlacementRectangle 集，並將其 X、Y、Width 與 Height 屬性分別設為 50、50、50 與 100。第二個 Canvas 中的 Popup 則沒有 PlacementRectangle 集。因此，第一個 Popup 會定位在 PlacementRectangle 下方，而第二個 Popup 則會定位在 Canvas 下方。每個 Canvas 也包含邊界與第一個 Popup 之 PlacementRectangle 相同的 Rectangle。請注意，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>

下圖顯示前述範例的結果。

具有與不具 PlacementRectangle 的快顯功能表

目標原點與快顯功能表對齊點

「目標原點」(Target Origin) 與「快顯功能表對齊點」(Popup Alignment Point) 分別是目標區域與快顯功能表上用於定位的參考點。您可以使用 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 值的 Popup、目標區域、目標原點與快顯功能表對齊點。在每張圖中，目標區域都以黃色表示，而 Popup 都以藍色表示。

定位為 Absolute 或 AbsolutePoint

定位為 Bottom

定位為 Center

定位為 Left

定位為 Mouse

定位為 MousePoint

定位為 Relative 或 RelativePoint

定位為 Right

定位為 Top

當快顯功能表接觸到畫面邊緣時

基於安全性考量，Popup 不可隱藏在畫面邊緣下。當 Popup 接觸到畫面邊緣時，可能會產生下列三種情形之一：

• 快顯功能表重新將本身對齊會遮住 Popup 的畫面邊緣。

• 快顯功能表會使用不同的快顯功能表對齊點。

• 快顯功能表會使用不同的目標原點與快顯功能表對齊點。

稍後將於本節中進一步說明這些選項。

Popup 接觸到畫面邊緣時的行為，取決於 Placement 屬性值與快顯功能表接觸到的是哪個畫面邊緣。下表摘要說明在各個 PlacementMode 值下，Popup 接觸到畫面邊緣時的行為。

對齊畫面邊緣

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 的左下角。

定位為 Bottom，且快顯功能表接觸到畫面下邊緣

下圖顯示當 Placement 為 Left 且 Popup 接觸到畫面左邊緣時，目標原點會是目標區域的右上角，而快顯功能表對齊點會是 Popup 的左上角。

定位為 Left，且快顯功能表接觸到畫面左邊緣

下圖顯示當 Placement 為 Right 且 Popup 接觸到畫面右邊緣時，目標原點會是目標區域的左上角，而快顯功能表對齊點會是 Popup 的右上角。

定位為 Right，且快顯功能表接觸到畫面右邊緣

下圖顯示當 Placement 為 Top 且 Popup 接觸到畫面上邊緣時，目標原點會是目標區域的左下角，而快顯功能表對齊點會是 Popup 的左上角。

定位為 Top，且快顯功能表接觸到畫面上邊緣

下圖顯示當 Placement 為 Mouse 且 Popup 接觸到畫面下邊緣時，目標原點會是目標區域 (滑鼠指標的邊界) 的左上角，而快顯功能表對齊點會是 Popup 的左下角。

定位為 Mouse，且快顯功能表接觸到畫面下邊緣

自訂快顯功能表位置

您可以將 Placement 屬性設為 Custom，藉以自訂目標原點與快顯功能表對齊點。接著，定義 CustomPopupPlacementCallback 委派 (Delegate)，使其傳回 Popup 可以使用的一組位置點與主座標軸 (依照優先順序)。會選取能夠顯示最多 Popup 部分的點。若 Popup 被畫面邊緣所隱藏，Popup 的位置即會自動調整。如需範例，請參閱 HOW TO：指定自訂 Popup 的位置。

請參閱

工作

快顯功能表位置範例