Поведение размещения всплывающего окна
Элемент управления Popup отображает содержимое в отдельном окне, плавающем по приложению. Можно указать положение Popup относительно элемента управления, мыши или экрана с помощью свойств PlacementTarget, Placement, PlacementRectangle, HorizontalOffsetи VerticalOffset. Эти свойства работают вместе, чтобы обеспечить гибкость в указании положения Popup.
Заметка
Классы ToolTip и ContextMenu также определяют эти пять свойств и ведут себя аналогичным образом.
Размещение всплывающего окна
Размещение Popup может быть относительно UIElement или всего экрана. В следующем примере создаются четыре элемента управления Popup, которые относятся к UIElement— в данном случае изображение. Все элементы управления Popup имеют свойство PlacementTarget со значением image1, но у каждого Popup разное значение свойства размещения.
<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>
На следующем рисунке показаны изображение и элементы управления Popup
В этом простом примере показано, как задать свойства PlacementTarget и Placement, но с помощью свойств PlacementRectangle, HorizontalOffsetи VerticalOffset вы можете еще больше контролировать расположение Popup.
! [ПРИМЕЧАНИЕ] В зависимости от параметров Windows, связанных с рукой, всплывающее окно может быть выровнено по левому или правому краю при отображении вверху или нижнем углу. Предыдущее изображение демонстрирует выравнивание для правшей, которое размещает всплывающее окно слева.
Определения терминов: анатомия всплывающего окна
Следующие термины полезны в понимании того, как свойства PlacementTarget, Placement, PlacementRectangle, HorizontalOffsetи VerticalOffset связаны друг с другом и Popup:
Целевой объект
Целевая область
Целевой источник
Точка выравнивания всплывающего окна
Эти термины предоставляют удобный способ ссылаться на различные аспекты Popup и систему управления, с которой он связан.
Целевой объект
целевой объект — это элемент, с которым связан Popup. Если задано свойство PlacementTarget, он указывает целевой объект. Если PlacementTarget не задан, а Popup имеет родительский объект, родительский объект является целевым объектом. Если нет PlacementTarget значения и нет родительского объекта, нет целевого объекта, а Popup находится относительно экрана.
В следующем примере создается Popup, который является дочерним элементом Canvas. В примере не задано свойство PlacementTarget в Popup. Значение по умолчанию для Placement равно PlacementMode.Bottom, поэтому Popup отображается под 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>
На следующем рисунке показано, что Popup расположен относительно Canvas.
В следующем примере создается Popup, который является дочерним элементом Canvas, но на этот раз PlacementTarget установлен на ellipse1, поэтому всплывающее окно появляется под 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>
На следующем рисунке показано, что Popup расположен относительно Ellipse.
Заметка
Для ToolTipзначение по умолчанию Placement равно Mouse. Для ContextMenuзначение по умолчанию Placement равно MousePoint. Эти значения описаны далее в разделе "Как работают свойства вместе".
Целевая область
Целевая область — это область на экране, относительно которой находится Popup. В предыдущих примерах Popup выравнивается с границами целевого объекта, но в некоторых случаях Popup выравнивается с другими границами, даже если Popup имеет целевой объект. Если задано свойство PlacementRectangle, целевая область отличается от границ целевого объекта.
В следующем примере создаются два объекта Canvas, каждый из которых содержит Rectangle и Popup. В обоих случаях целевой объект для Popup является Canvas. Popup в первом Canvas имеет набор PlacementRectangle с его X, Y, Widthи свойствами Height, равными 50, 50, 50 и 100 соответственно. Popup во втором Canvas не имеет набора PlacementRectangle. В результате первый Popup находится под PlacementRectangle, а второй Popup находится под Canvas. Каждый Canvas также содержит Rectangle с теми же границами, что и PlacementRectangle для первого Popup. Обратите внимание, что PlacementRectangle не создает видимый элемент в приложении; в примере создается Rectangle для представления 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>
На следующем рисунке показан результат предыдущего примера.
Точка выравнивания целевого источника и всплывающего окна
целевого происхождения и точки выравнивания всплывающего окна являются эталонными точками в целевой области и всплывающем окне соответственно, которые используются для размещения. Свойства HorizontalOffset и VerticalOffset можно использовать для смещения всплывающего окна из целевой области. HorizontalOffset и VerticalOffset относятся к целевому источнику и точке выравнивания всплывающего окна. Значение свойства Placement определяет, где находятся целевая точка и точка выравнивания всплывающего окна.
В следующем примере создается Popup и для свойств HorizontalOffset и VerticalOffset устанавливается значение 20. Свойство Placement имеет значение Bottom (по умолчанию), поэтому целевой источник — левый нижний угол целевой области, а точка выравнивания всплывающего окна — левый верхний угол 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>
На следующем рисунке показан результат предыдущего примера.
Как свойства работают вместе
Значения PlacementTarget, PlacementRectangleи Placement необходимо учитывать вместе, чтобы определить правильную целевую область, целевой источник и точку выравнивания всплывающего окна. Например, если значение Placement равно Mouse, то целевой объект отсутствует, PlacementRectangle игнорируется, и целевая область — границы указателя мыши. С другой стороны, если Placement равно Bottom, PlacementTarget или родитель определяет целевой объект, и PlacementRectangle определяет целевую область.
В следующей таблице описываются целевой объект, целевая область, источник цели, точка выравнивания всплывающего окна и указывается, используются ли PlacementTarget и PlacementRectangle для каждого значения перечисления PlacementMode.
| PlacementMode | Целевой объект | Целевая область | Целевой источник | Точка выравнивания всплывающего окна |
|---|---|---|---|---|
| Absolute | Неприменимо. PlacementTarget игнорируется. | Экран или PlacementRectangle, если он установлен. PlacementRectangle относительно экрана. | Верхний левый угол целевой области. | Верхний левый угол Popup. |
| AbsolutePoint | Неприменимо. PlacementTarget игнорируется. | Экран или PlacementRectangle, если это задано. PlacementRectangle позиционируется относительно экрана. | Верхний левый угол целевой области. | Верхний левый угол Popup. |
| Bottom | PlacementTarget или родитель. | Целевой объект или PlacementRectangle, если он задан. PlacementRectangle относительно целевого объекта. | Нижний левый угол целевой области. | Верхний левый угол Popup. |
| Center | PlacementTarget или родитель. | Целевой объект или PlacementRectangle, если он задан. PlacementRectangle относительно целевого объекта. | Центр целевой области. | Центр Popup. |
| Custom | PlacementTarget или родитель. | Целевой объект или PlacementRectangle, если он задан. PlacementRectangle относительно целевого объекта. | Определяется при помощи CustomPopupPlacementCallback. | Определяется с помощью CustomPopupPlacementCallback. |
| Left | PlacementTarget или родитель. | Целевой объект или PlacementRectangle, если он задан. PlacementRectangle относительно целевого объекта. | Верхний левый угол целевой области. | Правый верхний угол Popup. |
| Mouse | Неприменимо. PlacementTarget игнорируется. | Границы указателя мыши. PlacementRectangle игнорируется. | Нижний левый угол целевой области. | Верхний левый угол Popup. |
| MousePoint | Неприменимо. PlacementTarget игнорируется. | Границы указателя мыши. PlacementRectangle игнорируется. | Верхний левый угол целевой области. | Верхний левый угол Popup. |
| Relative | PlacementTarget или родитель. | Целевой объект или PlacementRectangle, если он задан. PlacementRectangle относительно целевого объекта. | Верхний левый угол целевой области. | Верхний левый угол Popup. |
| RelativePoint | PlacementTarget или родитель. | Целевой объект или PlacementRectangle, если он задан. PlacementRectangle относительно целевого объекта. | Верхний левый угол целевой области. | Верхний левый угол Popup. |
| Right | PlacementTarget или родитель. | Целевой объект или PlacementRectangle, если он задан. PlacementRectangle относительно целевого объекта. | Правый верхний угол целевой области. | Верхний левый угол Popup. |
| Top | PlacementTarget или родитель. | Целевой объект или PlacementRectangle, если он задан. PlacementRectangle находится относительно целевого объекта. | Верхний левый угол целевой области. | Нижний левый угол Popup. |
На следующих рисунках показаны Popup, целевая область, целевой источник и точка выравнивания всплывающего окна для каждого значения PlacementMode. На каждой фигуре целевая область желтая, а Popup синий.
Когда всплывающее окно обнаруживает край экрана
По соображениям безопасности Popup невозможно скрыть краем экрана. Одно из следующих трех вещей происходит, когда Popup обнаруживает край экрана:
Всплывающее окно перемещается вдоль края экрана, который может скрыть Popup.
Всплывающее окно использует другую точку выравнивания всплывающего окна.
Всплывающее окно использует другой целевой источник и точку выравнивания всплывающего окна.
Эти параметры описаны далее в этом разделе.
Поведение Popup при обнаружении края экрана зависит от значения свойства Placement и того, с каким именно краем экрана сталкивается всплывающее окно. В следующей таблице описано поведение, когда Popup обнаруживает край экрана для каждого значения PlacementMode.
| Режим размещения | Верхний край | Нижний край | Левый край | Правый край |
|---|---|---|---|---|
| Absolute | Выравнивается по верхнему краю. | Выравнивает по нижнему краю. | Выравнивается по левому краю. | Выравнивание по правому краю. |
| AbsolutePoint | Выровнять по верхнему краю. | Точка выравнивания всплывающего окна изменяется в левом нижнем углу Popup. | Выравнивается по левому краю. | Точка выравнивания всплывающего окна изменяется в правом верхнем углу Popup. |
| Bottom | Выровнять по верхнему краю. | Начальная точка цели смещается в левый верхний угол целевой области, а точка выравнивания всплывающего окна перемещается в левый нижний угол Popup. | Выравнивание по левому краю. | Выравнивается по правому краю. |
| Center | Выравнивает по верхнему краю. | Выравнивает по нижнему краю. | Выравнивает по левому краю. | Выравнивается по правому краю. |
| Left | Выравнивает по верхнему краю. | Выравнивание по нижнему краю. | Исходная точка меняется на верхний правый угол области назначения, а точка выравнивания всплывающего окна меняется на верхний левый угол Popup. | Выравнивание по правому краю. |
| Mouse | Выравнивается по верхнему краю. | Целевой источник изменяется в левом верхнем углу целевой области (границы указателя мыши) и точка выравнивания всплывающего окна изменяется в левом нижнем углу Popup. | Выравнивание по левому краю. | Выровнять по правому краю. |
| MousePoint | Выравнивание по верхнему краю. | Точка выравнивания всплывающего окна изменяется в левом нижнем углу Popup. | Выравнивается по левому краю. | Точка выравнивания всплывающего окна изменяется в правом верхнем углу всплывающего окна. |
| Relative | Выравнивание по верхнему краю. | Выравнивается по нижнему краю. | Выравнивание по левому краю. | Выравнивается по правому краю. |
| RelativePoint | Выравнивается по верхнему краю. | Точка выравнивания всплывающего окна изменяется в левом нижнем углу Popup. | Выравнивание по левому краю. | Точка выравнивания всплывающего окна перемещается в правый верхний угол всплывающего окна. |
| Right | Выравнивается по верхнему краю. | Выравнивайте по нижнему краю. | Выровняно по левому краю. | Начальная точка перемещается в левый верхний угол целевой области, а точка привязки всплывающего окна изменяется на правый верхний угол Popup. |
| Top | Целевой источник изменяется в левом нижнем углу целевой области, а точка выравнивания всплывающего окна изменяется в левом верхнем углу Popup. По сути, это то же самое, что и когда Placement является Bottom. | Выравнивание по нижнему краю | Выравнивание по левому краю. | Выравнивается по правому краю. |
Выровнять по краю экрана
Popup может выровняться по краю экрана, переместив себя так, чтобы весь Popup был виден на экране. При этом расстояние между целевым источником и точкой выравнивания всплывающего окна может отличаться от значений HorizontalOffset и VerticalOffset. Если PlacementAbsolute, Centerили Relative, Popup выравнивается по каждому краю экрана. Например, предположим, что у Popup установлено Placement на Relative, а VerticalOffset установлено на 100. Если нижний край экрана скрывает всю или часть Popup, то Popup переместится вдоль нижнего края экрана, при условии, что вертикальное расстояние между исходной точкой и точкой выравнивания всплывающего окна меньше 100. На следующем рисунке показано это.
Изменение точки выравнивания всплывающего окна
Если Placement равно AbsolutePoint, RelativePointили MousePoint, точка выравнивания всплывающего окна изменяется, когда всплывающее окно встречает нижний или правый край экрана.
На следующем рисунке показано, что когда край нижнего экрана скрывает все или часть Popup, точка выравнивания всплывающего окна — левый нижний угол Popup.
На следующем рисунке демонстрируется, что когда Popup скрыт правым краем экрана, точка выравнивания всплывающего окна — это правый верхний угол Popup.
Если Popup сталкивается с краями нижнего и правого экрана, точка выравнивания всплывающего окна находится в правом нижнем углу Popup.
Изменение целевого источника и точки выравнивания всплывающего окна
Если Placement — это Bottom, Left, Mouse, Rightили Top, то начальная точка и точка выравнивания всплывающего окна изменяются при обнаружении определённого края экрана. Край экрана, который приводит к изменению положения, зависит от значения PlacementMode.
На следующем рисунке показано, что когда Placement равен Bottom и Popup достигает нижнего края экрана, целевой начальный пункт — это левый верхний угол целевой области, а точка выравнивания всплывающего окна — это левый нижний угол Popup.
На следующем рисунке показано, что когда Placement равно Left, а Popup встречает левый край экрана, целевым источником является верхний правый угол целевой области, а точка выравнивания всплывающего окна — верхний левый угол Popup.
На следующем рисунке показано, что когда Placement является Right и Popup встречается с правым краем экрана, целевой исходный пункт — это верхний левый угол целевой области, а точка выравнивания всплывающего окна — верхний правый угол Popup.
На следующем рисунке показано, что когда Placement равен Top и Popup достигает верхнего края экрана, исходное положение мишени — нижний левый угол целевой области, а точка выравнивания всплывающего окна — верхний левый угол Popup.
На следующем рисунке показано, что когда Placement становится Mouse и Popup достигает нижнего края экрана, целевая точка находится в левом верхнем углу целевой области (границы указателя мыши), а точка выравнивания всплывающего окна — в левом нижнем углу Popup.
Настройка размещения всплывающего окна
Вы можете настроить целевой источник и точку выравнивания всплывающего окна, задав для свойства Placement значение Custom. Затем определите делегат CustomPopupPlacementCallback, который возвращает набор возможных точек размещения и первичных осей (в порядке предпочтения) для Popup. Выбрана точка, показывающая наибольшую часть Popup. Положение Popup автоматически настраивается, если Popup скрыт краем экрана. Пример см. в разделе Указание на пользовательское расположение всплывающего окна.
См. также
.NET Desktop feedback