Как сделать всплывающее окно wpf
Обновлено: 28.04.2024
Существуют свойства всплывающих подсказок, которые нельзя задать с помощью свойств класса ToolTip. Для этого предназначен другой класс — ToolTipService. Он позволяет задать длительность задержек при отображении всплывающей подсказки.
Все свойства этого класса являются прикрепленными свойствами, поэтому их можно указывать прямо в дескрипторе элемента управления, как показано ниже:
Класс ToolTipService определяет много тех же свойств, что и класс ToolTip. А это значит, что при работе со всплывающими подсказками, содержащими только текст, можно использовать более простой синтаксис. Вместо добавления вложенного элемента ToolTip, можно задать все, что необходимо, с помощью атрибутов.
InitialShowDelay
Задает задержку (в миллисекундах) перед выводом подсказки после наведения указателя мыши на элемент
ShowDuration
Задает время (в миллисекундах), в течение которого будет отображаться подсказка, если пользователь не сдвинет указатель мыши
BetweenShowDelay
Задает временной интервал (в миллисекундах), в течение которого пользователь может переходить от одной всплывающей подсказки к другой без задержки, определяемой свойством InitialShowDelay. Например, если свойство BetweenShowDelay равно 5000, то у пользователя будет пять секунд на то, чтобы навести указатель мыши на другой элемент управления, у которого имеется всплывающая подсказка. Если пользователь наведет указатель мыши на другой элемент в течение этих пяти секунд, то новая подсказка появится немедленно. Если же пользователь потратит больше пяти секунд, в действие вступит InitialShowDelay. В этом случае вторая подсказка появится после задержки, указанной в свойстве InitialShowDelay.
ToolTip
Задает содержимое всплывающей подсказки. Задание свойства ToolTipService.ToolTip эквивалентно заданию свойства FrameworkElement.ToolTip элемента
HasDropShadow
Определяет, будет ли контекстное окно указателя иметь размытую тень, которая "приподнимает" его над находящимся под ним окном
ShowOnDisabled
Определяет поведение подсказки при отключении базового элемента. Если это свойство имеет значение true, то подсказка будет отображаться для отключенных элементов (т.е. элементов, свойство IsEnabled которых равно false). По умолчанию это свойство равно false, т.е. подсказка отображается только для активных элементов управления
В этом классе определены также два маршрутизируемых события: ToolTipOpening и ToolTipClosing. Реагируя на эти события, можно заполнить окно подсказки актуальным содержимым или переопределить его поведение. Например, если в каждом из этих событий установить флаг handled, подсказки не будут отображаться или скрываться автоматически. Тогда вы сможете выводить и скрывать их вручную с помощью свойства IsOpen.
Не стоит дублировать параметры всплывающих подсказок для нескольких элементов управления. Если вы хотите получить однотипное поведение всплывающих подсказок во всем приложении, используйте стили, чтобы настройки применялись автоматически. К сожалению, значения свойства ToolTipService не наследуются, то есть если задать их на уровне окна или контейнера, они не будут распространяться на вложенные элементы.
Popup
Элемент управления Popup имеет много общего с элементом ToolTip, хотя ни один из них не является наследником другого.
Но более важны различия между элементами Popup и ToolTip:
Popup не отображается автоматически. Чтобы этот элемент управления отобразился на экране, нужно установить свойство IsOpen.
Свойство Popup.StaysOpen по умолчанию имеет значение true, поэтому элемент управления Popup не исчезнет с экрана до тех пор, пока вы явным образом не присвоите свойству IsOpen значение false. Если присвоить свойству StaysOpen значение false, элемент Popup исчезнет с экрана, как только пользователь щелкнет где-нибудь на экране.
Всплывающее окно, остающееся открытым, может слегка раздражать, т.к. оно ведет себя наподобие отдельного автономного окна. Если сместить указатель мыши, это окно останется в исходной позиции. Такого поведения нет ни у элемента ToolTip, ни у Popup, у которого свойство StaysOpen имеет значение false: как только вы щелкнете кнопкой мыши, чтобы сдвинуть окно, всплывающая подсказка или всплывающее окно исчезнут с экрана.
В классе Popup имеется свойство PopupAnimation, которое позволяет управлять процессом появления окна, когда его свойству IsOpen присваивается значение true. Это свойство может принимать значения None (по умолчанию), Fade (постепенное увеличение непрозрачности), Scroll (непрозрачность плавно распространяется из левого верхнего угла окна) и Slide (окно скользит на свое место). Чтобы активировать любой из этих анимационных эффектов, необходимо, чтобы свойство AllowsTransparency также имело значение true.
Элементы Popup могут принимать фокус. Значит, они могут содержать элементы интерактивной связи с пользователем (например, Button). Эта возможность является одной из ключевых причин использования элемента Popup вместо ToolTip.
Элемент управления Popup определен в пространстве имен System.Windows.Controls.Primitives, так как он чаще всего используется в составе более сложных элементов управления. Элементы Popup не так элегантны, как другие элементы управления. Например, чтобы видеть содержимое, необходимо определить свойство Background, т.к. оно не наследуется от окна. Рамку тоже придется добавлять самостоятельно (для этого очень удобен элемент Border).
Элемент ToolTip представляет всплывающую подсказку при наведении на какой-нибудь элемент. Для определения всплывающей подсказки у элементов уже есть свойство ToolTip, которому можно задать текст, отображаемый при наведении:
Также мы можем более точно настроить всплывающую подсказку с помощью свойства Button.ToolTip :
Всплывающие подсказки можно применять не только кнопкам, но и ко всем другим элементам управления, например, к текстовому блоку:
Оба определения всплывающей подсказки будут аналогичны.
Поскольку ToolTip является элементом управления содержимого, то в него можно встроить другие элементы для создания более богатой функциональности. Например:
Здесь у нас два переключателя, и на одном из них определен расширенный элемент ToolTip: а именно в него вложен элемент Image, выводящий изображение, и элемент TextBlock. Таким образом, можно создавать всплывающие подсказки с различным наполнением.
Изображение для элемента Image в данном случае было добавлено в проект.
Свойства ToolTip
Некоторые полезные свойства элемента Tooltip:
HasDropShadow : определяет, будет ли всплывающая подсказка отбрасывать тень.
Placement : определяет, как будет позиционироваться всплывающая подсказка на окне приложения. По умолчанию ее верхний левый угол позиционируется на указатель мыши.
HorizontalOffset/VerticalOffset : определяет смещение относительно начального местоположения.
PlacementTarget : определяет позицию всплывающей подсказки относительно другого элемента управления.
Здесь у нас три переключателя. У первого мы задаем свойства через элемент ToolTip. Для второго переключателя мы также можем задать свойства, несмотря на то, что здесь мы всплывающую подсказку задаем просто ToolTip="Цена: 29990 рублей" Content="Nexus 5X" . В этом случае мы можем использовать прикрепленные свойства класса ToolTipService :
InitialShowDelay : задает задержку перед отображением всплывающей подсказки
ShowDuration : устанавливает время отображения всплывающей подсказки
BetweenShowDelay : устанавливает время, в течение которого пользователь сможет перейти к другому элементу с подсказкой, и для этого элемента не будет работать свойство InitialShowDelay (если оно указано)
ToolTip : устанавливает содержимое всплывающей подсказки
HasDropShadow : определяет, будет ли подсказка отбрасывать тень
ShowOnDisabled : устанавливает поведение всплывающей подсказки для недоступного элемента (со значением IsEnabled="True" ). Если это свойство равно true, то подсказка отображается для недоступных элементов. По умолчанию равно false.
Placement / HorizontalOffset / VerticalOffset / PlacementTarget : те же свойства, что и у элемента ToolTip, которые устанавливают положение всплывающей подсказки
Программное создание всплывающей подсказки
Допустим, в коде XAML у нас определена следующая кнопка:
Popup
Элемент Popup также представляет всплывающее окно, только в данном случае оно имеет другую функциональность. Если Tooltip отображается автоматически при наведении и также автоматически скрывается через некоторое время, то в случае с Popup все эти действия нам надо задавать вручную.
Так, чтобы отразить при наведении мыши на элемент всплывающее окно, нам надо соответственным образом обработать событие MouseEnter .
Второй момент, который надо учесть, это установка свойства StaysOpen="False" . По умолчанию оно равно True, а это значит, что при отображении окна, оно больше не исчезнет, пока мы не установим явно значение этого свойства в False.
Итак, создадим всплывающее окно:
The Popup control provides a way to display content in a separate window that floats over the current application window relative to a designated element or screen coordinate. This topic introduces the Popup control and provides information about its use.
What Is a Popup?
A Popup control displays content in a separate window relative to an element or point on the screen. When the Popup is visible, the IsOpen property is set to true .
A Popup does not automatically open when the mouse pointer moves over its parent object. If you want a Popup to automatically open, use the ToolTip or ToolTipService class. For more information, see ToolTip Overview.
Creating a Popup
The following example shows how to define a Popup control that is the child element of a ToggleButton control. Because a ToggleButton can have only one child element, this example places the text for the ToggleButton and the Popup controls in a StackPanel. The content of the Popup is displayed in a separate window that floats over the application window near the related ToggleButton control.
Controls That Implement a Popup
You can build Popup controls into other controls. The following controls implement the Popup control for specific uses:
ToolTip. If you want to create a tooltip for an element, use the ToolTip and ToolTipService classes. For more information, see ToolTip Overview.
ContextMenu. If you want to create a context menu for an element, use the ContextMenu control. For more information, see ContextMenu Overview.
ComboBox. If you want to create a selection control that has a drop-down list box that can be shown or hidden, use the ComboBox control.
Expander. If you want to create a control that displays a header with a collapsible area that displays content, use the Expander control. For more information, see Expander Overview.
Popup Behavior and Appearance
The Popup control provides functionality that enables you to customize its behavior and appearance. For example, you can set open and close behavior, animation, opacity and bitmap effects, and Popup size and position.
Open and Close Behavior
A Popup control displays its content when the IsOpen property is set to true . By default, Popup stays open until the IsOpen property is set to false . However, you can change the default behavior by setting the StaysOpen property to false . When you set this property to false , the Popup content window has mouse capture. The Popup loses mouse capture and the window closes when a mouse event occurs outside the Popup window.
The Opened and Closed events are raised when the Popup content window is open or closed.
Animation
The Popup control has built-in support for the animations that are typically associated with behaviors like fade-in and slide-in. You can turn on these animations by setting the PopupAnimation property to a PopupAnimation enumeration value. For Popup animations to work correctly, you must set the AllowsTransparency property to true .
You can also apply animations like Storyboard to the Popup control.
Opacity and Bitmap Effects
The Opacity property for a Popup control has no effect on its content. By default, the Popup content window is opaque. To create a transparent Popup, set the AllowsTransparency property to true .
The content of a Popup does not inherit bitmap effects, such as DropShadowBitmapEffect, that you directly set on the Popup control or on any other element in the parent window. For bitmap effects to appear on the content of a Popup, you must set the bitmap effect directly on its content. For example, if the child of a Popup is a StackPanel, set the bitmap effect on the StackPanel.
Popup Size
By default, a Popup is automatically sized to its content. When auto-sizing occurs, some bitmap effects may be hidden because the default size of the screen area that is defined for the Popup content does not provide enough space for the bitmap effects to display.
Popup content can also be obscured when you set a RenderTransform on the content. In this scenario, some content might be hidden if the content of the transformed Popup extends beyond the area of the original Popup. If a bitmap effect or transform requires more space, you can define a margin around the Popup content in order to provide more area for the control.
Defining the Popup Position
You can position a popup by setting the PlacementTarget, PlacementRectangle, Placement, HorizontalOffset, and VerticalOffsetProperty properties. For more information, see Popup Placement Behavior. When Popup is displayed on the screen, it does not reposition itself if its parent is repositioned.
Customizing Popup Placement
You can customize the placement of a Popup control by specifying a set of coordinates that are relative to the PlacementTarget where you want the Popup to appear.
To customize placement, set the Placement property to Custom. Then define a CustomPopupPlacementCallback delegate that returns a set of possible placement points and primary axes (in order of preference) for the Popup. The point that shows the largest part of the Popup is automatically selected. For an example, see Specify a Custom Popup Position.
Popup and the Visual Tree
A Popup control does not have its own visual tree; it instead returns a size of 0 (zero) when the MeasureOverride method for Popup is called. However, when you set the IsOpen property of Popup to true , a new window with its own visual tree is created. The new window contains the Child content of Popup. The width and height of the new window cannot be larger than 75 percent of the width or height of the screen.
The Popup control maintains a reference to its Child content as a logical child. When the new window is created, the content of Popup becomes a visual child of the window and remains the logical child of Popup. Conversely, Popup remains the logical parent of its Child content.
Элемент управления Popup позволяет отображать содержимое в отдельном окне, расположенном поверх текущего окна приложения относительно обозначенного элемента или экранных координат. В этом разделе приводятся общие сведения об элементе управления Popup и о его использовании.
Что такое контекстное меню?
Элемент управления Popup отображает содержимое в отдельном окне, расположенном относительно элемента или точки на экране. Если объект Popup является видимым, для свойства IsOpen задается значение true .
Элемент управления Popup не открывается автоматически при наведении указателя мыши на родительский объект. Если вы хотите, чтобы элемент управления Popup открывался автоматически, используйте класс ToolTip или ToolTipService. Дополнительные сведения см. в разделе Общие сведения о всплывающих подсказках.
Создание всплывающего окна
В следующем примере показано, как определить элемент управления Popup, который является дочерним для элемента управления ToggleButton. Так как ToggleButton может иметь только один дочерний элемент, в этом примере текст для элементов управления ToggleButton и Popup размещается в StackPanel. Содержимое Popup отображается в отдельном окне, которое расположено поверх окна приложения рядом со связанным элементом управления ToggleButton .
Элементы управления, реализующие контекстное меню
Вы можете собирать элементы управления Popup в другие элементы управления. Следующие элементы управления реализуют элемент управления Popup для конкретных вариантов использования:
ToolTip. Если вы хотите создать всплывающую подсказку для элемента, используйте классы ToolTip и ToolTipService. Дополнительные сведения см. в разделе Общие сведения о всплывающих подсказках.
ContextMenu. Если вы хотите создать контекстное меню для элемента, используйте элемент управления ContextMenu. Дополнительные сведения см. в разделе Общие сведения об элементе управления ContextMenu.
ComboBox. Если требуется создать элемент управления для выбора с раскрывающимся списком, который можно отображать и скрывать, используйте элемент управления ComboBox.
Expander. Если требуется создать элемент управления, отображающий заголовок со свертываемой областью отображения содержимого, используйте элемент управления Expander. Дополнительные сведения см. в разделе Общие сведения об элементе управления Expander.
Внешний вид и поведение контекстного меню
Вы можете настроить поведение и внешний вид элемента управления Popup. Например, можно задать поведение при открытии и закрытии, анимацию, эффекты прозрачности и эффекты для точечных рисунков, а также размеры и положение Popup.
Поведение открытия и закрытия
Элемент управления Popup отображает содержимое, когда для свойства IsOpen задано значение true . По умолчанию Popup остается открытым до тех пор, пока свойство IsOpen имеет значение false . Однако поведение по умолчанию можно изменить, задав для свойства StaysOpen значение false . При установке значения false для этого свойства окно содержимого Popup захватывает мышь. Элемент управления Popup освобождает мышь, и окно закрывается, когда событие мыши происходит за пределами окна Popup.
События Opened и Closed возникают при открытии или закрытии окна содержимого Popup.
Анимация
Элемент управления Popup имеет встроенную поддержку анимации, которая обычно связана с таким поведением, как постепенное появление и выдвижение. Чтобы отключить эту анимацию, установите для свойства PopupAnimation значение перечисления PopupAnimation. Чтобы анимация Popup работала правильно, необходимо задать для свойства AllowsTransparency значение true .
К элементу управления Popup также можно применить такие анимации как Storyboard.
Прозрачность и эффекты для точечных рисунков
Свойство 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 для Popup. Однако при установке значения true для свойства IsOpen объекта Popup создается новое окно с собственным визуальным деревом. В новом окне находится содержимое Child элемента управления Popup. Ширина и высота нового окна не могут превышать 75 процентов от ширины или высоты экрана.
Элемент управления Popup сохраняет ссылку на содержимое Child в качестве логического дочернего элемента. При создании нового окна содержимое элемента управления Popup становится визуальным дочерним элементом окна и остается логическим дочерним элементом Popup. И наоборот, Popup остается логическим родительским элементом содержимого Child.
Всплывающая подсказка — это небольшое всплывающее окно, которое появляется, когда пользователь задерживает указатель мыши над каким-либо элементом, например, над элементом управления Button. В этом разделе рассказывается о всплывающих подсказках и о том, как создавать и настраивать их содержимое.
Что такое всплывающая подсказка?
Когда пользователь наводит указатель мыши на элемент, для которого имеется всплывающая подсказка, окно с содержимым этой подсказки (например, текстом, описывающим функции этого элемента управления) отображается в течение заданного периода времени. Когда пользователь перемещает указатель мыши за пределы элемента управления, это окно исчезает, так как теперь фокус не направлен на содержимое подсказки.
Содержимым подсказки может быть одна или несколько строк текста, изображения, фигуры или другие видимые элементы. Чтобы задать всплывающую подсказку для элемента управления, нужно задать одно из следующих свойств содержимого этой всплывающей подсказки.
Используемое свойство зависит от того, наследуется ли элемент управления, в котором определена всплывающая подсказка, от класса FrameworkContentElement или FrameworkElement.
Создание всплывающей подсказки
В следующем примере показано, как создать простую подсказку, установив текстовую строку в качестве значения свойства ToolTip для элемента управления Button.
Также можно определить всплывающую подсказку в качестве объекта ToolTip. В следующем примере используется XAML, чтобы указать объект ToolTip в качестве всплывающей подсказки элемента TextBox. Обратите внимание, что в примере задается ToolTipпутем установки свойства FrameworkElement.ToolTip.
В следующем примере используется код для создания объекта ToolTip. В примере создается объект ToolTip ( tt ) и связывается с Button.
Можно также создать содержимое подсказки, которое не определено как объект ToolTip, включив содержимое подсказки в макет элемента, например, DockPanel. В следующем примере показано, как задать содержимое, которое включено в элемент управления DockPanel, в качестве значения свойства ToolTip элемента управления TextBox.
Использование свойств классов ToolTip и ToolTipService
Содержимое всплывающей подсказки можно настроить, задавая его визуальные свойства и применяя стили. Если определить содержимое всплывающей подсказки как объект ToolTip, вы можете задать визуальные свойства объекта ToolTip. В противном случае необходимо задать эквивалентные присоединенные свойства класса ToolTipService.
Пример последовательной установки свойств для указания положения содержимого всплывающей подсказки с помощью свойств ToolTip и ToolTipService см. в разделе Задание положения всплывающей подсказки.
Задание стиля всплывающей подсказки
Вы можете задать стиль ToolTip, определив пользовательский атрибут Style. В следующем примере определяется Style, вызывающий Simple , который показывает, как задать смещение ToolTip и изменить его внешний вид, установив параметры Background, Foreground, FontSize и FontWeight.
Использование свойств интервала времени элемента ToolTipService
Класс ToolTipService предоставляет следующие свойства, позволяющие задать время отображения всплывающей подсказки: InitialShowDelay, BetweenShowDelay и ShowDuration.
Используйте свойства InitialShowDelay и ShowDuration, чтобы указать задержку, обычно короткую, перед появлением ToolTip, а также продолжительность отображения ToolTip. Подробнее см. в разделе Практическое руководство. Задержка отображения всплывающей подсказки.
Свойство BetweenShowDelay определяет, должны ли всплывающие подсказки для разных элементов управления отображаться без начальной задержки при быстром перемещении указателя мыши между ними. Дополнительные сведения о свойстве BetweenShowDelay см. в разделе Использование свойства BetweenShowDelay.
В примере ниже показано, как задать эти свойства для всплывающих подсказок.
Читайте также: