Поведение при размещении контекстного меню

Элемент управления Popup отображает содержимое в отдельном окне, расположенном поверх приложения. Вы можете указать расположение Popup относительно элемента управления, указателя мыши или экрана с помощью свойств PlacementTarget, Placement, PlacementRectangle, HorizontalOffset и VerticalOffset. Вместе эти свойства позволяют гибко указывать положение Popup.

Размещение всплывающего окна

Размещение 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.

Целевая область

Целевая область — это область на экране, относительно которой располагается 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.

На следующих рисунках показаны Popup, целевая область, исходная точка и точка выравнивания всплывающего окна для каждого значения PlacementMode. На каждом рисунке целевая область закрашена желтым, а Popup — голубым цветом.

Когда всплывающее окно достигает края экрана

По соображениям безопасности Popup не может быть скрыто за краем экрана. При достижении Popup края экрана происходит одно из следующих трех событий:

• Всплывающее окно располагается вдоль края экрана, который мог бы скрыть Popup.

• Всплывающее окно использует другую точку выравнивания.

• Всплывающее окно использует другую исходную точку и точку выравнивания.

Эти параметры будут описаны далее в данном разделе.

Поведение Popup при достижении края экрана зависит от значения свойства Placement и от того, с каким краем экрана сталкивается всплывающее окно. Следующая таблица содержит сводные сведения о поведении, имеющем место, когда Popup достигает границы экрана, для каждого значения PlacementMode.

Выравнивание по краю экрана

Объект Popup может выровняться по краю экрана путем изменения расположения, таким образом все всплывающее окно Popup будет отображаться на экране. В этом случае расстояние между исходной точкой и точкой выравнивания всплывающего окна может отличаться от значений HorizontalOffset и VerticalOffset. Если Placement имеет значение Absolute, 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. См. пример в разделе Указание пользовательского расположения контекстного меню.

См. также

• Пример размещения всплывающего окна