Felugró ablak elhelyezésének viselkedése

A Popup vezérlők egy külön ablakban jelenítik meg a tartalmat, amely egy alkalmazás fölött lebeg. Az Popup vezérlőelemhez, egérhez vagy képernyőhöz viszonyított pozícióját a PlacementTarget, Placement, PlacementRectangle, HorizontalOffsetés VerticalOffset tulajdonságok használatával adhatja meg. Ezek a tulajdonságok együttesen rugalmasan határozzák meg a Popuppozícióját.

Megjegyzés:

A ToolTip és ContextMenu osztályok szintén meghatározzák ezt az öt tulajdonságot, és hasonlóan viselkednek.

Az előugró ablak elhelyezése

A Popup elhelyezése lehet relatív egy UIElement-hez vagy az egész képernyőhöz viszonyítva. Az alábbi példa négy Popup vezérlőelemet hoz létre, amelyek egy UIElement– ebben az esetben egy képhez – kapcsolódnak. Az összes Popup vezérlőelemnek a PlacementTarget tulajdonsága image1-re van állítva, de mindegyik Popup más-más értékkel rendelkezik az elhelyezés tulajdonsága számára.

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

Az alábbi ábrán a kép és a Popup vezérlői láthatók

Ez az egyszerű példa bemutatja, hogyan állíthatja be a PlacementTarget és Placement tulajdonságait, de a PlacementRectangle, HorizontalOffsetés VerticalOffset tulajdonságok használatával még jobban szabályozhatja a Popup helyét.

! [MEGJEGYZÉS] A kézitáshoz kapcsolódó Windows-beállításoktól függően előfordulhat, hogy az előugró ablak bal vagy jobb oldalon van igazítva, ha felül vagy alul jelenik meg. Az előző képen a jobbkezesség szerinti igazítás látható, amely a felugró ablakot balra helyezi.

Kifejezések definíciói: Egy előugró ablak anatómiája

A következő kifejezések hasznosak annak megértéséhez, hogy a PlacementTarget, Placement, PlacementRectangle, HorizontalOffsetés VerticalOffset tulajdonságok hogyan kapcsolódnak egymáshoz és a Popup:

• Célobjektum

• Célterület

• Cél eredete

• Előugró igazítási pont

Ezek a kifejezések kényelmes módot nyújtanak a Popup különböző aspektusaira és az azzal kapcsolatos vezérlésre.

Célobjektum

A célobjektum az az elem, amelyhez a Popup társítva van. Ha a PlacementTarget tulajdonság be van állítva, a célobjektumot adja meg. Ha PlacementTarget nincs beállítva, és a Popup szülővel rendelkezik, a szülő a célobjektum. Ha nincs PlacementTarget érték, és nincs szülő, nincs célobjektum, és a Popup a képernyőhöz képest van elhelyezve.

Az alábbi példa egy Popup hoz létre, amely egy Canvasgyermeke. A példa nem állítja be a PlacementTarget tulajdonságot a Popup. A Placement alapértelmezett értéke PlacementMode.Bottom, így a Popup a Canvasalatt jelenik meg.

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

Az alábbi ábrán látható, hogy a Popup a Canvasképest van elhelyezve.

Az alábbi példa létrehoz egy Popup, amely egy Canvasgyermeke, de ezúttal a PlacementTargetellipse1van beállítva, így az előugró ablak a Ellipsealatt jelenik meg.

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

Az alábbi ábrán látható, hogy a Popup a Ellipseképest van elhelyezve.

Megjegyzés:

A ToolTipesetében a Placement alapértelmezett értéke Mouse. A ContextMenuesetében a Placement alapértelmezett értéke MousePoint. Ezeket az értékeket később a "Tulajdonságok együttműködése" című témakörben ismertetjük.

Célterület

A célterület az a terület a képernyőn, amelyhez a Popup viszonyítva van. Az előző példákban a Popup igazodik a célobjektum határaihoz, de bizonyos esetekben a Popup más határokhoz van igazítva, még akkor is, ha a Popup célobjektummal rendelkezik. Ha a PlacementRectangle tulajdonság be van állítva, a célterület eltér a célobjektum határaitól.

Az alábbi példa két Canvas objektumot hoz létre, amelyek mindegyike egy Rectangle és egy Popuptartalmaz. Mindkét esetben a Popup célobjektuma a Canvas. A(z) első Popup-ben található Canvas a PlacementRectangle beállítással rendelkezik, és a X, Y, Width, valamint Height tulajdonságai rendre 50, 50, 50 és 100 értékre vannak állítva. A második Popup-ben a Canvas nincs beállítva a PlacementRectangle. Ennek eredményeként az első Popup a PlacementRectangle alatt, a második Popup pedig a Canvasalá kerül. Az egyes Canvas-ok tartalmaznak egy Rectangle-et is, amelynek határai megegyeznek az első PlacementRectangle-nál lévő Popup határaival. Vegye figyelembe, hogy a PlacementRectangle nem hoz létre látható elemet az alkalmazásban; a példa létrehoz egy Rectangle a PlacementRectangleábrázolásához.

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

Az alábbi ábrán az előző példa eredménye látható.

Célhely és előugró igazítási pont

A célpont eredet és a előugró ablak igazítási pont a célterület, illetve az előugró ablak referenciapontjai, amelyeket a helymeghatározáshoz használnak. A HorizontalOffset és VerticalOffset tulajdonságok használatával eltolhatja az előugró ablakot a célterülettől. A HorizontalOffset és a VerticalOffset a célhelyhez és az előugró igazítási ponthoz vannak viszonyítva. A Placement tulajdonság értéke határozza meg a célhely és az előugró igazítási pont helyét.

Az alábbi példa létrehoz egy Popup, és a HorizontalOffset és VerticalOffset tulajdonságait 20-ra állítja. A Placement tulajdonság értéke Bottom (alapértelmezett), így a célhely a célterület bal alsó sarkában, az előugró igazítási pont pedig a Popupbal felső sarkában található.

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

Az alábbi ábrán az előző példa eredménye látható.

A tulajdonságok együttes működése

A PlacementTarget, a PlacementRectangleés a Placement értékeit együtt kell figyelembe venni a célterület, a célhely és az előugró igazítási pont megállapításához. Ha például a Placement értéke Mouse, nincs célobjektum, a PlacementRectangle figyelmen kívül hagyja, a célterület pedig az egérmutató határa. Ha viszont PlacementBottom, a PlacementTarget vagy a szülő határozza meg a célobjektumot, PlacementRectangle pedig a célterületet.

Az alábbi táblázat a célobjektumot, a célterületet, a célhelyet és az előugró igazítási pontot ismerteti, és jelzi, hogy PlacementTarget és PlacementRectangle használnak-e az egyes PlacementMode enumerálási értékekhez.

Elhelyezési mód	Célobjektum	Célterület	Cél eredete	Előugró igazítási pont
Absolute	Nem alkalmazható. A PlacementTarget figyelmen kívül van hagyva.	A képernyőt, vagy ha be van állítva, PlacementRectangle. A PlacementRectangle a képernyőhöz viszonyítva van.	A célterület bal felső sarkában.	A Popupbal felső sarkában.
AbsolutePoint	Nem alkalmazható. A PlacementTarget figyelmen kívül van hagyva.	A képernyőt, vagy ha be van állítva, PlacementRectangle. A PlacementRectangle a képernyőhöz viszonyítva van.	A célterület bal felső sarkában.	A Popupbal felső sarkában.
Bottom	PlacementTarget vagy szülő.	A célobjektum, vagy ha be van állítva, PlacementRectangle. A PlacementRectangle a célobjektumhoz viszonyítva.	A célterület bal alsó sarkában.	A Popupbal felső sarkában.
Center	PlacementTarget vagy szülő.	A célobjektum, vagy ha be van állítva, PlacementRectangle. A PlacementRectangle a célobjektumhoz viszonyítva.	A célterület közepe.	A Popupközéppontja.
Custom	PlacementTarget vagy szülő.	A célobjektum, vagy ha be van állítva, PlacementRectangle. A PlacementRectangle a célobjektumhoz viszonyítva.	A(z) CustomPopupPlacementCallbackhatározza meg.	A(z) CustomPopupPlacementCallbackhatározza meg.
Left	PlacementTarget vagy szülő.	A célobjektum, vagy ha be van állítva, PlacementRectangle. A PlacementRectangle a célobjektumhoz viszonyítva.	A célterület bal felső sarkában.	A Popupjobb felső sarkában.
Mouse	Nem alkalmazható. A PlacementTarget figyelmen kívül van hagyva.	Az egérmutató határai. A PlacementRectangle figyelmen kívül van hagyva.	A célterület bal alsó sarkában.	A Popupbal felső sarkában.
MousePoint	Nem alkalmazható. A PlacementTarget figyelmen kívül van hagyva.	Az egérmutató határai. A PlacementRectangle figyelmen kívül van hagyva.	A célterület bal felső sarkában.	A Popupbal felső sarkában.
Relative	PlacementTarget vagy szülő.	A célobjektum, vagy ha be van állítva, PlacementRectangle. A PlacementRectangle a célobjektumhoz viszonyítva.	A célterület bal felső sarkában.	A Popupbal felső sarkában.
RelativePoint	PlacementTarget vagy szülő.	A célobjektum, vagy ha be van állítva, PlacementRectangle. A PlacementRectangle a célobjektumhoz viszonyítva.	A célterület bal felső sarkában.	A Popupbal felső sarkában.
Right	PlacementTarget vagy szülő.	A célobjektum, vagy ha be van állítva, PlacementRectangle. A PlacementRectangle a célobjektumhoz viszonyítva.	A célterület jobb felső sarkában.	A Popupbal felső sarkában.
Top	PlacementTarget vagy szülő.	A célobjektum, vagy ha be van állítva, PlacementRectangle. A PlacementRectangle a célobjektumhoz viszonyítva.	A célterület bal felső sarkában.	A Popupbal alsó sarkában.

Az alábbi ábrák a Popup, célterület, célhely és az előugró igazítási pontot mutatják be az egyes PlacementMode értékeknél. Minden ábrán a célterület sárga, a Popup pedig kék.

Amikor az előugró ablak a képernyő szélével találkozik

Biztonsági okokból a Popup nem rejthető el a képernyő szélén. Az alábbi három dolog egyike történik, amikor a Popup képernyőszéllel találkozik:

• Az előugró ablak a képernyő azon széléhez igazodik, amely akadályozná a Popupláthatóságát.

• Az előugró ablak másik igazítási pontot használ.

• Az előugró ablak egy másik célhelyet és előugró igazítási pontot használ.

Ezeket a beállításokat a szakasz későbbi részében ismertetjük.

A Popup viselkedése, amikor képernyőéllel találkozik, a Placement tulajdonság értékétől és az előugró ablak melyik képernyőszélétől függ. Az alábbi táblázat összefoglalja azt a viselkedést, amikor a Popup minden PlacementMode értékhez képernyőszéllel találkozik.

Elhelyezési mód	Felső él	Alsó szegély	Bal szél	Jobb szél
Absolute	A felső szélhez igazodik.	Az alsó szélhez igazodik.	A bal szélhez igazodik.	A jobb szélhez igazodik.
AbsolutePoint	A felső szélhez igazodik.	Az előugró ablak igazítási pontja a Popupbal alsó sarkára változik.	A bal szélhez igazodik.	Az előugró ablak igazítási pontja a Popupjobb felső sarkára változik.
Bottom	A felső szélhez igazodik.	A cél eredetét a célterület bal felső sarkára változtatják, az előugró ablak igazítási pontját pedig a Popupbal alsó sarkára változtatják.	A bal szélhez igazodik.	A jobb szélhez igazodik.
Center	A felső szélhez igazodik.	Az alsó szélhez igazodik.	A bal szélhez igazodik.	A jobb szélhez igazodik.
Left	A felső szélhez igazodik.	Az alsó szélhez igazodik.	A célpont kezdőpontja a célterület jobb felső sarkára változik, az előugró igazítási pont pedig a Popupbal felső sarkára kerül.	A jobb szélhez igazodik.
Mouse	A felső szélhez igazodik.	A cél eredete a célterület bal felső sarkára (az egérmutató határaira) változik, az előugró igazítási pont pedig a Popupbal alsó sarkára változik.	A bal szélhez igazodik.	A jobb szélhez igazodik.
MousePoint	A felső szélhez igazodik.	Az előugró ablak igazítási pontja a Popupbal alsó sarkára változik.	A bal szélhez igazodik.	Az előugró igazítási pont az előugró ablak jobb felső sarkára változik.
Relative	A felső szélhez igazodik.	Az alsó szélhez igazodik.	A bal szélhez igazodik.	A jobb szélhez igazodik.
RelativePoint	A felső szélhez igazodik.	Az előugró ablak igazítási pontja a Popupbal alsó sarkára változik.	A bal szélhez igazodik.	Az előugró igazítási pont az előugró ablak jobb felső sarkára változik.
Right	A felső szélhez igazodik.	Az alsó szélhez igazodik.	A bal szélhez igazodik.	A cél eredete a célterület bal felső sarkára változik, az előugró igazítási pont pedig a Popupjobb felső sarkára változik.
Top	A cél eredete a célterület bal alsó sarkára változik, míg az előugró ablak igazítási pontja a Popupbal felső sarkára helyeződik át. Valójában ez ugyanaz, mint amikor Placement van Bottom.	Az alsó szélhez igazodik.	A bal szélhez igazodik.	A jobb szélhez igazodik.

Igazítás a képernyő széléhez

A Popup a képernyő széléhez igazítható oly módon, hogy pozicionálja magát úgy, hogy a teljes Popup látható legyen a képernyőn. Ha ez történik, a célhely és az előugró igazítási pont közötti távolság eltérhet a HorizontalOffset és a VerticalOffsetértékeitől. Ha PlacementAbsolute, Centervagy Relative, a Popup minden képernyő széléhez igazodik. Tegyük fel például, hogy egy PopupPlacement értéke Relative-re van állítva, és VerticalOffset értéke 100-ra van állítva. Ha a képernyő alsó széle elrejti a Popupegészét vagy egy részét, a Popup a képernyő alsó széle mentén áthelyezi magát, és a célhely és az előugró igazítási pont közötti függőleges távolság kisebb, mint 100. Az alábbi ábra ezt szemlélteti.

Az előugró igazítási pont módosítása

Ha PlacementAbsolutePoint, RelativePointvagy MousePoint, az előugró ablak igazítási pontja megváltozik, amikor az ablak a képernyő alsó vagy jobb szélével találkozik.

Az alábbi ábra bemutatja, hogy ha az alsó képernyő széle elrejti a Popupegészét vagy egy részét, az előugró igazítási pont a Popupbal alsó sarkában található.

Az alábbi ábra bemutatja, hogy ha a Popup-át a jobb oldali képernyőszél elrejti, az előugró igazítás pontja a Popupjobb felső sarkában található.

Ha a Popup a képernyő alsó és jobb szélével találkozik, az előugró igazítási pont a Popupjobb alsó sarkában található.

A cél kezdőpontjának és az előugró ablak igazítási pontjának módosítása

Ha PlacementBottom, Left, Mouse, Rightvagy Top, a célhely és az előugró igazítási pont megváltozik, ha egy bizonyos képernyőél jelenik meg. A pozíciót módosító képernyőszél a PlacementMode értékétől függ.

Az alábbi ábra azt mutatja be, hogy ha PlacementBottom, és a Popup az alsó képernyő szélével találkozik, akkor a cél eredete a célterület bal felső sarkában van, míg az előugró ablak igazítási pontja a Popupbal alsó sarkában található.

Az alábbi ábra bemutatja, hogy amikor PlacementLeft, és a Popup eléri a bal oldali képernyő szélét, a céleredet a célterület jobb felső sarkában van, az előugró igazítási pont pedig a Popupbal felső sarkában található.

Az alábbi ábra bemutatja, hogy ha PlacementRight, és a Popup a jobb oldali képernyő szélével találkozik, a célterület bal felső sarka a cél kiindulópontja, és az előugró igazítási pont pedig a Popupjobb felső sarkában található.

Az alábbi ábra azt mutatja be, hogy ha PlacementTop, és a Popup a felső képernyő szélével találkozik, a célpont eredete a célterület bal alsó sarkában van, az előugró ablak igazítási pontja pedig a Popupbal felső sarkában van.

Az alábbi ábra bemutatja, hogy ha PlacementMouse, és a Popup eléri az alsó képernyő szélét, a célterület kiindulópontja a célterület bal felső sarka (az egérmutató határai), az előugró ablak igazítási pont pedig a Popupbal alsó sarkához van igazítva.

Előugró elhelyezés testreszabása

Az eredeti hely és az előugró igazítási pont testreszabásához állítsa be a Placement tulajdonságot Custom. Ezután definiáljon egy CustomPopupPlacementCallback delegáltat, amely a Popuplehetséges elhelyezési pontjait és elsődleges tengelyeit adja vissza (sorrendben). A Popup legnagyobb részét megjelenítő pont van kiválasztva. Ha a Popup-et a képernyő széle elrejti, a Popup pozíciója automatikusan módosul. Például lásd: Egyéni előugró pozíció megadása.

Lásd még

• előugró elhelyezési minta