Всплывающее окно

Элемент Popup управления предоставляет способ отображения содержимого в отдельном окне, плавающем по текущему окну приложения относительно указанного элемента или координаты экрана.

На следующем рисунке показан элемент управления Popup, расположенный относительно родительского элемента управления Button:

Элемент управления Popup, расположенный относительно кнопки.

В следующей таблице перечислены распространенные задачи для работы с элементом управления Popup:

Название Description
Анимация всплывающего окна Узнайте, как анимировать всплывающее окно с помощью раскадровок и анимаций.
Поведение размещения всплывающего окна Узнайте о различных режимах размещения и о расположении всплывающего окна относительно элементов или координат экрана.
Указание настраиваемой позиции всплывающего окна Узнайте, как определить настраиваемую логику размещения для точного размещения всплывающих окон.

Что такое всплывающее окно?

Элемент Popup управления отображает содержимое в отдельном окне относительно элемента или точки на экране. Когда Popup отображается, свойство IsOpen устанавливается в true.

Замечание

Объект Popup не открывается автоматически при перемещении указателя мыши по родительскому объекту. Если вы хотите автоматически открыть Popup, используйте класс ToolTip или ToolTipService. Дополнительные сведения см. в "Подсказке".

Создание всплывающего окна

В следующем примере элемент управления Popup определяется как дочерний элемент элемента управления ToggleButton. Поскольку у ToggleButton может быть только один дочерний элемент, текст для элементов управления ToggleButton и Popup в этом примере помещается в StackPanel. Свойство всплывающего IsOpen окна использует привязку данных для синхронизации со свойством кнопки IsChecked . При нажатии кнопки всплывающее окно автоматически открывается или закрывается. Содержимое отображается в отдельном окне, которое плавает по окну приложения рядом с кнопкой.

<ToggleButton x:Name="TogglePopupButton" Height="30" Width="150" HorizontalAlignment="Left">
    <StackPanel>
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
            <Run Text="Is button toggled? " />
            <Run Text="{Binding IsChecked, ElementName=TogglePopupButton}" />
        </TextBlock>

        <Popup Name="myPopup" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton}">
            <Border BorderThickness="1">
                <TextBlock Name="myPopupText" Background="LightBlue" Foreground="Blue" Padding="30">
                Popup Text
                </TextBlock>
            </Border>
        </Popup>
    </StackPanel>
</ToggleButton>

Элементы управления, реализующие всплывающее окно

Вы можете встраивать элементы управления Popup в другие элементы управления. Следующие элементы управления реализуют Popup элемент управления для конкретных использования:

  • ToolTip. Чтобы создать подсказку для элемента, используйте классы ToolTip и ToolTipService. Дополнительные сведения см. в "Подсказке".

  • ContextMenu. Чтобы создать контекстное меню элемента, используйте ContextMenu элемент управления. Дополнительные сведения см. в разделе ContextMenu.

  • ComboBox. Чтобы создать элемент управления выбора с раскрывающимся списком, который можно отобразить или скрыть, используйте элемент ComboBox управления.

  • Expander. Чтобы создать элемент управления, отображающий заголовок с сворачиваемой областью, отображающей содержимое, используйте элемент Expander управления. Дополнительные сведения см. в разделе Expander.

Стили и шаблоны

Элемент Popup управления предоставляет свойства стилизации XAML, которые можно использовать для настройки внешнего вида. Элемент управления не определяет шаблон по умолчанию с частями шаблона или визуальными состояниями, но его поведение можно настроить. Дополнительные сведения см. в разделе "Поведение всплывающего окна" и "Внешний вид ".

Свойство контента

Этот элемент управления использует Child свойство в качестве свойства содержимого. Свойство Child представляет один дочерний элемент, отображаемый во всплывающем окне.

Комплектующие

Этот элемент управления не определяет какие-либо части шаблона.

Визуальные состояния

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

Элемент Popup управления предоставляет функциональные возможности, которые можно использовать для настройки его поведения и внешнего вида. Например, можно задать поведение при открытии и закрытии, анимацию, непрозрачность, эффекты растрового изображения, а также размер и положение Popup.

Открытое и близкое поведение

Элемент управления Popup отображает содержимое, если свойство IsOpen установлено в true. По умолчанию Popup остается открытым, пока свойство IsOpen не будет установлено на false. Однако поведение по умолчанию можно изменить, задав StaysOpen для свойства значение false. При задании этого свойства false, окно Popup содержимого получает захват мыши. При Popup потере записи мыши окно закрывается при возникновении события мыши за пределами Popup окна.

Opened и Closed события возникают, когда открывается или закрывается окно с содержимым Popup.

Мультипликация

Элемент Popup управления имеет встроенную поддержку анимаций, которые обычно связаны с поведением, таким как fade-in и slide-in. Эти анимации можно включить, задав свойству PopupAnimation значение перечисления PopupAnimation. Чтобы Popup анимация работала правильно, необходимо установить значение свойства AllowsTransparency на true.

Можно также применять анимации, как Storyboard, к элементу управления Popup.

Эффекты непрозрачности и растрового изображения

Свойство Opacity элемента Popup управления не влияет на его содержимое. По умолчанию окно содержимого Popup непрозрачно. Чтобы создать прозрачный Popup, установите значение свойства AllowsTransparency на true.

Содержимое Popup не наследует эффекты растрового изображения, например DropShadowBitmapEffect, которые вы напрямую устанавливаете в Popup элементе управления или любом другом элементе в родительском окне. Чтобы эффекты растрового изображения отображались на содержимом объекта Popup, необходимо задать эффект растрового изображения непосредственно на его содержимое. Например, если дочерний элемент Popup является StackPanel, установите растровый эффект на StackPanel.

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

Popup содержимое также может быть скрыто, если вы примените RenderTransform к содержимому. В этом сценарии некоторые содержимое может быть скрыто, если содержимое преобразованного Popup распространяется за пределы исходной Popupобласти. Если для эффекта или преобразования растрового изображения требуется больше места, можно определить поле вокруг содержимого Popup , чтобы обеспечить больше области для элемента управления.

Определение позиции всплывающего окна

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

Настройка размещения всплывающего окна

Вы можете настроить размещение Popup элемента управления, указав набор координат, относительно PlacementTarget, где вы хотите, чтобы Popup отображался.

Чтобы настроить размещение, установите свойство Placement на значение Custom. Затем определите CustomPopupPlacementCallback делегат, который возвращает набор возможных точек размещения и основных осей (в порядке предпочтения) для Popup. Точка, показывающая большую часть элемента Popup , автоматически выбрана. Пример см. в разделе "Указание настраиваемой позиции всплывающего окна".

Элемент Popup управления не имеет собственного визуального дерева. Он возвращает размер 0 (ноль) при вызове MeasureOverride метода. Однако при установке свойства IsOpen на true, элемент управления создает новое окно с собственным визуальным деревом. Новое окно содержит Child содержимое объекта Popup. Ширина и высота нового окна не могут превышать 75 процентов ширины или высоты экрана.

Элемент Popup управления сохраняет ссылку на его Child содержимое в качестве логического дочернего элемента. Когда элемент управления создает новое окно, содержимое Popup становится визуальным дочерним элементом окна и остается логическим дочерним Popupэлементом. И наоборот, Popup остается логическим родительским элементом его Child содержимого.

См. также

  • Last updated on