Диалоговые окна и всплывающие элементы Dialogs and flyouts

Диалоговые окна и всплывающие элементы используются для временного отображения элементов пользовательского интерфейса, если происходит нечто, требующее уведомления, подтверждения или дополнительных сведений от пользователя. Dialogs and flyouts are transient UI elements that appear when something happens that requires notification, approval, or additional information from the user.

Диалоги Dialogs

Диалоговые окна — это модальные наложения пользовательского интерфейса, которые предоставляют контекстную информацию о приложении. Dialogs are modal UI overlays that provide contextual app information. Диалоговые окна блокируют взаимодействие с окном приложения, пока пользователь явно не закроет окно. Dialogs block interactions with the app window until being explicitly dismissed. Они часто требуют от пользователя совершения каких-либо действий. They often request some kind of action from the user.

Всплывающие элементы Flyouts

Всплывающий элемент — это облегченное всплывающее контекстно-зависимое окно, отображающее элемент пользовательского интерфейса в зависимости от действий пользователя. A flyout is a lightweight contextual popup that displays UI related to what the user is doing. Он включает логику расположения и размеров и может использоваться для отображения дополнительного элемента управления или отображения дополнительных сведений об элементе. It includes placement and sizing logic, and can be used to reveal a secondary control or show more detail about an item.

В отличие от диалогового окна, всплывающий элемент можно быстро закрыть нажатием или щелчком за его пределами, нажатием клавиши Escape или кнопки «Назад», изменением размера окна приложения или ориентации устройства. Unlike a dialog, a flyout can be quickly dismissed by tapping or clicking somewhere outside the flyout, pressing the Escape key or Back button, resizing the app window, or changing the device’s orientation.

Выбор правильного элемента управления Is this the right control?

Диалоговые окна и всплывающие элементы позволяют пользователям быть в курсе важной информации, но также мешают взаимодействию с пользователем. Dialogs and flyouts make sure that users are aware of important information, but they also disrupt the user experience. Так как диалоговые окна модальны (приводят к блокировке), они прерывают работу пользователей и мешают им выполнять дальнейшие действия, пока не произойдет взаимодействие с диалоговым окном. Because dialogs are modal (blocking), they interrupt users, preventing them from doing anything else until they interact with the dialog. Всплывающие элементы в меньшей степени мешают взаимодействию с пользователем, но отображение слишком большого числа всплывающих элементов может отвлекать. Flyouts provide a less jarring experience, but displaying too many flyouts can be distracting.

Определив, собираетесь ли вы использовать диалоговое окно или всплывающий элемент, необходимо выбрать один из этих вариантов. Once you’ve determined that you want to use a dialog or flyout, you need to choose which one to use.

Учитывая то, что, в отличие от всплывающих элементов, диалоговые окна блокируют взаимодействие, последние следует использовать в тех случаях, когда пользователь должен уделить все внимание определенной информации или ответить на вопрос. Given that dialogs block interactions and flyouts do not, dialogs should be reserved for situations where you want the user to drop everything to focus on a specific bit of information or answer a question. С другой стороны, всплывающие элементы можно использовать для привлечения внимания к определенной информации, которую пользователь вполне может проигнорировать. Flyouts, on the other hand, can be used when you want to call attention to something, but it’s ok if the user wants to ignore it.

Используйте диалоговое окно в следующих целях.Use a dialog for.

Чтобы сообщить важную информацию, которую пользователь должен прочитать и осознать перед продолжением работы. Expressing important information that the user must read and acknowledge before proceeding. Примеры приведены ниже: Examples include:
- угроза безопасности пользователя; When the user’s security might be compromised
- намерение изменить ценные данные без возможности отмены действия; When the user is about to permanently alter a valuable asset
- намерение удалить ценные данные; When the user is about to delete a valuable asset
- подтверждение покупки из приложения; To confirm an in-app purchase
Сообщения об ошибках, которые относятся к приложению в целом, например ошибка подключения. Error messages that apply to the overall app context, such as a connectivity error.
Вопросы, если приложению нужно задать пользователю блокирующий вопрос, например, если приложение не может сделать выбор от имени пользователя. Questions, when the app needs to ask the user a blocking question, such as when the app can’t choose on the user’s behalf. Блокирующий вопрос нельзя проигнорировать или отложить. У пользователя должны быть понятные варианты выбора. A blocking question can’t be ignored or postponed, and should offer the user well-defined choices.

Используйте всплывающий элемент в следующих целях.Use a flyout for.

сбор дополнительных сведений для завершения действия; Collecting additional information needed before an action can be completed.
Отображение временно актуальных сведений. Displaying info that’s only relevant some of the time. например, когда пользователь щелкает эскиз изображения в приложении фотоальбома, можно использовать всплывающий элемент для отображения увеличенного варианта этого изображения; For example, in a photo gallery app, when the user clicks an image thumbnail, you might use a flyout to display a large version of the image.
отображение дополнительной информации, например подробных сведений или более длинных описаний элемента на странице. Displaying more information, such as details or longer descriptions of an item on the page.

Как избавиться от ненужных диалоговых окон и всплывающих элементов Ways to avoid using dialogs and flyouts

Учитывайте важность информации, которую требуется отобразить: важна ли она настолько, чтобы прерывать пользователя? Consider the importance of the information you want to share: is it important enough to interrupt the user? Также учтите частоту отображения информации. Если диалоговое окно или уведомление отображается каждые несколько минут, возможно, следует выделить для этой информации место в основном пользовательском интерфейсе. Also consider how frequently the information needs to be shown; if you’re showing a dialog or notification every few minutes, you might want to allocate space for this info in the primary UI instead. Возьмем, к примеру, клиент чата. Вместо того чтобы отображать всплывающий элемент каждый раз, когда друг выполняет вход, можно отображать список друзей, находящихся на данный момент в сети, и выделять друзей, выполняющих вход. For example, in a chat client, rather than showing a flyout every time a friend logs in, you might display a list of friends who are online at the moment and highlight friends as they log on.

Диалоговые окна часто используются для подтверждения действия (например, удаления файла) перед его выполнением. Dialogs are frequently used to confirm an action (such as deleting a file) before executing it. Если ожидается, что пользователь будет часто выполнять определенное действие, вы можете предоставить пользователю возможность отменить ошибочное действие, чем запрашивать его подтверждение каждый раз. If you expect the user to perform a particular action frequently, consider providing a way for the user to undo the action if it was a mistake, rather than forcing users to confirm the action every time.

Как создать диалоговое окно How to create a dialog

Как создать всплывающий элемент How to create a flyout

Примеры Examples

Если у вас установлено приложение XAML Controls Gallery, щелкните здесь, чтобы открыть его и увидеть ContentDialog или Flyout в действии. If you have the XAML Controls Gallery app installed, click here to open the app and see the ContentDialog or Flyout in action.

PopupЭлемент управления предоставляет способ отображения содержимого в отдельном окне, расположенном поверх текущего окна приложения относительно назначенного элемента или экранной координаты. 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. В этом разделе описывается Popup элемент управления и предоставляются сведения об его использовании. This topic introduces the Popup control and provides information about its use.

PopupЭлемент управления отображает содержимое в отдельном окне относительно элемента или точки на экране. A Popup control displays content in a separate window relative to an element or point on the screen. Если отображается Popup , IsOpen свойство имеет значение true . When the Popup is visible, the IsOpen property is set to true .

Объект не Popup открывается автоматически при наведении указателя мыши на родительский объект. A Popup does not automatically open when the mouse pointer moves over its parent object. Если нужно Popup , чтобы автоматически открывался, используйте ToolTip класс или ToolTipService . If you want a Popup to automatically open, use the ToolTip or ToolTipService class. Дополнительные сведения см. в разделе Общие сведения о всплывающих подсказках. For more information, see ToolTip Overview.

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

В следующем примере показано, как определить Popup элемент управления, который является дочерним элементом Button элемента управления. The following example shows how to define a Popup control that is the child element of a Button control. Так как у элемента Button может быть только один дочерний элемент, в этом примере текст для Button элементов управления и заносится Popup в StackPanel . Because a Button can have only one child element, this example places the text for the Button and the Popup controls in a StackPanel. Содержимое элемента Popup отображается в TextBlock элементе управления, который отображает его текст в отдельном окне, расположенном над окном приложения рядом с соответствующим Button элементом управления. The content of the Popup appears in a TextBlock control, which displays its text in a separate window that floats over the application window near the related Button control.

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

PopupЭлементы управления можно создавать в других элементах управления. You can build Popup controls into other controls. Следующие элементы управления реализуют Popup элемент управления для конкретных применений. The following controls implement the Popup control for specific uses:

ToolTip. ToolTip. Если необходимо создать подсказку для элемента, используйте ToolTip ToolTipService классы и. If you want to create a tooltip for an element, use the ToolTip and ToolTipService classes. Дополнительные сведения см. в разделе Общие сведения о всплывающих подсказках. For more information, see ToolTip Overview.

ContextMenu. ContextMenu. Если необходимо создать контекстное меню для элемента, используйте ContextMenu элемент управления. If you want to create a context menu for an element, use the ContextMenu control. Дополнительные сведения см. в разделе Общие сведения об элементе управления ContextMenu. For more information, see ContextMenu Overview.

ComboBox. ComboBox. Если необходимо создать элемент управления выбора с раскрывающимся списком, который можно отобразить или скрыть, используйте 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. Expander. Если необходимо создать элемент управления, отображающий заголовок с сворачиваемой областью отображения содержимого, используйте Expander элемент управления. If you want to create a control that displays a header with a collapsible area that displays content, use the Expander control. Дополнительные сведения см. в разделе Общие сведения об элементе управления Expander. For more information, see Expander Overview.

Внешний вид и поведение контекстного меню Popup Behavior and Appearance

PopupЭлемент управления предоставляет функциональные возможности, позволяющие настраивать его поведение и внешний вид. The Popup control provides functionality that enables you to customize its behavior and appearance. Например, можно задать поведение открытия и закрытия, анимацию, эффекты непрозрачности и растровых эффектов, а также Popup размер и расположение. For example, you can set open and close behavior, animation, opacity and bitmap effects, and Popup size and position.

Поведение открытия и закрытия Open and Close Behavior

PopupЭлемент управления отображает его содержимое, если IsOpen свойство имеет значение true . A Popup control displays its content when the IsOpen property is set to true . По умолчанию Popup остается открытым до тех пор, пока IsOpen свойство не будет установлено в значение false . By default, Popup stays open until the IsOpen property is set to false . Однако поведение по умолчанию можно изменить, задав StaysOpen для свойства значение false . However, you can change the default behavior by setting the StaysOpen property to false . Если задать для этого свойства значение false , Popup окно содержимого будет иметь захват мыши. When you set this property to false , the Popup content window has mouse capture. PopupТеряется захват мыши, и окно закрывается при возникновении события мыши вне Popup окна. The Popup loses mouse capture and the window closes when a mouse event occurs outside the Popup window.

OpenedСобытия и Closed вызываются, когда Popup окно содержимого открыто или закрыто. The Opened and Closed events are raised when the Popup content window is open or closed.

Анимация Animation

Этот Popup элемент управления имеет встроенную поддержку анимаций, которые обычно связаны с такими поведениями, как выцветание и скольжение. The Popup control has built-in support for the animations that are typically associated with behaviors like fade-in and slide-in. Эти анимации можно включить, задав PopupAnimation для свойства PopupAnimation значение перечисления. You can turn on these animations by setting the PopupAnimation property to a PopupAnimation enumeration value. Для Popup правильной работы анимации необходимо задать AllowsTransparency для свойства значение true . For Popup animations to work correctly, you must set the AllowsTransparency property to true .

Можно также применить анимацию, например Storyboard , к Popup элементу управления. You can also apply animations like Storyboard to the Popup control.

Прозрачность и эффекты для точечных рисунков Opacity and Bitmap Effects

OpacityСвойство Popup элемента управления не влияет на его содержимое. The Opacity property for a Popup control has no effect on its content. По умолчанию Popup окно содержимого является непрозрачным. By default, the Popup content window is opaque. Чтобы создать прозрачный объект Popup , присвойте AllowsTransparency свойству значение true . To create a transparent Popup, set the AllowsTransparency property to true .

Содержимое объекта не Popup наследует эффекты точечного рисунка, такие как DropShadowBitmapEffect , которые непосредственно задаются для Popup элемента управления или любого другого элемента в родительском окне. 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. Чтобы эффекты точечных рисунков отображались на содержимом Popup , необходимо задать эффект точечного рисунка непосредственно для его содержимого. For bitmap effects to appear on the content of a Popup, you must set the bitmap effect directly on its content. Например, если дочерний элемент a Popup является StackPanel , установите эффекты точечного рисунка на StackPanel . For example, if the child of a Popup is a StackPanel, set the bitmap effect on the StackPanel.

По умолчанию Popup размер автоматически изменяется в соответствии с содержимым. By default, a Popup is automatically sized to its content. При возникновении автоматического изменения размера некоторые эффекты растрового изображения могут быть скрыты, так как размер области экрана по умолчанию, определенный для Popup содержимого, не предоставляет достаточно места для отображения эффектов растрового изображения. 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 содержимое также может быть скрыто при задании RenderTransform для содержимого. Popup content can also be obscured when you set a RenderTransform on the content. В этом случае часть содержимого может быть скрыта, если содержимое преобразованного элемента выходит Popup за пределы области исходного Popup . In this scenario, some content might be hidden if the content of the transformed Popup extends beyond the area of the original Popup. Если для растрового изображения или преобразования требуется больше пространства, можно определить поле вокруг содержимого, 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

Всплывающее окно можно разместить, задав PlacementTarget свойства. PlacementRectangle Placement HorizontalOffset и VerticalOffsetProperty . You can position a popup by setting the PlacementTarget, PlacementRectangle, Placement, HorizontalOffset, and VerticalOffsetProperty properties. Дополнительные сведения см. в разделе Поведение при размещении контекстного меню. For more information, see Popup Placement Behavior. Когда Popup отображается на экране, он не перемещает себя при перемещении его родительского элемента. When Popup is displayed on the screen, it does not reposition itself if its parent is repositioned.

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

Размещение Popup элемента управления можно настроить, указав набор координат, относительный относительно того, PlacementTarget где должен отображаться элемент Popup . 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.

Чтобы настроить размещение, присвойте Placement свойству значение Custom . To customize placement, set the Placement property to Custom. Затем определите CustomPopupPlacementCallback делегат, возвращающий набор возможных точек размещения и основных осей (в порядке предпочтения) для Popup . Then define a CustomPopupPlacementCallback delegate that returns a set of possible placement points and primary axes (in order of preference) for the Popup. Точка, на которой показана самая крупная часть элемента, Popup выбирается автоматически. The point that shows the largest part of the Popup is automatically selected. См. пример в разделе Указание пользовательского расположения всплывающего окна. For an example, see Specify a Custom Popup Position.

PopupЭлемент управления не имеет собственного визуального дерева; вместо этого он возвращает размер 0 (нуль) при MeasureOverride Popup вызове метода для. 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. Однако если для свойства задано значение IsOpen Popup , то true создается новое окно со своим собственным визуальным деревом. However, when you set the IsOpen property of Popup to true , a new window with its own visual tree is created. Новое окно содержит Child содержимое Popup . The new window contains the Child content of Popup. Ширина и высота нового окна не могут превышать 75 процентов от ширины или высоты экрана. The width and height of the new window cannot be larger than 75 percent of the width or height of the screen.

PopupЭлемент управления хранит ссылку на его Child содержимое как логический дочерний объект. The Popup control maintains a reference to its Child content as a logical child. При создании нового окна содержимое Popup становится визуальным дочерним элементом окна и остается логическим дочерним элементом Popup . When the new window is created, the content of Popup becomes a visual child of the window and remains the logical child of Popup. И наоборот, Popup остается логическим родителем своего Child содержимого. Conversely, Popup remains the logical parent of its Child content.