Sdílet prostřednictvím

Chování při umístění překryvného objektu

  • Článek

Ovládací prvek Popup zobrazí obsah v samostatném okně, které pluje nad aplikací. Pozici ovládacího prvku Popup můžete určit relativně k ovládacímu prvku, myši nebo obrazovce pomocí vlastností PlacementTarget, Placement, PlacementRectangle, HorizontalOffset a VerticalOffset. Společným použitím těchto vlastností můžete flexibilně určovat pozici prvku Popup.

Poznámka:

Těchto pět vlastností definují také třídy ToolTip a ContextMenu a chovají se v nich podobně.

Umístění prvku Popup

Umístění ovládacího prvku Popup může být relativní vzhledem k objektu UIElement nebo k celé obrazovce. Následující příklad vytvoří čtyři ovládací prvky Popup, které jsou umístěné relativně k objektu UIElement – v tomto případě obrázku. U všech ovládacích prvků Popup je vlastnost PlacementTarget nastavená na hodnotu image1, ale každý prvek Popup má jinou hodnotu vlastnosti Placement.

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

Na následující ilustraci je vidět obrázek a ovládací prvky Popup.

Image with four popup controls

Tento jednoduchý příklad ukazuje, jak se nastavují vlastnosti PlacementTarget a Placement, ale při použití vlastností PlacementRectangle, HorizontalOffset a VerticalOffset máte ještě větší kontrolu nad umístěním prvku Popup.

! [POZNÁMKA] V závislosti na nastavení Windows souvisejících s předáním může být místní nabídka při zobrazení v horní nebo dolní části zarovnaná doleva nebo doprava. Předchozí obrázek znázorňuje zarovnání doprava, které umístí automaticky otevírané okno vlevo.

Definice pojmů: Anatomie automaticky otevíraného okna

K porozumění tomu, jaký vztah mají vlastnosti PlacementTarget, Placement, PlacementRectangle, HorizontalOffset a VerticalOffset mezi sebou a k ovládacímu prvku Popup, jsou užitečné následující pojmy:

  • Cílový objekt

  • Cílová oblast

  • Počátek cíle

  • Bod zarovnání prvku Popup

Tyto pojmy poskytují pohodlný způsob, jak odkazovat na různé aspekty prvku Popup a ovládacího prvku, ke kterému je přidružený.

Cílový objekt

Cílový objekt je prvek, ke kterému je prvek Popup přidružený. Pokud je nastavená vlastnost PlacementTarget, určuje cílový objekt. Pokud vlastnost PlacementTarget není nastavená a prvek Popup má nadřazený prvek, je cílovým objektem nadřazený prvek. Pokud není k dispozici žádná hodnota vlastnosti PlacementTarget ani žádný nadřazený prvek, neexistuje žádný cílový objekt a prvek Popup se umístí relativně vzhledem k obrazovce.

Následující příklad vytvoří prvek Popup, který je podřízeným prvkem objektu Canvas. V tomto příkladu není u prvku Popup nastavená vlastnost PlacementTarget. Výchozí hodnota vlastnosti Placement je PlacementMode.Bottom, takže prvek Popup se zobrazí pod objektem 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>

Následující obrázek ukazuje, že prvek Popup je umístěný relativně vzhledem k objektu Canvas.

Popup control with no PlacementTarget

Následující příklad vytvoří prvek Popup, který je podřízeným prvkem objektu Canvas, ale tentokrát je vlastnost PlacementTarget nastavená na ellipse1, takže se prvek Popup zobrazí pod objektem 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>

Následující obrázek ukazuje, že prvek Popup je umístěný relativně vzhledem k objektu Ellipse.

Popup positioned relative to an ellipse

Poznámka:

Pro objekt ToolTip má vlastnost Placement výchozí hodnotu Mouse. Pro objekt ContextMenu má vlastnost Placement výchozí hodnotu MousePoint. Tyto hodnoty jsou vysvětlené později v části o společném fungování vlastností.

Cílová oblast

Cílová oblast je oblast na obrazovce, vzhledem ke které je prvek Popup relativně umístěn. V předchozích příkladech byl prvek Popup zarovnaný s mezemi cílového objektu, ale v některých případech je prvek Popup zarovnaný k jiným mezím (a to i v případě, že má prvek Popup svůj cílový objekt). Pokud je nastavená vlastnost PlacementRectangle, cílová oblast se liší od mezí cílového objektu.

Následující příklad vytvoří dva objekty Canvas, z nichž každý obsahuje objekt Rectangle a prvek Popup. V obou případech je pro prvek Popup cílovým objektem Canvas. Prvek Popup v prvním objektu Canvas má nastavený objekt PlacementRectangle, jehož vlastnosti X, Y, Width a Height jsou nastavené na 50, 50, 50 a 100 (v uvedeném pořadí). Prvek Popup v druhém objektu Canvas nemá nastavený objekt PlacementRectangle. Výsledkem bude, že první prvek Popup bude umístěný pod objektem PlacementRectangle a druhý prvek Popup pod objektem Canvas. Každý objekt Canvas obsahuje také objekt Rectangle, který má stejné meze jako objekt PlacementRectangle pro první prvek Popup. Všimněte si, že objekt PlacementRectangle nevytváří viditelný element v aplikaci; příklad vytvoří objekt Rectangle, který reprezentuje objekt 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>

Výsledek předchozího příkladu je znázorněný na následující ilustraci.

Popup with and without PlacementRectangle

Počátek cíle a bod zarovnání prvku Popup

Počátek cíle a bod zarovnání prvku Popup jsou referenční body cílové oblasti a prvku Popup, které se používají k umístění. K odsazení prvku Popup od cílové oblasti můžete použít vlastnosti HorizontalOffset a VerticalOffset. Vlastnosti HorizontalOffset a VerticalOffset jsou relativní vzhledem k počátku cíle a bodu zarovnání prvku Popup. Hodnota vlastnosti Placement určuje, kde se počátek cíle a bod zarovnání prvku Popup nacházejí.

Následující příklad vytvoří prvek Popup a nastaví vlastnosti HorizontalOffset a VerticalOffset na hodnotu 20. Vlastnost Placement je nastavená na hodnotu Bottom (výchozí), takže počátkem cíle je levý dolní roh cílové oblasti a bodem zarovnání prvku Popup je jeho levý horní roh.

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

Výsledek předchozího příkladu je znázorněný na následující ilustraci.

Popup placement with target origin alignment point

Jak tyto vlastnosti fungují společně

Hodnoty vlastností PlacementTarget, PlacementRectangle a Placement je potřeba zvážit společně, aby bylo možné určit správnou cílovou oblast, počátek cíle a bod zarovnání prvku Popup. Pokud má například vlastnost Placement hodnotu Mouse, neexistuje žádný cílový objekt, vlastnost PlacementRectangle se ignoruje a cílovou oblastí jsou meze ukazatele myši. Na druhé straně, pokud má vlastnost Placement hodnotu Bottom, je cílový objekt určený vlastností PlacementTarget nebo nadřazeným prvkem a cílová oblast je určená vlastností PlacementRectangle.

Následující tabulka popisuje cílový objekt, cílovou oblast, počátek cíle a bod zarovnání prvku Popup a uvádí, jestli se pro jednotlivé hodnoty výčtu PlacementMode používají vlastnosti PlacementTarget a PlacementRectangle.

PlacementMode Cílový objekt Cílová oblast Počátek cíle Bod zarovnání prvku Popup
Absolute Nevztahuje se. Vlastnost PlacementTarget je ignorována. Obrazovka, případně objekt PlacementRectangle, pokud je nastavený. Objekt PlacementRectangle je umístěný relativně vzhledem k obrazovce. Levý horní roh cílové oblasti. Levý horní roh prvku Popup.
AbsolutePoint Nevztahuje se. Vlastnost PlacementTarget je ignorována. Obrazovka, případně objekt PlacementRectangle, pokud je nastavený. Objekt PlacementRectangle je umístěný relativně vzhledem k obrazovce. Levý horní roh cílové oblasti. Levý horní roh prvku Popup.
Bottom PlacementTarget nebo nadřazený prvek. Cílový objekt, případně objekt PlacementRectangle, pokud je nastavený. Objekt PlacementRectangle je umístěný relativně vzhledem k cílovému objektu. Levý dolní roh cílové oblasti. Levý horní roh prvku Popup.
Center PlacementTarget nebo nadřazený prvek. Cílový objekt, případně objekt PlacementRectangle, pokud je nastavený. Objekt PlacementRectangle je umístěný relativně vzhledem k cílovému objektu. Střed cílové oblasti. Střed prvku Popup.
Custom PlacementTarget nebo nadřazený prvek. Cílový objekt, případně objekt PlacementRectangle, pokud je nastavený. Objekt PlacementRectangle je umístěný relativně vzhledem k cílovému objektu. Definováno delegátem CustomPopupPlacementCallback. Definováno delegátem CustomPopupPlacementCallback.
Left PlacementTarget nebo nadřazený prvek. Cílový objekt, případně objekt PlacementRectangle, pokud je nastavený. Objekt PlacementRectangle je umístěný relativně vzhledem k cílovému objektu. Levý horní roh cílové oblasti. Pravý horní roh prvku Popup.
Mouse Nevztahuje se. Vlastnost PlacementTarget je ignorována. Meze ukazatele myši. Vlastnost PlacementRectangle je ignorována. Levý dolní roh cílové oblasti. Levý horní roh prvku Popup.
MousePoint Nevztahuje se. Vlastnost PlacementTarget je ignorována. Meze ukazatele myši. Vlastnost PlacementRectangle je ignorována. Levý horní roh cílové oblasti. Levý horní roh prvku Popup.
Relative PlacementTarget nebo nadřazený prvek. Cílový objekt, případně objekt PlacementRectangle, pokud je nastavený. Objekt PlacementRectangle je umístěný relativně vzhledem k cílovému objektu. Levý horní roh cílové oblasti. Levý horní roh prvku Popup.
RelativePoint PlacementTarget nebo nadřazený prvek. Cílový objekt, případně objekt PlacementRectangle, pokud je nastavený. Objekt PlacementRectangle je umístěný relativně vzhledem k cílovému objektu. Levý horní roh cílové oblasti. Levý horní roh prvku Popup.
Right PlacementTarget nebo nadřazený prvek. Cílový objekt, případně objekt PlacementRectangle, pokud je nastavený. Objekt PlacementRectangle je umístěný relativně vzhledem k cílovému objektu. Pravý horní roh cílové oblasti. Levý horní roh prvku Popup.
Top PlacementTarget nebo nadřazený prvek. Cílový objekt, případně objekt PlacementRectangle, pokud je nastavený. Objekt PlacementRectangle je umístěný relativně vzhledem k cílovému objektu. Levý horní roh cílové oblasti. Levý dolní roh prvku Popup.

Následující ilustrace znázorňují prvek Popup, cílovou oblast, počátek cíle a bod zarovnání prvku Popup pro každou hodnotu vlastnosti PlacementMode. Na všech obrázcích je cílová oblast žlutá a prvek Popup modrý.

Popup with Absolute or AbsolutePoint placement

Popup with Bottom placement

Popup with Center placement

Popup with Left placement

Popup with Mouse placement

Popup with MousePoint placement

Popup with Relative or RelativePoint placement

Popup with Right placement

Popup with Top placement

Když prvek Popup narazí na okraj obrazovky

Z bezpečnostních důvodů nemůže být prvek Popup skrytý okrajem obrazovky. Když prvek Popup narazí na okraj obrazovky, stane se jedna z následujících tří věcí:

  • Prvek Popup se zarovná k okraji obrazovky, který by ho zakryl.

  • Prvek Popup použije jiný bod zarovnání.

  • Prvek Popup použije jiný počátek cíle a bod zarovnání prvku Popup.

Tyto možnosti jsou podrobněji popsané dále v této části.

Chování prvku Popup, když narazí na okraj obrazovky, závisí na hodnotě vlastnosti Placement a na tom, na který okraj obrazovky narazí. Následující tabulka shrnuje chování prvku Popup, když narazí na okraj obrazovky, pro jednotlivé hodnoty vlastnosti PlacementMode.

PlacementMode Horní okraj Dolní okraj Levý okraj Pravý okraj
Absolute Zarovná se k hornímu okraji. Zarovná se k dolnímu okraji. Zarovná se k levému okraji. Zarovná se k pravému okraji.
AbsolutePoint Zarovná se k hornímu okraji. Bod zarovnání prvku Popup se změní na jeho levý dolní roh. Zarovná se k levému okraji. Bod zarovnání prvku Popup se změní na jeho pravý horní roh.
Bottom Zarovná se k hornímu okraji. Počátek cíle se změní na levý horní roh cílové oblasti a bod zarovnání prvku Popup se změní na jeho levý dolní roh. Zarovná se k levému okraji. Zarovná se k pravému okraji.
Center Zarovná se k hornímu okraji. Zarovná se k dolnímu okraji. Zarovná se k levému okraji. Zarovná se k pravému okraji.
Left Zarovná se k hornímu okraji. Zarovná se k dolnímu okraji. Počátek cíle se změní na pravý horní roh cílové oblasti a bod zarovnání prvku Popup se změní na jeho levý horní roh. Zarovná se k pravému okraji.
Mouse Zarovná se k hornímu okraji. Počátek cíle se změní na levý horní roh cílové oblasti (mezí ukazatele myši) a bod zarovnání prvku Popup se změní na jeho levý dolní roh. Zarovná se k levému okraji. Zarovná se k pravému okraji.
MousePoint Zarovná se k hornímu okraji. Bod zarovnání prvku Popup se změní na jeho levý dolní roh. Zarovná se k levému okraji. Bod zarovnání prvku Popup se změní na jeho pravý horní roh.
Relative Zarovná se k hornímu okraji. Zarovná se k dolnímu okraji. Zarovná se k levému okraji. Zarovná se k pravému okraji.
RelativePoint Zarovná se k hornímu okraji. Bod zarovnání prvku Popup se změní na jeho levý dolní roh. Zarovná se k levému okraji. Bod zarovnání prvku Popup se změní na jeho pravý horní roh.
Right Zarovná se k hornímu okraji. Zarovná se k dolnímu okraji. Zarovná se k levému okraji. Počátek cíle se změní na levý horní roh cílové oblasti a bod zarovnání prvku Popup se změní na jeho pravý horní roh.
Top Počátek cíle se změní na levý dolní roh cílové oblasti a bod zarovnání prvku Popup se změní na jeho levý horní roh. Ve výsledku je to stejné, jako když má vlastnost Placement hodnotu Bottom. Zarovná se k dolnímu okraji. Zarovná se k levému okraji. Zarovná se k pravému okraji.

Zarovnání k okraji obrazovky

Prvek Popup se může zarovnat k okraji obrazovky tak, že se celý přemístí. Na obrazovce tak půjde vidět celý prvek Popup. Pokud k tomuto dojde, může se vzdálenost mezi počátkem cíle a bodem zarovnání prvku Popup lišit od hodnot vlastností HorizontalOffset a VerticalOffset. Pokud má vlastnost Placement hodnotu Absolute, Center nebo Relative, prvek Popup se zarovnává ke každému okraji obrazovky. Předpokládejme například, že prvek Popup má vlastnost Placement nastavenou na Relative a vlastnost VerticalOffset na 100. Pokud dolní okraj obrazovky skryje celý prvek Popup nebo jeho část, prvek Popup se přemístí k dolnímu okraji obrazovky a svislá vzdálenost mezi počátkem cíle a bodem zarovnání prvku Popup bude menší než 100. Ukazuje to následující obrázek.

Popup that aligns to edge of screen

Změna bodu zarovnání prvku Popup

Pokud má vlastnost Placement hodnotu AbsolutePoint, RelativePoint nebo MousePoint a prvek Popup narazí na dolní nebo pravý okraj obrazovky, změní se jeho bod zarovnání.

Následující ilustrace ukazuje, že když dolní okraj obrazovky skryje celý prvek Popup nebo jeho část, stane se bodem zarovnání prvku Popup jeho levý dolní roh.

Screenshot showing the Target area with the Popup alignment point going past the Screen Edge in the bottom-left corner.

Následující ilustrace ukazuje, že pokud by byl prvek Popup skrytý pravým okrajem obrazovky, stane se bodem zarovnání prvku Popup jeho pravý horní roh.

New popup alignment point due to screen edge

Pokud prvek Popup narazí na dolní a pravý okraj obrazovky, stane se bodem zarovnání prvku Popup jeho pravý dolní roh.

Změna počátku cíle a bodu zarovnání prvku Popup

Pokud má vlastnost Placement hodnotu Bottom, Left, Mouse, Right nebo Top a dojde ke kolizi s okrajem obrazovky, změní se počátek cíle a bod zarovnání prvku Popup. Okraj obrazovky, který způsobí změnu pozice, závisí na hodnotě vlastnosti PlacementMode.

Následující obrázek ukazuje, že když má vlastnost Placement hodnotu Bottom a prvek Popup narazí na dolní okraj obrazovky, stane se počátkem cíle levý horní roh cílové oblasti a bodem zarovnání prvku Popup se stane jeho levý dolní roh.

Screenshot showing the Target area in the top half of the screen with the Popup alignment point on the bottom half of the screen with a Vertical Offset of 5.

Následující obrázek ukazuje, že když má vlastnost Placement hodnotu Left a prvek Popup narazí na levý okraj obrazovky, stane se počátkem cíle pravý horní roh cílové oblasti a bodem zarovnání prvku Popup se stane jeho levý horní roh.

New alignment point due to left screen edge

Následující obrázek ukazuje, že když má vlastnost Placement hodnotu Right a prvek Popup narazí na pravý okraj obrazovky, stane se počátkem cíle levý horní roh cílové oblasti a bodem zarovnání prvku Popup se stane jeho pravý horní roh.

New alignment point due to right screen edge

Následující obrázek ukazuje, že když má vlastnost Placement hodnotu Top a prvek Popup narazí na horní okraj obrazovky, stane se počátkem cíle levý dolní roh cílové oblasti a bodem zarovnání prvku Popup se stane jeho levý horní roh.

New alignment point due to top screen edge

Následující obrázek ukazuje, že když má vlastnost Placement hodnotu Mouse a prvek Popup narazí na dolní okraj obrazovky, stane se počátkem cíle levý horní roh cílové oblasti (mezí ukazatele myši) a bodem zarovnání prvku Popup se stane jeho levý dolní roh.

new alignment point due to mouse near screen edge

Přizpůsobení umístění prvku Popup

Při nastavení vlastnosti Placement na Custom můžete přizpůsobit počátek cíle a bod zarovnání prvku Popup. Pak nadefinujte delegáta CustomPopupPlacementCallback, který vrací sadu možných bodů umístění a primárních os (v pořadí podle preference) pro prvek Popup. Vybere se bod, který zobrazí největší část prvku Popup. Pozice prvku Popup se automaticky upraví, pokud by byl prvek Popup skrytý okrajem obrazovky. Příklad najdete v článku o určení vlastního umístění prvku Popup.

Viz také