Zachowanie położenia okna podręcznego
Kontrolka Popup wyświetla zawartość w osobnym oknie, które unosi się nad aplikacją. Możesz określić położenie kontrolki Popup , myszy lub ekranu przy użyciu PlacementTargetwłaściwości , Placement, PlacementRectangle, HorizontalOffseti VerticalOffset . Te właściwości współpracują ze sobą, aby zapewnić elastyczność określania pozycji elementu Popup.
Uwaga
Klasy ToolTip i ContextMenu definiują również te pięć właściwości i zachowują się podobnie.
Pozycjonowanie wyskakującego okienka
Umieszczenie obiektu Popup może być względne względem elementu UIElement lub do całego ekranu. W poniższym przykładzie są tworzone cztery Popup kontrolki względne — UIElementw tym przypadku obraz. Wszystkie kontrolki Popup mają PlacementTarget właściwość ustawioną na image1, ale każda z nich 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>
Poniższa ilustracja przedstawia obraz i kontrolki Popup
W tym prostym przykładzie pokazano, jak ustawić PlacementTarget właściwości i Placement , ale przy użyciu PlacementRectanglewłaściwości , HorizontalOffseti VerticalOffset masz jeszcze większą kontrolę nad lokalizacją Popup obiektu .
Definicje terminów: Anatomia wyskakującego okienka
Poniższe terminy są przydatne w zrozumieniu, jak PlacementTargetwłaściwości , Placement, PlacementRectanglei VerticalOffsetHorizontalOffsetodnoszą się do siebie nawzajem i :Popup
Obiekt docelowy
Obszar docelowy
Źródło obiektu docelowego
Punkt wyrównania wyskakującego okienka
Te terminy zapewniają wygodny sposób odwoływania się do różnych aspektów Popup i kontroli, z którą jest ona skojarzona.
Obiekt docelowy
Obiekt docelowy jest elementem Popup skojarzonym z. PlacementTarget Jeśli właściwość jest ustawiona, określa obiekt docelowy. Jeśli PlacementTarget nie jest ustawiona, a obiekt Popup nadrzędny ma obiekt nadrzędny, jest obiektem docelowym. Jeśli nie PlacementTarget ma wartości i nie ma elementu nadrzędnego, nie ma obiektu docelowego i Popup jest umieszczony względem ekranu.
Poniższy przykład tworzy element Popup podrzędny elementu Canvas. Przykład nie ustawia PlacementTarget właściwości w obiekcie Popup. Wartością domyślną parametru Placement jest PlacementMode.Bottom, więc jest Popup wyświetlana poniżej elementu 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 pozycja jest umieszczona względem elementu Canvas.
Poniższy przykład tworzy element Popup podrzędny elementu Canvas, ale tym razem PlacementTarget parametr jest ustawiony na ellipse1wartość , więc okienko podręczne 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 pozycja jest umieszczona względem elementu Ellipse.
Uwaga
W przypadku ToolTipparametru wartość domyślna Placement to Mouse. W przypadku ContextMenuparametru wartość 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, z którego Popup jest względny. W poprzednich przykładach element Popup jest wyrównany do granic obiektu docelowego, ale w niektórych przypadkach Popup element jest wyrównany do innych granic, nawet jeśli Popup obiekt docelowy ma obiekt docelowy. PlacementRectangle Jeśli właściwość jest ustawiona, obszar docelowy różni się od granic obiektu docelowego.
Poniższy przykład tworzy dwa Canvas obiekty, z których każdy zawiera element Rectangle i .Popup W obu przypadkach obiektem docelowym obiektu Popup jest Canvas. Element Popup w pierwszym Canvas z nich ma PlacementRectangle zestaw z właściwościami X, , WidthYi Height ustawionymi odpowiednio na 50, 50, 50 i 100. W Popup drugim Canvas nie ma PlacementRectangle zestawu. W rezultacie pierwsza Popup pozycja znajduje się poniżej, PlacementRectangle a druga Popup znajduje się poniżej .Canvas Każda z nich Canvas zawiera Rectangle również te same granice co PlacementRectangle dla pierwszego Popupelementu . Zwróć uwagę, że element PlacementRectangle nie tworzy widocznego elementu w aplikacji. W przykładzie zostanie utworzony Rectangle element reprezentujący PlacementRectangleelement .
<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.
Docelowy punkt wyrównania źródła i wyskakującego okienka
Docelowy punkt wyrównania i punkt wyrównania wyskakującego są punktami odniesienia odpowiednio w obszarze docelowym i wyskakującym, które są używane do pozycjonowania. Właściwości i VerticalOffset umożliwiają HorizontalOffset przesunięcie wyskakującego okna podręcznego z obszaru docelowego. Wartości HorizontalOffset i VerticalOffset są względne względem źródła docelowego i punktu wyrównania wyskakującego. Wartość Placement właściwości określa, gdzie znajduje się docelowy punkt wyrównania źródła i wyskakujących okienek.
Poniższy przykład tworzy Popup obiekt i ustawia HorizontalOffset właściwości i VerticalOffset na wartość 20. Właściwość Placement jest ustawiona na Bottom (wartość domyślna), więc źródło docelowe jest lewym dolnym rogu obszaru docelowego, a punkt wyrównania wyskakującego to lewy górny róg 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.
Jak właściwości współpracują ze sobą
Wartości PlacementTarget, PlacementRectanglei Placement należy wziąć pod uwagę razem, aby ustalić prawidłowy obszar docelowy, źródło docelowe i punkt wyrównania wyskakującego. Jeśli na przykład wartość Placement to Mouse, nie ma obiektu docelowego, PlacementRectangle obiekt jest ignorowany, a obszar docelowy jest granicą wskaźnika myszy. Z drugiej strony, jeśli Placement jest , element PlacementTarget nadrzędny lub określa obiekt docelowy i PlacementRectangle określa Bottomobszar docelowy.
W poniższej tabeli opisano obiekt docelowy, obszar docelowy, źródło obiektu docelowego i punkt wyrównania wyskakującego oraz wskazuje, czy PlacementTarget i PlacementRectangle są używane dla każdej PlacementMode wartości wyliczenia.
| Placementmode | Obiekt docelowy | Obszar docelowy | Źródło obiektu docelowego | Punkt wyrównania wyskakującego okienka |
|---|---|---|---|---|
| Absolute | Nie dotyczy. Parametr PlacementTarget jest ignorowany. | Ekran lub PlacementRectangle jeśli jest ustawiony. Element PlacementRectangle jest względny względem ekranu. | Lewy górny róg obszaru docelowego. | Lewy górny róg obiektu Popup. |
| AbsolutePoint | Nie dotyczy. Parametr PlacementTarget jest ignorowany. | Ekran lub PlacementRectangle jeśli jest ustawiony. Element PlacementRectangle jest względny względem ekranu. | Lewy górny róg obszaru docelowego. | Lewy górny róg obiektu Popup. |
| Bottom | PlacementTarget lub element nadrzędny. | Obiekt docelowy lub PlacementRectangle jeśli jest ustawiony. Obiekt PlacementRectangle jest względny względem obiektu docelowego. | Lewy dolny róg obszaru docelowego. | Lewy górny róg obiektu Popup. |
| Center | PlacementTarget lub element nadrzędny. | Obiekt docelowy lub PlacementRectangle jeśli jest ustawiony. Obiekt PlacementRectangle jest względny względem obiektu docelowego. | Środek obszaru docelowego. | Środek obiektu Popup. |
| Custom | PlacementTarget lub element nadrzędny. | Obiekt docelowy lub PlacementRectangle jeśli jest ustawiony. Obiekt PlacementRectangle jest względny względem obiektu docelowego. | Zdefiniowane przez element CustomPopupPlacementCallback. | Zdefiniowane przez element CustomPopupPlacementCallback. |
| Left | PlacementTarget lub element nadrzędny. | Obiekt docelowy lub PlacementRectangle jeśli jest ustawiony. Obiekt PlacementRectangle jest względny względem obiektu docelowego. | Lewy górny róg obszaru docelowego. | Prawy górny róg obiektu Popup. |
| Mouse | Nie dotyczy. Parametr PlacementTarget jest ignorowany. | Granice wskaźnika myszy. Parametr PlacementRectangle jest ignorowany. | Lewy dolny róg obszaru docelowego. | Lewy górny róg obiektu Popup. |
| MousePoint | Nie dotyczy. Parametr PlacementTarget jest ignorowany. | Granice wskaźnika myszy. Parametr PlacementRectangle jest ignorowany. | Lewy górny róg obszaru docelowego. | Lewy górny róg obiektu Popup. |
| Relative | PlacementTarget lub element nadrzędny. | Obiekt docelowy lub PlacementRectangle jeśli został ustawiony. Obiekt PlacementRectangle jest powiązany z obiektem docelowym. | Lewy górny róg obszaru docelowego. | Lewy górny róg obiektu Popup. |
| RelativePoint | PlacementTarget lub element nadrzędny. | Obiekt docelowy lub PlacementRectangle jeśli został ustawiony. Obiekt PlacementRectangle jest powiązany z obiektem docelowym. | Lewy górny róg obszaru docelowego. | Lewy górny róg obiektu Popup. |
| Right | PlacementTarget lub element nadrzędny. | Obiekt docelowy lub PlacementRectangle jeśli został ustawiony. Obiekt PlacementRectangle jest powiązany z obiektem docelowym. | Prawy górny róg obszaru docelowego. | Lewy górny róg obiektu Popup. |
| Top | PlacementTarget lub element nadrzędny. | Obiekt docelowy lub PlacementRectangle jeśli został ustawiony. Obiekt PlacementRectangle jest powiązany z obiektem docelowym. | Lewy górny róg obszaru docelowego. | Lewy dolny róg obiektu Popup. |
Na poniższych ilustracjach przedstawiono Popuppunkt wyrównania , obszar docelowy, źródło docelowe i punkt wyrównania wyskakującego okienka dla każdej PlacementMode wartości. Na każdej ilustracji obszar docelowy jest żółty i Popup niebieski.
Gdy okienko podręczne napotka krawędź ekranu
Ze względów Popup bezpieczeństwa nie można ukryć krawędzi ekranu. Jedna z następujących trzech rzeczy występuje, gdy Popup napotkasz krawędź ekranu:
Popup realigns się wzdłuż krawędzi ekranu, które zasłonić Popup.
Wyskakujące okienko używa innego punktu wyrównania wyskakującego.
Wyskakujące okienko 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 obiektu, gdy napotka krawędź ekranu, zależy od wartości Placement właściwości i krawędzi ekranu, którą napotka okno podręczne. Poniższa tabela zawiera podsumowanie zachowania w przypadku Popup napotkania krawędzi ekranu dla każdej PlacementMode wartości.
| Placementmode | Górna krawędź | Dolna krawędź | Lewa krawędź | Prawa krawędź |
|---|---|---|---|---|
| Absolute | Wyrównuje do górnej krawędzi. | Wyrównuje do dolnej krawędzi. | Wyrównuje do lewej krawędzi. | Wyrównuje do prawej krawędzi. |
| AbsolutePoint | Wyrównuje do górnej krawędzi. | Punkt wyrównania wyskakującego zmienia się w lewym dolnym rogu obiektu Popup. | Wyrównuje do lewej krawędzi. | Punkt wyrównania wyskakującego zmienia się w prawym górnym rogu obiektu Popup. |
| Bottom | Wyrównuje do górnej krawędzi. | Źródło docelowe zmienia się w lewym górnym rogu obszaru docelowego, a punkt wyrównania wyskakującego zmienia się w lewym dolnym rogu Popupobiektu . | Wyrównuje do lewej krawędzi. | Wyrównuje do prawej krawędzi. |
| Center | Wyrównuje do górnej krawędzi. | Wyrównuje do dolnej krawędzi. | Wyrównuje do lewej krawędzi. | Wyrównuje do prawej krawędzi. |
| Left | Wyrównuje do górnej krawędzi. | Wyrównuje do dolnej krawędzi. | Źródło docelowe zmienia się w prawym górnym rogu obszaru docelowego, a punkt wyrównania wyskakującego zmienia się w lewym górnym rogu Popupobiektu . | Wyrównuje do prawej krawędzi. |
| Mouse | Wyrównuje do górnej krawędzi. | Źródło docelowe zmienia się w lewym górnym rogu obszaru docelowego (granice wskaźnika myszy), a punkt wyrównania wyskakującego zmienia się w lewym dolnym rogu Popupobiektu . | Wyrównuje do lewej krawędzi. | Wyrównuje do prawej krawędzi. |
| MousePoint | Wyrównuje do górnej krawędzi. | Punkt wyrównania wyskakującego zmienia się w lewym dolnym rogu obiektu Popup. | Wyrównuje do lewej krawędzi. | Punkt wyrównania wyskakującego zmienia się w prawym górnym rogu wyskakującego okienka. |
| Relative | Wyrównuje do górnej krawędzi. | Wyrównuje do dolnej krawędzi. | Wyrównuje do lewej krawędzi. | Wyrównuje do prawej krawędzi. |
| RelativePoint | Wyrównuje do górnej krawędzi. | Punkt wyrównania wyskakującego zmienia się w lewym dolnym rogu obiektu Popup. | Wyrównuje do lewej krawędzi. | Punkt wyrównania wyskakującego zmienia się w prawym górnym rogu wyskakującego okienka. |
| Right | Wyrównuje do górnej krawędzi. | Wyrównuje do dolnej krawędzi. | Wyrównuje do lewej krawędzi. | Źródło docelowe zmienia się w lewym górnym rogu obszaru docelowego, a punkt wyrównania wyskakującego zmienia się w prawym górnym rogu Popupobiektu . |
| 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 Popupobiektu . W efekcie jest to takie samo, jak w przypadku , gdy Placement parametr ma Bottomwartość . | Wyrównuje do dolnej krawędzi. | Wyrównuje do lewej krawędzi. | Wyrównuje do prawej krawędzi. |
Wyrównywanie do krawędzi ekranu
Element Popup może być wyrównany do krawędzi ekranu, zmieniając położenie, tak aby cała część Popup ekranu jest widoczna na ekranie. W takim przypadku odległość między docelowym źródłem i punktem wyrównania wyskakującego może różnić się od wartości HorizontalOffset i VerticalOffset. Gdy Placement wartość to Absolute, Centerlub Relative, Popup wyrównuje się do każdej krawędzi ekranu. Załóżmy na przykład, że dla elementu Popup ustawiono Placement wartość Relative i VerticalOffset ustawiono wartość 100. Jeśli dolna krawędź ekranu ukrywa wszystkie lub część Popupobiektu , Popup zmienia położenie się wzdłuż dolnej krawędzi ekranu i odległość pionową między źródłem docelowym a punktem wyrównania wyskakującego jest mniejsza niż 100. Na poniższej ilustracji przedstawiono to.
Zmienianie punktu wyrównania wyskakującego
Jeśli Placement jest to AbsolutePoint, RelativePointlub MousePoint, punkt wyrównania wyskakującego zmienia się, gdy wyskakujące okienko napotka krawędź dolnego lub prawego ekranu.
Na poniższej ilustracji pokazano, że gdy krawędź dolnego ekranu ukrywa wszystkie lub część Popupobiektu , punkt wyrównania wyskakującego okienka to lewy dolny róg obiektu Popup.
Na poniższej ilustracji pokazano, że gdy Popup element jest ukryty przy prawej krawędzi ekranu, punkt wyrównania okna podręcznego jest prawym górnym róg obiektu Popup.
Popup Jeśli napotkasz krawędzie dolnego i prawego ekranu, punkt wyrównania okna podręcznego to prawy dolny róg obiektu Popup.
Zmienianie punktu wyrównania źródła docelowego i wyskakującego okienka
Gdy Placement wartość to Bottom, , RightLeftMouselub Top, docelowy punkt początkowy i punkt wyrównania wyskakującego zmienia się, jeśli zostanie napotkana pewna krawędź ekranu. Krawędź ekranu, która powoduje zmianę PlacementMode położenia, zależy od wartości.
Na poniższej ilustracji pokazano, że gdy Placement element znajduje Bottom się i Popup napotka krawędź dolnego ekranu, źródło docelowe jest lewym górnym róg obszaru docelowego, a punkt wyrównania wyskakującego jest lewym dolnym rogu Popupobiektu .
Na poniższej ilustracji pokazano, że gdy Placement jest i LeftPopup napotka lewą krawędź ekranu, miejsce docelowe jest prawym górnym rogu obszaru docelowego, a punkt wyrównania wyskakującego jest lewym górnym rogu Popupobiektu .
Na poniższej ilustracji pokazano, że gdy Placement element znajduje Right się i Popup napotka prawą krawędź ekranu, źródło docelowe jest lewym górnym róg obszaru docelowego, a punkt wyrównania wyskakującego jest prawym górnym rogu Popupobiektu .
Na poniższej ilustracji pokazano, że kiedy Placement jest Top i Popup napotka górną krawędź ekranu, miejsce docelowe jest lewym dolnym rogu obszaru docelowego, a punkt wyrównania wyskakującego jest lewym górnym rogu Popupobiektu .
Na poniższej ilustracji pokazano, że kiedy Placement jest Mouse i Popup napotyka krawędź dolnego ekranu, miejsce docelowe jest lewym górnym róg obszaru docelowego (granice wskaźnika myszy), a punkt wyrównania wyskakującego jest lewym dolnym rogu Popupobiektu .
Dostosowywanie umieszczania wyskakujących okienek
Możesz dostosować docelowy punkt początkowy i punkt wyrównania wyskakujących okienek, ustawiając Placement właściwość na Custom. Następnie zdefiniuj CustomPopupPlacementCallback delegata, który zwraca zestaw możliwych punktów umieszczania i osi podstawowych (w kolejności preferencji) dla elementu Popup. Punkt, który pokazuje największą część obiektu, jest zaznaczony Popup . Położenie obiektu Popup jest automatycznie dostosowywane, jeśli Popup element jest ukryty przez krawędź ekranu. Aby zapoznać się z przykładem, zobacz Określanie niestandardowej pozycji wyskakujących okienek.