В отличие от окон приложений и документов, диалоговые окна не имеют строки меню и строки состояния. Рабочая область в диалоговых окнах содержит следующие элементы управления (рис. 2.7.).
Строка заголовка содержит название окна, кнопку (справка) и управляющую кнопку (закрыть).
Диалоговые окна, в которых задается большое количество параметров, разбиваются на тематические разделы (подокна). Для каждого такого подокна выделена своя вкладка, которая состоит из названия и страницы. Из всех вкладок диалогового окна будет активна только одна, а для остальных — показаны лишь их названия.
Список. Содержит список элементов для выбора.
Раскрывающийся список. Представляет собой список, в котором первоначально видна только одна строка. В правой части поля имеется кнопка , щелчок на которой раскрывает список всех элементов. Если данный список не помещается в отведенную для него область, то появляется присоединенная полоса прокрутки.
Флажок. Имеет вид небольшого белого квадратика, рядом с которым находится надпись о его назначении. Щелчок мышью на пустом квадратике устанавливает флажок, при этом в нем появляется галочка или крестик. Выбор флажков не зависит друг от друга и, в зависимости от условий, может быть установлено сразу несколько флажков или ни одного.
Командная кнопка. Представляет собой обычную кнопку с надписью. Если надпись заканчивается многоточием, то после щелчка на данной кнопке на экране появляется дополнительное диалоговое окно.
Демонстрационное подокно. В этом окне демонстрируются результаты установки различных выбранных параметров.
Поле ввода. Представляет собой прямоугольную область диалогового окна, предназначенную для ввода с клавиатуры текстовой информации или числовых данных. Активизация поля производится щелчком мышью, после чего в нем появляется мигающий курсор
Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет
Диалоговые элементы управления Dialog controls
Диалоговые элементы управления — это модальные наложения пользовательского интерфейса, которые предоставляют контекстную информацию о приложении. Dialog controls are modal UI overlays that provide contextual app information. Они блокируют взаимодействие с окном приложения, пока пользователь явно их не закроет. They block interactions with the app window until being explicitly dismissed. Они часто требуют от пользователя совершения каких-либо действий. They often request some kind of action from the user.
Получение библиотеки пользовательского интерфейса WindowsGet the Windows UI Library
Библиотека пользовательского интерфейса Windows 2.2 или более поздних версий содержит новый шаблон для этого элемента управления, который использует закругленные углы. Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Дополнительные сведения см. в разделе о радиусе угла. For more info, see Corner radius. WinUI — это пакет NuGet, содержащий новые элементы управления и функции пользовательского интерфейса для приложений для Windows. WinUI is a NuGet package that contains new controls and UI features for Windows apps. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. For more info, including installation instructions, see Windows UI Library.
Выбор правильного элемента управления Is this the right control?
Диалоговые окна используются для уведомления пользователей о важной информации или запроса подтверждения либо дополнительных сведений перед совершением действия. Use dialogs to notify users of important information or to request confirmation or additional info before an action can be completed.
Рекомендации по целесообразности использования диалоговых окон и всплывающих элементов (аналогичных элементов управления) приведены в разделе Диалоговые окна и всплывающие элементы. For recommendations on when to use a dialog vs. when to use a flyout (a similar control), see Dialogs and flyouts.
Примеры Examples
XAML Controls Gallery XAML Controls Gallery
Если у вас установлено приложение 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.
Общие рекомендации General guidelines
В первой строке диалогового сообщения явно изложите, в чем проблема или что требуется от пользователя. Clearly identify the issue or the user’s objective in the first line of the dialog’s text.
Заголовок диалогового окна — это основная инструкция. Он необязателен. The dialog title is the main instruction and is optional.
Используйте краткий заголовок для пояснений, что пользователям следует сделать в диалоговом окне. Use a short title to explain what people need to do with the dialog.
Если вы используете диалоговое окно для простого сообщения, указания на ошибку или вопроса, заголовок можно опустить. If you’re using the dialog to deliver a simple message, error or question, you can optionally omit the title. Ключевую информацию должен передавать текст сообщения. Rely on the content text to deliver that core information.
Убедитесь, что заголовок соответствует предлагаемому выбору кнопок. Make sure that the title relates directly to the button choices.
Содержимое диалогового окна включает текст описания. Оно обязательно. The dialog content contains the descriptive text and is required.
Изложите сообщение, ошибку или блокирующий вопрос как можно проще. Present the message, error, or blocking question as simply as possible.
Если имеется заголовок диалогового окна, используйте область содержимого для более подробных сведений или пояснения терминологии. If a dialog title is used, use the content area to provide more detail or define terminology. Не повторяйте заголовок в немного измененной формулировке. Don’t repeat the title with slightly different wording.
Должна иметься по крайней мере одна диалоговая кнопка. At least one dialog button must appear.
Убедитесь, что диалоговое окно имеет по крайней мере одну кнопку, соответствующую безопасному обратимому действию, например «Понятно», «Закрыть» или «Отмена». Ensure that your dialog has at least one button corresponding to a safe, nondestructive action like «Got it!», «Close», or «Cancel». Используйте API CloseButton, чтобы добавить эту кнопку. Use the CloseButton API to add this button.
В качестве текста кнопки используйте конкретные варианты ответа на основную инструкцию или содержимое. Use specific responses to the main instruction or content as button text. Например: «Разрешить приложению AppName доступ к вашему расположению?», после которого следуют кнопки «Разрешить» и «Запретить». An example is, «Do you want to allow AppName to access your location?», followed by «Allow» and «Block» buttons. Конкретные варианты ответа воспринимаются быстрее, что помогает эффективно принимать решения. Specific responses can be understood more quickly, resulting in efficient decision making.
Убедитесь, что текст кнопки действия является кратким. Ensure that the text of the action buttons is concise. Короткие строки позволяют пользователю сделать выбор быстро и уверенно. Short strings enable the user to make a choice quickly and confidently.
Помимо безопасного обратимого действия можно при необходимости представить пользователю одну или две кнопки действия, связанные с основной инструкцией. In addition to the safe, nondestructive action, you may optionally present the user with one or two action buttons related to the main instruction. Эти кнопки действия «выполнить» подтверждают главную цель диалогового окна. These «do it» action buttons confirm the main point of the dialog. Используйте API SecondaryButton и PrimaryButton для добавления этих действий «выполнить». Use the PrimaryButton and SecondaryButton APIs to add these «do it» actions.
Кнопки действий «выполнить» должны отображаться как крайние левые кнопки. The «do it» action button(s) should appear as the leftmost buttons. Безопасное обратимое действие должно быть представлено правой кнопкой. The safe, nondestructive action should appear as the rightmost button.
При необходимости можно выделить одну из трех кнопок в качестве кнопки диалогового окна по умолчанию. You may optionally choose to differentiate one of the three buttons as the dialog’s default button. Используйте API DefaultButton для выделения одной из кнопок. Use the DefaultButton API to differentiate one of the buttons.
Не используйте диалоговые окна при возникновении контекстно-зависимых от определенной области на странице ошибок, таких как ошибки при проверке (например, в полях для ввода паролей). Используйте непосредственно элемент Canvas приложения для отображения внутренних ошибок. Don’t use dialogs for errors that are contextual to a specific place on the page, such as validation errors (in password fields, for example), use the app’s canvas itself to show inline errors.
Используйте класс ContentDialog для создания элементов диалогового окна. Use the ContentDialog class to build your dialog experience. Не используйте устаревший API MessageDialog. Don’t use the deprecated MessageDialog API.
Как создать диалоговое окно How to create a dialog
Для создания диалогового окна используется класс ContentDialog. To create a dialog, you use the ContentDialog class. Диалоговое окно можно создать в виде кода или разметки. You can create a dialog in code or markup. Хотя обычно проще определять элементы пользовательского интерфейса в XAML, при создании простого диалогового окна удобнее использовать обычный код. Although its usually easier to define UI elements in XAML, in the case of a simple dialog, it’s actually easier to just use code. В этом примере показано создание диалогового окна для уведомления пользователя об отсутствии подключения к сети WiFi, а для отображения диалогового окна используется метод ShowAsync. This example creates a dialog to notify the user that there’s no WiFi connection, and then uses the ShowAsync method to display it.
Когда пользователь нажимает кнопку диалогового кона, метод ShowAsync возвращает ContentDialogResult, чтобы сообщить вам, какую кнопку нажал пользователь. When the user clicks a dialog button, the ShowAsync method returns a ContentDialogResult to let you know which button the user clicks.
В этом примере в диалоговом окне задается вопрос и используется возвращенный ContentDialogResult, чтобы определить ответ пользователя. The dialog in this example asks a question and uses the returned ContentDialogResult to determine the user’s response.
Предоставление безопасного действия Provide a safe action
Так как диалоговые окна блокируют взаимодействие с пользователем, а кнопки — это основной механизм, позволяющий пользователям закрыть диалоговое окно, убедитесь, что диалоговое окно содержит по крайней мере одну кнопку безопасного и обратимого действия, например «Закрыть» или «Понятно». Because dialogs block user interaction, and because buttons are the primary mechanism for users to dismiss the dialog, ensure that your dialog contains at least one «safe» and nondestructive button such as «Close» or «Got it!». Все диалоговые окна должны содержать по крайней мере одну кнопку безопасного действия, позволяющую закрыть диалоговое окно.All dialogs should contain at least one safe action button to close the dialog. Это гарантирует, что пользователь сможет спокойно закрыть диалоговое окно без выполнения какого-либо действия. This ensures that the user can confidently close the dialog without performing an action.
Когда диалоговые окна используются для отображения блокирующего вопроса, диалоговое окно должно содержать кнопки действий, связанные с этим вопросом. When dialogs are used to display a blocking question, your dialog should present the user with action buttons related to the question. Кнопка «безопасного» и обратимого действия может сопровождаться одной или двумя кнопками действия «выполнить». The «safe» and nondestructive button may be accompanied by one or two «do it» action buttons. Предлагая пользователю несколько вариантов на выбор, убедитесь, что кнопки точно соответствуют действиям «выполнить» и безопасным действиям «не выполнять», связанным с предложенным вопросом. When presenting the user with multiple options, ensure that the buttons clearly explain the «do it» and safe/»don’t do it» actions related to the question proposed.
Диалоговые окна с тремя кнопками используются, когда вы предлагаете пользователю два действия «выполнить» и одно действие «не выполнять». Three button dialogs are used when you present the user with two «do it» actions and a «don’t do it» action. Диалоговые окна с тремя кнопками следует использовать не слишком часто. В них должны четко различаться дополнительное действие и безопасное действие (закрытие). Three button dialogs should be used sparingly with clear distinctions between the secondary action and the safe/close action.
Три кнопки в диалоговом окне The three dialog buttons
ContentDialog поддерживает три типа кнопки, которые можно использовать для создания диалоговых окон. ContentDialog has three different types of buttons that you can use to build a dialog experience.
CloseButton (обязательный) представляет безопасное, обратимое действие, которое позволяет пользователю закрыть диалоговое окно. CloseButton — Required — Represents the safe, nondestructive action that enables the user to exit the dialog. Отображается в виде правой кнопки. Appears as the rightmost button.
PrimaryButton (необязательный) представляет первое действие «выполнить». PrimaryButton — Optional — Represents the first «do it» action. Отображается в виде левой кнопки. Appears as the leftmost button.
SecondaryButton (необязательный) представляет второе действие «выполнить». SecondaryButton — Optional — Represents the second «do it» action. Отображается в виде средней кнопки. Appears as the middle button.
Использование встроенных кнопок позволяет их правильно разместить в окне, а также гарантирует, что они будут правильно реагировать на события клавиатуры, что область команд останется видимой, даже когда отображена экранная клавиатура, и что диалоговое окно будет выглядеть согласованно с другими диалоговыми окнами. Using the built-in buttons will position the buttons appropriately, ensure that they correctly respond to keyboard events, ensure that the command area remains visible even when the on-screen keyboard is up, and will make the dialog look consistent with other dialogs.
CloseButton CloseButton
Каждое диалоговое окно должно содержать кнопку безопасного и обратимого действия, которая позволяет пользователям спокойно закрыть диалоговое окно. Every dialog should contain a safe, nondestructive action button that enables the user to confidently exit the dialog.
Используйте API ContentDialog.CloseButton для создания этой кнопки. Use the ContentDialog.CloseButton API to create this button. Это позволит обеспечить правильное взаимодействие с пользователем для всех методов ввода, включая мышь, клавиатуру, сенсорный ввод и игровой контроллер. This allows you to create the right user experience for all inputs including mouse, keyboard, touch, and gamepad. Это взаимодействие будет происходить в следующих случаях: This experience will happen when:
пользователь нажимает кнопку CloseButton или касается ее; The user clicks or taps on the CloseButton
пользователь нажимает системную кнопку «Назад»; The user presses the system back button
пользователь нажимает клавишу «ESC» на клавиатуре; The user presses the ESC button on the keyboard
пользователь нажимает кнопку «B» игрового контроллера. The user presses Gamepad B
Когда пользователь нажимает кнопку диалогового кона, метод ShowAsync возвращает ContentDialogResult, чтобы сообщить вам, какую кнопку нажал пользователь. When the user clicks a dialog button, the ShowAsync method returns a ContentDialogResult to let you know which button the user clicks. При нажатии кнопки CloseButton возвращается ContentDialogResult.None. Pressing on the CloseButton returns ContentDialogResult.None.
PrimaryButton и SecondaryButton PrimaryButton and SecondaryButton
Помимо CloseButton, вы можете также предоставить пользователю одну или две кнопки действия, связанные с основной инструкцией. In addition to the CloseButton, you may optionally present the user with one or two action buttons related to the main instruction. Используйте PrimaryButton для первого действия «выполнить» и SecondaryButton — для второго действия «выполнить». Leverage PrimaryButton for the first «do it» action, and SecondaryButton for the second «do it» action. В диалоговых окнах с тремя кнопками PrimaryButton обычно представляет подтверждающее действие «выполнить», а SecondaryButton обычно представляет нейтральное или вспомогательное действие «выполнить». In three-button dialogs, the PrimaryButton generally represents the affirmative «do it» action, while the SecondaryButton generally represents a neutral or secondary «do it» action. Например, приложение может предложить пользователю подписаться на службу. For example, an app may prompt the user to subscribe to a service. PrimaryButton в качестве подтверждающего действия «выполнить» будет содержать текст «Подписаться», а SecondaryButton в качестве нейтрального действия «выполнить» будет содержать текст «Попробовать». The PrimaryButton as the affirmative «do it» action would host the Subscribe text, while the SecondaryButton as the neutral «do it» action would host the Try it text. CloseButton позволит пользователю отменить операцию без выполнения какого-либо действия. The CloseButton would allow the user to cancel without performing either action.
Когда пользователь нажимает кнопку PrimaryButton, метод ShowAsync возвращает ContentDialogResult.Primary. When the user clicks on the PrimaryButton, the ShowAsync method returns ContentDialogResult.Primary. Когда пользователь нажимает кнопку SecondaryButton, метод ShowAsync возвращает ContentDialogResult.Secondary. When the user clicks on the SecondaryButton, the ShowAsync method returns ContentDialogResult.Secondary.
DefaultButton DefaultButton
При необходимости можно выделить одну из трех кнопок в качестве кнопки по умолчанию. You may optionally choose to differentiate one of the three buttons as the default button. Если задать кнопку по умолчанию, то происходит следующее. Specifying the default button causes the following to happen:
Кнопка оформляется как кнопка подтверждения действия. The button receives the Accent Button visual treatment
Кнопка будет автоматически реагировать на нажатие клавиши «ВВОД». The button will respond to the ENTER key automatically
Когда пользователь нажимает клавишу «ВВОД» на клавиатуре, активируется обработчик нажатия, связанный с кнопкой, и ContentDialogResult вернет значение, связанное с кнопкой по умолчанию. When the user presses the ENTER key on the keyboard, the click handler associated with the Default Button will fire and the ContentDialogResult will return the value associated with the Default Button
Если пользователь поместил фокус клавиатуры на элемент управления, который обрабатывает кнопку «ВВОД», то кнопка по умолчанию не будет реагировать на нажатия клавиши «ВВОД». If the user has placed Keyboard Focus on a control that handles ENTER, the Default Button will not respond to ENTER presses
Фокус перейдет на эту кнопку автоматически при открытии диалогового окна, если оно содержит элементы пользовательского интерфейса, поддерживающие фокус. The button will receive focus automatically when the Dialog is opened unless the dialog’s content contains focusable UI
Используйте свойство ContentDialog.DefaultButton, чтобы указать кнопку по умолчанию. Use the ContentDialog.DefaultButton property to indicate the default button. По умолчанию кнопка по умолчанию не задана. By default, no default button is set.
Диалоговые окна подтверждения («ОК» и «Отмена») Confirmation dialogs (OK/Cancel)
Диалоговое окно подтверждения позволяет пользователям подтвердить действие. A confirmation dialog gives users the chance to confirm that they want to perform an action. Они могут подтвердить выполнение действия или отменить его. They can affirm the action, or choose to cancel. Типичное диалоговое окно подтверждения обычно содержит две кнопки: подтверждения («ОК») и отмены. A typical confirmation dialog has two buttons: an affirmation («OK») button and a cancel button.
В целом кнопка подтверждения должна быть слева (основная кнопка), а кнопка отмены (вспомогательная) — справа. In general, the affirmation button should be on the left (the primary button) and the cancel button (the secondary button) should be on the right.
Как указано в разделе «Общие рекомендации», используйте кнопки с текстом, который описывает конкретные варианты ответа на основную инструкцию или содержимое. As noted in the general recommendations section, use buttons with text that identifies specific responses to the main instruction or content.
На некоторых платформах кнопка подтверждения размещена справа, а не слева. Some platforms put the affirmation button on the right instead of the left. Так почему рекомендуется поместить ее слева? So why do we recommend putting it on the left? Если предполагается, что большинство пользователей — правши и держат телефон в правой руке, им будет удобнее нажимать кнопку подтверждения слева, так как более вероятно, что она будет расположена в пределах досягаемости больших пальцев пользователя. Чтобы нажать кнопки в правой части экрана, пользователю необходимо переместить большой палец в менее удобное положение. If you assume that the majority of users are right-handed and they hold their phone with that hand, it’s actually more comfortable to press the affirmation button when it’s on the left, because the button is more likely to be within the user’s thumb-arc. Buttons on the right-side of the screen require the user to pull their thumb inward into a less-comfortable position.
ContentDialog в объектах AppWindow или XAML Island ContentDialog in AppWindow or Xaml Islands
ПРМЕЧАНИЕ. Этот раздел относится только к приложениям, предназначенным для Windows 10 версии 1903 или более поздней версии. NOTE: This section applies only to apps that target Windows 10, version 1903 or later. Объекты AppWindow и XAML Island недоступны в более ранних версиях. AppWindow and XAML Islands are not available in earlier versions. Дополнительные сведения об управлении версиями см. в статье Приложения с адаптивным к версии кодом. For more info about versioning, see Version adaptive apps.
По умолчанию диалоговые окна содержимого модально связаны с корневым объектом ApplicationView. By default, content dialogs display modally relative to the root ApplicationView. При использовании ContentDialog в объекте AppWindow или XAML Island необходимо вручную задать XamlRoot для диалогового окна, указав корень узла XAML. When you use ContentDialog inside of either an AppWindow or a XAML Island, you need to manually set the XamlRoot on the dialog to the root of the XAML host.
Для этого задайте для свойства XamlRoot элемента ContentDialog то же значение XamlRoot, что и у элемента, уже заданного в AppWindow или XAML Island, как показано ниже. To do so, set the ContentDialog’s XamlRoot property to the same XamlRoot as an element already in the AppWindow or XAML Island, as shown here.
В потоке может существовать только один элемент ContentDialog одновременно. There can only be one ContentDialog open per thread at a time. Попытка открыть два элемента ContentDialogs породит исключение, даже если они пытаются открыться в отдельных объектах AppWindow. Attempting to open two ContentDialogs will throw an exception, even if they are attempting to open in separate AppWindows.
(справка) и управляющую кнопку 
(закрыть).
, щелчок на которой раскрывает список всех элементов. Если данный список не помещается в отведенную для него область, то появляется присоединенная полоса прокрутки.
