Udostępnij za pośrednictwem


Zachowanie rozmieszczania okna podręcznego

Kontrolka Popup wyświetla zawartość w osobnym oknie, które unosi się nad aplikacją. Możesz określić położenie Popup względem kontrolki, myszy lub ekranu przy użyciu właściwości PlacementTarget, Placement, PlacementRectangle, HorizontalOffseti VerticalOffset. Te właściwości działają razem, by dać Ci elastyczność w określaniu pozycji Popup.

Notatka

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

Pozycjonowanie wyskakującego okienka

Umieszczenie Popup może odnosić się względem UIElement lub całego ekranu. Poniższy przykład przedstawia tworzenie czterech kontrolek Popup odnoszących się do UIElement— w tym przypadku obrazu. Wszystkie kontrolki Popup mają właściwość PlacementTarget ustawioną na image1, ale każda Popup ma inną wartość właściwości umieszczania.

<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

Obraz z czterema kontrolkami wyskakujących okienek

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

![UWAGA] W zależności od ustawień Windows związanych z ręcznością, wyskakujące okienko może być wyrównane do lewej lub prawej, kiedy jest wyświetlane na górze lub na dole. Na poprzedniej ilustracji pokazano wyrównanie praworęcznych, co powoduje, że wyskakujące okienko pojawia się po lewej stronie.

Definicje terminów: Anatomia wyskakującego okienka

Poniższe terminy są przydatne w zrozumieniu, w jaki sposób właściwości PlacementTarget, Placement, PlacementRectangle, HorizontalOffseti VerticalOffset odnoszą się do siebie i Popup:

  • Obiekt docelowy

  • Obszar docelowy

  • Źródło docelowe

  • Punkt wyrównania okienka wyskakującego

Te terminy zapewniają wygodny sposób odwoływania się do różnych aspektów Popup i kontroli, z którą jest skojarzona.

Obiekt docelowy

Obiekt docelowy jest elementem skojarzonym z Popup. Jeśli właściwość PlacementTarget jest ustawiona, określa obiekt docelowy. Jeśli PlacementTarget nie jest ustawiona, a Popup ma obiekt nadrzędny, obiekt nadrzędny jest obiektem docelowym. Jeśli nie ma wartości PlacementTarget i nie ma obiektu nadrzędnego, nie ma obiektu docelowego, a Popup jest umieszczony względem ekranu.

W poniższym przykładzie zostanie utworzona Popup podrzędna Canvas. W przykładzie nie ustawiono właściwości PlacementTarget w Popup. Wartość domyślna Placement to PlacementMode.Bottom, więc Popup pojawia się poniżej 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 pokazano, że Popup jest umieszczona względem Canvas.

okienko popup bez elementu PlacementTarget

Poniższy przykład tworzy Popup, który jest elementem podrzędnym Canvas, ale tym razem PlacementTarget jest ustawiony na ellipse1, więc wyskakujące okienko pojawi się poniżej 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 pokazano, że Popup jest umieszczona względem Ellipse.

położenie wyskakującego okienka względem elipsy

Notatka

W przypadku ToolTipwartość domyślna Placement to Mouse. W przypadku ContextMenuwartość domyślna Placement to MousePoint. Te wartości zostały wyjaśnione później w sekcji "Jak działają właściwości razem".

Obszar docelowy

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

Poniższy przykład tworzy dwa obiekty Canvas, z których każdy zawiera Rectangle i Popup. W obu przypadkach obiektem docelowym Popup jest Canvas. Popup w pierwszym Canvas ma zestaw PlacementRectangle z X, Y, Widthi Height właściwości ustawione odpowiednio na 50, 50, 50 i 100. Popup w drugim Canvas nie ma zestawu PlacementRectangle. W rezultacie pierwsza Popup znajduje się poniżej PlacementRectangle, a druga Popup znajduje się poniżej Canvas. Każda Canvas zawiera również Rectangle, która ma takie same ograniczenia jak PlacementRectangle dla pierwszego Popup. Należy pamiętać, że PlacementRectangle nie tworzy widocznego elementu w aplikacji; w przykładzie zostanie utworzona Rectangle reprezentująca 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>

Poniższa ilustracja przedstawia wynik poprzedniego przykładu.

wyskakujące okienko z i bez PlacementRectangle

Pochodzenie docelowe i punkt wyrównania wyskakujących okienek

docelowy punkt początkowy pochodzenia i punkt wyrównania wyskakującego są punktami odniesienia odpowiednio w obszarze docelowym i w oknie wyskakującym, które są używane do pozycjonowania. Możesz użyć właściwości HorizontalOffset i VerticalOffset, aby przesunąć wyskakujące okienko względem obszaru docelowego. HorizontalOffset i VerticalOffset odnoszą się do punktu odniesienia oraz do punktu wyrównania elementu wyskakującego. Wartość właściwości Placement określa, gdzie znajdują się docelowe źródło i punkt wyrównania okienka podręcznego.

Poniższy przykład tworzy Popup i ustawia właściwości HorizontalOffset i VerticalOffset na 20. Właściwość Placement jest ustawiona na Bottom (wartość domyślna), więc początek docelowy jest lewym dolnym rogiem obszaru docelowego, a punkt wyrównania wyskakującego jest w lewym górnym rogu 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>

Poniższa ilustracja przedstawia wynik poprzedniego przykładu.

umieszczanie wyskakujących okienek z punktem wyrównania względem źródła celu

Jak działają właściwości razem

Należy rozważyć wartości PlacementTarget, PlacementRectanglei Placement łącznie, aby ustalić prawidłowy obszar docelowy, źródło docelowe i punkt wyrównania wyskakującego okienka. Jeśli na przykład wartość Placement jest Mouse, nie ma obiektu docelowego, PlacementRectangle jest ignorowany, a obszar docelowy jest granicą wskaźnika myszy. Z drugiej strony, jeśli Placement jest Bottom, PlacementTarget lub element nadrzędny określa obiekt docelowy, a PlacementRectangle określa obszar docelowy.

W poniższej tabeli opisano obiekt docelowy, obszar docelowy, pochodzenie obiektu docelowego i punkt wyrównania okna wyskakującego oraz wskazano, czy PlacementTarget i PlacementRectangle są używane dla każdej wartości wyliczenia PlacementMode.

Tryb rozmieszczania Obiekt docelowy Obszar docelowy Pochodzenie docelowe Punkt wyrównania okienka wyskakującego
Absolute Nie dotyczy. PlacementTarget jest ignorowana. Ekran lub PlacementRectangle, jeśli został ustawiony. PlacementRectangle odnosi się do ekranu. Lewy górny róg obszaru docelowego. Lewy górny róg Popup.
AbsolutePoint Nie dotyczy. PlacementTarget jest ignorowana. Ekran lub PlacementRectangle, jeśli został ustawiony. PlacementRectangle jest powiązany z ekranem. Lewy górny róg obszaru docelowego. Lewy górny róg Popup.
Bottom PlacementTarget lub element macierzysty. Obiekt docelowy lub PlacementRectangle, jeśli został ustawiony. PlacementRectangle odnosi się do obiektu docelowego. Lewy dolny róg obszaru docelowego. Lewy górny róg Popup.
Center PlacementTarget lub element nadrzędny. Obiekt docelowy lub PlacementRectangle, jeśli został ustawiony. PlacementRectangle odnosi się do obiektu docelowego. Środek obszaru docelowego. Środek Popup.
Custom PlacementTarget lub element nadrzędny. Obiekt docelowy lub PlacementRectangle, jeśli został ustawiony. PlacementRectangle jest względem obiektu docelowego. Zdefiniowane przez CustomPopupPlacementCallback. Zdefiniowane przez CustomPopupPlacementCallback.
Left PlacementTarget lub element nadrzędny. Obiekt docelowy lub PlacementRectangle, jeśli został ustawiony. PlacementRectangle odnosi się do obiektu docelowego. Lewy górny róg obszaru docelowego. Prawy górny róg Popup.
Mouse Nie dotyczy. PlacementTarget jest ignorowana. Granice wskaźnika myszy. PlacementRectangle jest ignorowana. Lewy dolny róg obszaru docelowego. Lewy górny róg Popup.
MousePoint Nie dotyczy. PlacementTarget jest ignorowana. Ograniczenia wskaźnika myszy. PlacementRectangle jest ignorowana. Lewy górny róg obszaru docelowego. Lewy górny róg Popup.
Relative PlacementTarget lub element nadrzędny. Obiekt docelowy lub PlacementRectangle, jeśli został ustawiony. Obiekt docelowy jest punktem odniesienia dla PlacementRectangle. Lewy górny róg obszaru docelowego. Lewy górny róg Popup.
RelativePoint PlacementTarget lub element nadrzędny. Obiekt docelowy lub PlacementRectangle, jeśli został ustawiony. PlacementRectangle jest określone względem obiektu docelowego. Lewy górny róg obszaru docelowego. Lewy górny róg Popup.
Right PlacementTarget lub element nadrzędny. Obiekt docelowy lub PlacementRectangle, jeśli został ustawiony. PlacementRectangle odnosi się do obiektu docelowego. Prawy górny róg obszaru docelowego. Lewy górny róg Popup.
Top PlacementTarget lub element nadrzędny. Obiekt docelowy lub PlacementRectangle, jeśli został ustawiony. PlacementRectangle jest relatywne w stosunku do obiektu docelowego. Lewy górny róg obszaru docelowego. Lewy dolny róg Popup.

Na poniższych ilustracjach przedstawiono Popup, obszar docelowy, pochodzenie obiektu docelowego i punkt wyrównania wyskakującego okienka dla każdej wartości PlacementMode. Na każdym rysunku obszar docelowy jest żółty, a Popup jest niebieski.

wyskakujące okienko z położeniem bezwzględnym lub bezwzględnym punktu

wyskakujące okienko z położeniem dolnym .

wyskakujące okienko o środkowym położeniu

Wyskakujące okienko po lewej stronie

wyskakujące okienko z umieszczaniem myszy

wyskakujące okienko z umiejscowieniem MousePoint

wyskakujące okienko z położeniem względnym lub względnym

wyskakujące okienko z położeniem prawym,

wyskakujące okienko z umieszczeniem na górze.

Gdy wyskakujące okienko napotka krawędź ekranu

Ze względów bezpieczeństwa Popup nie może być ukryta przez krawędź ekranu. Jedna z następujących trzech rzeczy występuje, gdy Popup napotka krawędź ekranu:

  • Wyskakujące okienko zwiększa się wzdłuż krawędzi ekranu, co spowoduje ukrycie Popup.

  • Wyskakujące okienko używa innego punktu wyrównania.

  • Okno podręczne używa innego punktu początkowego miejsca docelowego i punktu wyrównania wyskakującego.

Te opcje zostały opisane w dalszej części tej sekcji.

Zachowanie Popup, gdy napotka krawędź ekranu, zależy od wartości właściwości Placement i od tego, którą krawędź ekranu napotka wyskakujące okienko. W poniższej tabeli przedstawiono podsumowanie zachowania, gdy Popup napotka krawędź ekranu dla każdej wartości PlacementMode.

PlacementMode Górna krawędź Krawędź dolna Lewa krawędź Prawa krawędź
Absolute Wyrównuje do górnej krawędzi. Wyrównuje się do dolnej krawędzi. Wyrównuje się do lewej krawędzi. Wyrównuje się do prawej krawędzi.
AbsolutePoint Wyrównuje do górnej krawędzi. Punkt wyrównania wyskakującego okienka zmienia się na lewy dolny róg elementu Popup. Wyrównuje się do lewej krawędzi. Punkt wyrównania wyskakującego zmienia się w prawym górnym rogu Popup.
Bottom Wyrównuje do górnej krawędzi. Punkt początkowy zmienia się na lewy górny róg obszaru docelowego, a punkt wyrównania okienka zmienia się na lewy dolny róg Popup. Wyrównuje się do lewej krawędzi. Wyrównuje się do prawej krawędzi.
Center Wyrównuje do górnej krawędzi. Wyrównuje się do dolnej krawędzi. Wyrównuje się do lewej krawędzi. Wyrównuje się do prawej krawędzi.
Left Wyrównuje do górnej krawędzi. Wyrównuje się do dolnej krawędzi. Punkt początkowy zmienia się na prawy górny róg obszaru docelowego, a punkt wyrównania wyskakującego okna zmienia się na lewy górny róg Popup. Wyrównuje się do prawej krawędzi.
Mouse Wyrównuje do górnej krawędzi. Punkt odniesienia zmienia się na lewy górny róg obszaru docelowego (obramowanie wskaźnika myszy), a punkt wyrównania wyskakującego okienka zmienia się na lewy dolny róg Popup. Wyrównuje się do lewej krawędzi. Wyrównuje się do prawej krawędzi.
MousePoint Wyrównuje do górnej krawędzi. Punkt wyrównania wyskakującego zmienia się w lewym dolnym rogu Popup. Wyrównuje się do lewej krawędzi. Punkt wyrównania okienka zmienia się na prawy górny róg okienka.
Relative Wyrównuje do górnej krawędzi. Wyrównuje się do dolnej krawędzi. Wyrównuje się do lewej krawędzi. Wyrównuje się do prawej krawędzi.
RelativePoint Wyrównuje do górnej krawędzi. Punkt wyrównania okienka zmienia się na dolny lewy róg Popup. Wyrównuje się do lewej krawędzi. Punkt wyrównania wyskakującego okienka zmienia się na prawy górny róg.
Right Wyrównuje się do górnej krawędzi. Wyrównuje się do dolnej krawędzi. Wyrównuje się do lewej krawędzi. Pochodzenie docelowe zmienia się na lewy górny róg obszaru docelowego, a punkt dopasowania wyskakującego okienka zmienia się na prawy górny róg Popup.
Top Źródło docelowe zmienia się w lewym dolnym rogu obszaru docelowego, a punkt wyrównania wyskakującego zmienia się w lewym górnym rogu Popup. W efekcie jest to to samo, co gdy Placement jest Bottom. Wyrównuje się do dolnej krawędzi. Wyrównuje się do lewej krawędzi. Wyrównuje się do prawej krawędzi.

Wyrównanie do krawędzi ekranu

Popup może wyrównywać się do krawędzi ekranu, zmieniając położenie, aby cały Popup był widoczny na ekranie. W takim przypadku odległość między docelowym źródłem a punktem wyrównania wyskakującego może różnić się od wartości HorizontalOffset i VerticalOffset. Gdy Placement jest Absolute, Centerlub Relative, Popup ustawia się do każdej krawędzi ekranu. Załóżmy na przykład, że Popup ma Placement ustawioną na Relative i VerticalOffset ustawioną na 100. Jeśli dolna krawędź ekranu ukrywa wszystkie lub część Popup, Popup zmienia położenie się wzdłuż dolnej krawędzi ekranu i odległość pionową między punktem początkowym docelowym a punktem wyrównania wyskakującego jest mniejsza niż 100. Na poniższej ilustracji przedstawiono to.

Wyskakujące okienko wyrównane do krawędzi ekranu,

Zmienianie punktu ustawienia okienka

Jeśli Placement jest AbsolutePoint, RelativePointalbo MousePoint, punkt wyrównania wyskakującego okna zmieni się, gdy okno napotka dolną lub prawą krawędź ekranu.

Na poniższym obrazku pokazano, że gdy dolna krawędź ekranu ukrywa wszystkie lub część Popup, punkt odniesienia wyskakującego okienka to lewy dolny róg Popup.

Zrzut ekranu pokazujący obszar docelowy, gdzie punkt wyrównania wyskakującego okienka wychodzi poza krawędź ekranu w lewym dolnym rogu.

Poniższa ilustracja pokazuje, że gdy Popup jest ukryty przez prawą krawędź ekranu, punktem wyrównania wyskakującego okna jest prawy górny róg Popup.

Nowy punkt wyrównania wyskakującego okienka z powodu krawędzi ekranu

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

Zmienianie docelowej lokalizacji i punktu wyrównania okna wyskakującego

Gdy Placement jest Bottom, Left, Mouse, Rightlub Top, położenie docelowe i punkt wyrównania dla wyskakujących okien zmienią się, jeśli zostanie napotkana pewna krawędź ekranu. Krawędź ekranu, która powoduje zmianę położenia, zależy od wartości PlacementMode.

Na poniższej ilustracji pokazano, że gdy Placement jest Bottom, a Popup napotka dolną krawędź ekranu, źródło docelowe znajduje się w lewym górnym rogu obszaru docelowego, a punkt wyrównania wyskakującego okna to lewy dolny róg Popup.

Zrzut ekranu przedstawiający obszar docelowy w górnej połowie ekranu z punktem wyrównania wyskakującego okienka w dolnej połowie ekranu z przesunięciem pionowym o wartości 5.

Na poniższej ilustracji pokazano, że gdy Placement jest Left, a Popup napotka lewą krawędź ekranu, miejsce docelowe to prawy górny róg obszaru docelowego, a punkt wyrównania wyskakującego okienka to lewy górny róg Popup.

Nowy punkt wyrównania ze względu na lewą krawędź ekranu

Na poniższej ilustracji pokazano, że gdy Placement jest Right, a Popup napotka prawą krawędź ekranu, punkt początkowy jest lewym górnym rogiem obszaru docelowego, a punkt wyrównania okna podręcznego to prawy górny róg Popup.

Nowy punkt wyrównania ze względu na prawą krawędź ekranu,

Na poniższej ilustracji pokazano, że gdy Placement jest Top, a Popup napotka górną krawędź ekranu, źródło docelowe jest lewym dolnym rogiem obszaru docelowego, a punkt wyrównania wyskakującego jest lewym górnym rogiem Popup.

Nowy punkt wyrównania ze względu na górną krawędź ekranu,

Na poniższej ilustracji pokazano, że gdy Placement jest Mouse, a Popup osiąga dolną krawędź ekranu, punkt początkowy celu znajduje się w lewym górnym rogu obszaru docelowego (granice wskaźnika myszy), a punkt wyrównania wyskakującego okna to lewy dolny róg Popup.

pl-PL: nowy punkt wyrównania spowodowany myszą w pobliżu krawędzi ekranu

Dostosowywanie umieszczania wyskakujących okienek

Możesz zmienić docelowe źródło i punkt wyrównania wyskakującego okienka, ustawiając właściwość Placement na wartość Custom. Następnie zdefiniuj delegata CustomPopupPlacementCallback, który zwraca zestaw możliwych punktów umieszczania i głównych osi (w kolejności preferencji) dla Popup. Punkt pokazujący największą część Popup jest zaznaczony. Położenie Popup jest automatycznie dostosowywane, jeśli Popup jest ukryta przez krawędź ekranu. Aby zapoznać się z przykładem, zobacz Określanie niestandardowej pozycji podręcznej.

Zobacz też