Udostępnij za pośrednictwem

Zachowanie położenia okna podręcznego

  • Artykuł

Kontrolka Popup wyświetla zawartość w osobnym oknie znajdującym się nad aplikacją. Możesz określić pozycję klasy Popup względem kontrolki, myszy lub ekranu przy użyciu właściwości PlacementTarget, Placement, PlacementRectangle, HorizontalOffset i VerticalOffset. Razem te właściwości zapewniają elastyczność w określaniu pozycji klasy Popup.

Uwaga

Klasy ToolTip i ContextMenu również definiują tych pięć właściwości i zachowują się podobnie.

Pozycjonowanie okna podręcznego

Położenie klasy Popup można ustalić względem klasy UIElement lub całego ekranu. W poniższym przykładzie tworzone są cztery kontrolki Popup względem klasy UIElement, w tym przypadku obrazu. Wszystkie kontrolki Popup mają właściwość PlacementTarget ustawioną na wartość image1, ale każda klasa Popup ma inną wartość właściwości położenia.

<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 poniższej ilustracji przedstawiono obraz i kontrolki Popup

Image with four popup controls

W tym prostym przykładzie pokazano, jak ustawić właściwości PlacementTarget i Placement, ale używając właściwości PlacementRectangle, HorizontalOffset i VerticalOffset, masz jeszcze większą kontrolę nad położeniem klasy Popup.

! [UWAGA] W zależności od ustawień systemu Windows związanych z przekazaniem okienko podręczne może być wyrównane do lewej lub do prawej, gdy jest wyświetlane na górze lub u dołu. Na poprzedniej ilustracji pokazano wyrównanie praworęcznych, które umieszcza wyskakujące okienko po lewej stronie.

Definicje terminów: Anatomia wyskakującego okienka

Poniższe terminy są przydatne w zrozumieniu, jak właściwości PlacementTarget, Placement, PlacementRectangle, HorizontalOffset i VerticalOffset są powiązane ze sobą i klasą Popup:

  • Obiekt docelowy

  • Obszar docelowy

  • Źródło docelowe

  • Punkt wyrównania okna podręcznego

Dzięki tym terminom można w wygodny sposób odnosić się do różnych aspektów klasy Popup i skojarzonej z nim kontrolki.

Obiekt docelowy

Obiekt docelowy to element, z którym skojarzona jest klasa Popup. Jeśli właściwość PlacementTarget jest ustawiona, określa obiekt docelowy. Jeśli właściwość PlacementTarget nie jest ustawiona, a klasa Popup ma element nadrzędny, ten element nadrzędny jest obiektem docelowym. Jeśli nie ma wartości PlacementTarget ani elementu nadrzędnego, nie ma obiektu docelowego, a klasa Popup jest pozycjonowana względem ekranu.

W poniższym przykładzie tworzona jest klasa Popup, która jest elementem podrzędnym klasy Canvas. W tym przykładzie nie jest ustawiana właściwość PlacementTarget w klasie Popup. Wartość domyślna dla właściwości Placement to PlacementMode.Bottom, dlatego klasa Popup pojawia się pod klasą 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>

Na poniższej ilustracji widać, że klasa Popup jest pozycjonowana względem klasy Canvas.

Popup control with no PlacementTarget

W poniższym przykładzie tworzona jest klasa Popup, która jest elementem podrzędnym klasy Canvas, ale tym razem właściwość PlacementTarget ma ustawioną wartość ellipse1 i dlatego okno podręczne jest wyświetlane pod klasą 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>

Na poniższej ilustracji widać, że klasa Popup jest pozycjonowana względem klasy Ellipse.

Popup positioned relative to an ellipse

Uwaga

Dla klasy ToolTip wartość domyślna właściwości Placement to Mouse. Dla klasy ContextMenu wartość domyślna właściwości Placement to MousePoint. Te wartości są wyjaśnione później w sekcji „Jak właściwości współdziałają ze sobą”.

Obszar docelowy

Obszar docelowy jest obszarem na ekranie, względem którego określana jest klasa Popup. W poprzednich przykładach klasa Popup jest wyrównana do granic obiektu docelowego, ale w niektórych przypadkach klasa Popup jest wyrównana do innych granic, nawet jeśli klasa Popup ma obiekt docelowy. Jeśli właściwość PlacementRectangle jest ustawiona, obszar docelowy jest inny niż granice obiektu docelowego.

W poniższym przykładzie tworzone są dwa obiekty Canvas, każdy zawierający klasę Rectangle i Popup. W obu przypadkach obiekt docelowy dla klasy Popup to klasa Canvas. Klasa Popup w pierwszej klasie Canvas ma ustawioną właściwość PlacementRectangle, a jej właściwości X, Y, Width i Height mają ustawione odpowiednio wartości 50, 50, 50 i 100. Klasa Popup w drugiej klasie Canvas nie ma ustawionej właściwości PlacementRectangle. Z tego powodu pierwsza klasa Popup jest pozycjonowana pod właściwością PlacementRectangle, a druga klasa Popup jest pozycjonowane pod klasą Canvas. Każda klasa Canvas zawiera również klasę Rectangle, która ma takie same granice jak właściwość PlacementRectangle dla pierwszej klasy Popup. Zauważ, że właściwość PlacementRectangle nie tworzy widocznego elementu w aplikacji; w przykładzie tworzona jest klasa Rectangle reprezentujące właściwość 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>

Na poniższej ilustracji przedstawiono wynik poprzedniego przykładu.

Popup with and without PlacementRectangle

Źródło docelowe i punkt wyrównania okna podręcznego

Źródło docelowe i punkt wyrównania okna podręcznego są punktami odniesienia dla odpowiednio obszaru docelowego i okna podręcznego służącymi do pozycjonowania. Przy użyciu właściwości HorizontalOffset i VerticalOffset możesz odsunąć okno podręczne od obszaru docelowego. Właściwości HorizontalOffset i VerticalOffset są względne wobec źródła docelowego i punktu wyrównania okna podręcznego. Wartość właściwości Placement określa, gdzie znajdują się źródło docelowe i punkt wyrównania okna podręcznego.

W poniższym przykładzie tworzona jest klasa Popup oraz ustawiane są właściwości HorizontalOffset i VerticalOffset na wartość 20. Właściwość Placement jest ustawiona na wartość Bottom (domyślnie), więc źródłem docelowym jest lewy dolny róg obszaru docelowego, a punktem wyrównania okna podręcznego jest lewy górny róg klasy 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>

Na poniższej ilustracji przedstawiono wynik poprzedniego przykładu.

Popup placement with target origin alignment point

Jak właściwości współdziałają ze sobą

Aby ustalić prawidłowy obszar docelowy, źródło docelowe i punkt wyrównania okna podręcznego, należy wziąć pod uwagę wartości właściwości PlacementTarget, PlacementRectangle i Placement razem. Na przykład jeśli właściwość Placement ma wartość Mouse, nie istnieje obiekt docelowy, właściwość PlacementRectangle jest ignorowane, a obszarem docelowym są granice wskaźnika myszy. Z drugiej strony, jeśli właściwość Placement ma wartość Bottom, właściwość PlacementTarget lub element nadrzędny określa obiekt docelowy, a właściwość PlacementRectangle określa obszar docelowy.

W poniższej tabeli opisano obiekt docelowy, obszar docelowy, źródło docelowe i punkt wyrównania okna podręcznego oraz wskazano, czy właściwości PlacementTarget i PlacementRectangle są używane dla każdej wartości wyliczenia właściwości PlacementMode.

PlacementMode Obiekt docelowy Obszar docelowy Źródło docelowe Punkt wyrównania okna podręcznego
Absolute Nie dotyczy. Właściwość PlacementTarget jest ignorowana. Ekran lub właściwośćPlacementRectangle, jeśli jest ustawiona. Właściwość PlacementRectangle jest określona względem ekranu. Lewy górny róg obszaru docelowego. Lewy górny róg klasy Popup.
AbsolutePoint Nie dotyczy. Właściwość PlacementTarget jest ignorowana. Ekran lub właściwośćPlacementRectangle, jeśli jest ustawiona. Właściwość PlacementRectangle jest określona względem ekranu. Lewy górny róg obszaru docelowego. Lewy górny róg klasy Popup.
Bottom Właściwość PlacementTarget lub element nadrzędny. Obiekt docelowy lub właściwość PlacementRectangle, jeśli jest ustawiona. Właściwość PlacementRectangle jest określona względem obiektu docelowego. Lewy dolny róg obszaru docelowego. Lewy górny róg klasy Popup.
Center Właściwość PlacementTarget lub element nadrzędny. Obiekt docelowy lub właściwość PlacementRectangle, jeśli jest ustawiona. Właściwość PlacementRectangle jest określona względem obiektu docelowego. Środek obszaru docelowego. Środek klasy Popup.
Custom Właściwość PlacementTarget lub element nadrzędny. Obiekt docelowy lub właściwość PlacementRectangle, jeśli jest ustawiona. Właściwość PlacementRectangle jest określona względem obiektu docelowego. Zdefiniowane przez delegat CustomPopupPlacementCallback. Zdefiniowane przez delegat CustomPopupPlacementCallback.
Left Właściwość PlacementTarget lub element nadrzędny. Obiekt docelowy lub właściwość PlacementRectangle, jeśli jest ustawiona. Właściwość PlacementRectangle jest określona względem obiektu docelowego. Lewy górny róg obszaru docelowego. Prawy górny róg klasy Popup.
Mouse Nie dotyczy. Właściwość PlacementTarget jest ignorowana. Granice wskaźnika myszy. Właściwość PlacementRectangle jest ignorowana. Lewy dolny róg obszaru docelowego. Lewy górny róg klasy Popup.
MousePoint Nie dotyczy. Właściwość PlacementTarget jest ignorowana. Granice wskaźnika myszy. Właściwość PlacementRectangle jest ignorowana. Lewy górny róg obszaru docelowego. Lewy górny róg klasy Popup.
Relative Właściwość PlacementTarget lub element nadrzędny. Obiekt docelowy lub właściwość PlacementRectangle, jeśli jest ustawiona. Właściwość PlacementRectangle jest określona względem obiektu docelowego. Lewy górny róg obszaru docelowego. Lewy górny róg klasy Popup.
RelativePoint Właściwość PlacementTarget lub element nadrzędny. Obiekt docelowy lub właściwość PlacementRectangle, jeśli jest ustawiona. Właściwość PlacementRectangle jest określona względem obiektu docelowego. Lewy górny róg obszaru docelowego. Lewy górny róg klasy Popup.
Right Właściwość PlacementTarget lub element nadrzędny. Obiekt docelowy lub właściwość PlacementRectangle, jeśli jest ustawiona. Właściwość PlacementRectangle jest określona względem obiektu docelowego. Prawy górny róg obszaru docelowego. Lewy górny róg klasy Popup.
Top Właściwość PlacementTarget lub element nadrzędny. Obiekt docelowy lub właściwość PlacementRectangle, jeśli jest ustawiona. Właściwość PlacementRectangle jest określona względem obiektu docelowego. Lewy górny róg obszaru docelowego. Lewy dolny róg klasy Popup.

Na poniższych ilustracjach przedstawiono klasę Popup, obszar docelowy, źródło docelowe i punkt wyrównania okna podręcznego dla każdej wartości właściwości PlacementMode. Na każdym rysunku obszar docelowy jest żółty, a klasa Popup jest niebieska.

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

Gdy okno podręczne napotka krawędź ekranu

Ze względów bezpieczeństwa klasa Popup nie może być ukryta przez brzeg ekranu. Gdy klasa Popup napotka krawędź ekranu, dzieje się jedna z trzech następujących rzeczy:

  • Okno podręczne jest wyrównywane do krawędzi ekranu, która zasłaniałaby klasę Popup.

  • Okno podręczne używa innego punktu wyrównania okna podręcznego.

  • Okno podręczne używa innego źródła docelowego i punktu wyrównania okna podręcznego.

Te opcje są opisane w dalszej części tej sekcji.

Zachowanie klasy Popup w chwili napotkania krawędzi ekranu zależy od wartości właściwości Placement i tego, którą krawędź napotka okno podręczne. W poniższej tabeli podsumowano zachowanie, gdy klasa Popup napotka krawędź ekranu dla każdej wartości właściwości PlacementMode.

PlacementMode Górna krawędź Dolna krawędź Lewa krawędź Prawa krawędź
Absolute Wyrównanie do górnej krawędzi. Wyrównanie do dolnej krawędzi. Wyrównanie do lewej krawędzi. Wyrównanie do prawej krawędzi.
AbsolutePoint Wyrównanie do górnej krawędzi. Punkt wyrównania okna podręcznego zmieni się na lewy dolny róg klasy Popup. Wyrównanie do lewej krawędzi. Punkt wyrównania okna podręcznego zmieni się na prawy górny róg klasy Popup.
Bottom Wyrównanie do górnej krawędzi. Źródło docelowe zmieni się na lewy górny róg obszaru docelowego, a punkt wyrównania okna podręcznego zmieni się na lewy dolny róg klasy Popup. Wyrównanie do lewej krawędzi. Wyrównanie do prawej krawędzi.
Center Wyrównanie do górnej krawędzi. Wyrównanie do dolnej krawędzi. Wyrównanie do lewej krawędzi. Wyrównanie do prawej krawędzi.
Left Wyrównanie do górnej krawędzi. Wyrównanie do dolnej krawędzi. Źródło docelowe zmieni się na prawy górny róg obszaru docelowego, a punkt wyrównania okna podręcznego zmieni się na lewy górny róg klasy Popup. Wyrównanie do prawej krawędzi.
Mouse Wyrównanie do górnej krawędzi. Źródło docelowe zmieni się na lewy górny róg obszaru docelowego (granice wskaźnika myszy), a punkt wyrównania okna podręcznego zmieni się na lewy dolny róg klasy Popup. Wyrównanie do lewej krawędzi. Wyrównanie do prawej krawędzi.
MousePoint Wyrównanie do górnej krawędzi. Punkt wyrównania okna podręcznego zmieni się na lewy dolny róg klasy Popup. Wyrównanie do lewej krawędzi. Punkt wyrównania okna podręcznego zmieni się na prawy górny róg okna podręcznego.
Relative Wyrównanie do górnej krawędzi. Wyrównanie do dolnej krawędzi. Wyrównanie do lewej krawędzi. Wyrównanie do prawej krawędzi.
RelativePoint Wyrównanie do górnej krawędzi. Punkt wyrównania okna podręcznego zmieni się na lewy dolny róg klasy Popup. Wyrównanie do lewej krawędzi. Punkt wyrównania okna podręcznego zmieni się na prawy górny róg okna podręcznego.
Right Wyrównanie do górnej krawędzi. Wyrównanie do dolnej krawędzi. Wyrównanie do lewej krawędzi. Źródło docelowe zmieni się na lewy górny róg obszaru docelowego, a punkt wyrównania okna podręcznego zmieni się na prawy górny róg klasy Popup.
Top Źródło docelowe zmieni się na lewy dolny róg obszaru docelowego, a punkt wyrównania okna podręcznego zmieni się na lewy górny róg klasy Popup. Efekty jest taki sam, jak w przypadku, gdy właściwość Placement ma wartość Bottom. Wyrównanie do dolnej krawędzi. Wyrównanie do lewej krawędzi. Wyrównanie do prawej krawędzi.

Wyrównywanie do krawędzi ekranu

Klasa Popup może wyrównać się do krawędzi ekranu, zmieniając swoje położenie tak, aby cała klasa Popup była widoczna na ekranie. Gdy tak się stanie, odległość między źródłem docelowym a punktem wyrównania okna podręcznego może być inna niż wartości właściwości HorizontalOffset i VerticalOffset. Gdy właściwość Placement ma wartość Absolute, Center lub Relative, klasa Popup wyrównuje się do każdej krawędzi ekranu. Załóżmy na przykład, że klasa Popup ma właściwość Placement ustawioną na wartość Relative i właściwość VerticalOffset ustawioną na wartość 100. Jeśli dolna krawędź ekranu ukrywa całą klasę Popup lub jej część, klasa Popup zmienia położenie wzdłuż dolnej krawędzi ekranu, a odległość w pionie między źródłem docelowym a punktem wyrównania okna podręcznego wynosi mniej niż 100. Przedstawiono to na poniższej ilustracji.

Popup that aligns to edge of screen

Zmiana punktu wyrównania okna podręcznego

Jeśli właściwość Placement ma wartość AbsolutePoint, RelativePoint lub MousePoint, punkt wyrównania okna podręcznego zmieni się, gdy okno podręczne napotka dolną lub prawą krawędź ekranu.

Na poniższej ilustracji przedstawiono, że gdy dolna krawędź ekranu ukrywa całą klasę Popup lub jej część, punkt wyrównania okna podręcznego to lewy dolny róg klasy Popup.

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

Na poniższej ilustracji przedstawiono, że gdy klasa Popup jest ukryta przez prawą krawędź ekranu, punkt wyrównania okna podręcznego to prawy górny róg klasy Popup.

New popup alignment point due to screen edge

Jeśli klasa Popup napotyka dolną i prawą krawędź ekranu, punkt wyrównania okna podręcznego to prawy dolny róg klasy Popup.

Zmiana źródła docelowego i punktu wyrównania okna podręcznego

Gdy właściwość Placement ma wartość Bottom, Left, Mouse, Right lub Top, źródło docelowe i punkt wyrównania okna podręcznego ulegają zmianie, jeśli zostanie napotkana dana krawędź ekranu. Krawędź ekranu powodująca zmianę położenia zależy od wartości właściwości PlacementMode.

Na poniższej ilustracji przedstawiono, że gdy właściwość Placement ma wartość Bottom, a klasa Popup napotka dolną krawędź ekranu, źródło docelowe to lewy górny róg obszaru docelowego, a punkt wyrównania okna podręcznego to lewy dolny róg klasy Popup.

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.

Na poniższej ilustracji przedstawiono, że gdy właściwość Placement ma wartość Left, a klasa Popup napotka lewą krawędź ekranu, źródło docelowe to prawy górny róg obszaru docelowego, a punkt wyrównania okna podręcznego to lewy górny róg klasy Popup.

New alignment point due to left screen edge

Na poniższej ilustracji przedstawiono, że gdy właściwość Placement ma wartość Right, a klasa Popup napotka prawą krawędź ekranu, źródło docelowe to lewy górny róg obszaru docelowego, a punkt wyrównania okna podręcznego to prawy górny róg klasy Popup.

New alignment point due to right screen edge

Na poniższej ilustracji przedstawiono, że gdy właściwość Placement ma wartość Top, a klasa Popup napotka górną krawędź ekranu, źródło docelowe to lewy dolny róg obszaru docelowego, a punkt wyrównania okna podręcznego to lewy górny róg klasy Popup.

New alignment point due to top screen edge

Na poniższej ilustracji przedstawiono, że gdy właściwość Placement ma wartość Mouse, a klasa Popup napotka dolną krawędź ekranu, źródło docelowe to lewy górny róg obszaru docelowego (granice wskaźnika myszy), a punkt wyrównania okna podręcznego to lewy dolny róg klasy Popup.

new alignment point due to mouse near screen edge

Dostosowywanie położenia okna podręcznego

Możesz dostosować źródło docelowe i punkt wyrównania okna podręcznego, ustawiając właściwość Placement na wartość Custom. Następnie zdefiniuj delegata CustomPopupPlacementCallback, który zwraca zestaw możliwych punktów umieszczania i osi podstawowych (w kolejności preferencji) dla klasy Popup. Zostanie wybrany punkt pokazujący największą część klasy Popup. Pozycja klasy Popup jest automatycznie dostosowywana, jeśli klasa Popup jest ukryta przez brzeg ekranu. Aby zapoznać się z przykładem, zobacz Określanie niestandardowego położenia okna podręcznego.

Zobacz też