Диалоговые окна и всплывающие элементы
Диалоговые окна и всплывающие элементы используются для временного отображения элементов пользовательского интерфейса, если происходит нечто, требующее уведомления, подтверждения или дополнительных сведений от пользователя.
Диалоги
Диалоговые окна — это модальные наложения пользовательского интерфейса, которые предоставляют контекстную информацию о приложении. Диалоговые окна блокируют взаимодействие с окном приложения, пока пользователь явно не закроет окно. Они часто требуют от пользователя совершения каких-либо действий.
Всплывающие элементы
Всплывающий элемент — это облегченное всплывающее контекстно-зависимое окно, отображающее элемент пользовательского интерфейса в зависимости от действий пользователя. Он включает логику расположения и размеров и может использоваться для отображения дополнительного элемента управления или отображения дополнительных сведений об элементе.
В отличие от диалогового окна, всплывающий элемент можно быстро закрыть нажатием или щелчком за его пределами, нажатием клавиши Escape или кнопки «Назад», изменением размера окна приложения или ориентации устройства.
Выбор правильного элемента управления
Диалоговые окна и всплывающие элементы позволяют пользователям быть в курсе важной информации, но также мешают взаимодействию с пользователем. Так как диалоговые окна модальны (приводят к блокировке), они прерывают работу пользователей и мешают им выполнять дальнейшие действия, пока не произойдет взаимодействие с диалоговым окном. Всплывающие элементы в меньшей степени мешают взаимодействию с пользователем, но отображение слишком большого числа всплывающих элементов может отвлекать.
Определив, собираетесь ли вы использовать диалоговое окно или всплывающий элемент, необходимо выбрать один из этих вариантов.
Учитывая то, что, в отличие от всплывающих элементов, диалоговые окна блокируют взаимодействие, последние следует использовать в тех случаях, когда пользователь должен уделить все внимание определенной информации или ответить на вопрос. С другой стороны, всплывающие элементы можно использовать для привлечения внимания к определенной информации, которую пользователь вполне может проигнорировать.
Как избавиться от ненужных диалоговых окон и всплывающих элементов
Учитывайте важность информации, которую требуется отобразить: важна ли она настолько, чтобы прерывать пользователя? Также учтите частоту отображения информации. Если диалоговое окно или уведомление отображается каждые несколько минут, возможно, следует выделить для этой информации место в основном пользовательском интерфейсе. Возьмем, к примеру, клиент чата. Вместо того чтобы отображать всплывающий элемент каждый раз, когда друг выполняет вход, можно отображать список друзей, находящихся на данный момент в сети, и выделять друзей, выполняющих вход.
Диалоговые окна часто используются для подтверждения действия (например, удаления файла) перед его выполнением. Если ожидается, что пользователь будет часто выполнять определенное действие, вы можете предоставить пользователю возможность отменить ошибочное действие, чем запрашивать его подтверждение каждый раз.
Как создать диалоговое окно
Как создать всплывающий элемент
Примеры
Если у вас установлено приложение XAML Controls Gallery, щелкните здесь, чтобы открыть его и увидеть ContentDialog или Flyout в действии.
Общие сведения о диалоговых окнах
Изолированные приложения обычно имеют главное окно, в котором отображаются основные данные, по которым приложение работает, и предоставляет функциональные возможности для обработки этих данных с помощью пользовательский интерфейс таких механизмов, как строки меню, панели инструментов и строки состояния. Нетривиальное приложение может также отображать дополнительные окна для следующих целей:
отображения определенных сведений для пользователей;
сбора сведений от пользователей;
сбора и отображения сведений.
Эти типы окон называются диалоговыми окнами, и существует два типа: модальные и немодальные.
Windows Presentation Foundation (WPF) позволяет создавать несколько типов диалоговых окон, включая окна сообщений, общие диалоговые окна и пользовательские диалоговые окна. В этом разделе обсуждаются все, а в образце диалогового окна приведены соответствующие примеры.
Окна сообщений
Окно сообщения является диалоговым, которое можно использовать для вывода текстовой информации и разрешения пользователям принимать решения с помощью кнопок. На следующем рисунке показано окно сообщения, в котором отображается текстовая информация, задается вопрос и предоставляются три кнопки для ответа на этот вопрос.
Чтобы создать окно сообщения, используйте MessageBox класс. MessageBox позволяет настроить текст, заголовок, значок и кнопки в окне сообщения, используя код, подобный приведенному ниже.
Чтобы отобразить окно сообщения, вызовите static Show метод, как показано в следующем коде.
Когда коду, который показывает окно сообщения, нужно определить и обработать решение пользователя (какая кнопка была нажата), он может проверить результат окна сообщения, как показано в следующем коде.
Хотя MessageBox может предложить простое взаимодействие с пользователем диалогового окна, преимущество использования MessageBox — это единственный тип окна, который может быть отображен приложениями, выполняемыми в песочнице безопасности частичного доверия (см. раздел Безопасность), например в приложениях браузера XAML (XBAP).
Большинство диалоговых окон отображают и собирают более сложные данные, чем результат окна сообщения, в том числе текст, выбранные варианты (флажки), взаимоисключающий выбор (переключатели) и списки выбора (списки, поля со списком, поля с раскрывающимся списком). для этого Windows Presentation Foundation (WPF) предоставляет несколько общих диалоговых окон и позволяет создавать собственные диалоговые окна, хотя использование либо ограничено приложениями, работающими с полным доверием.
Общие диалоговые окна
в Windows реализовано множество многократно используемых диалоговых окон, которые являются общими для всех приложений, включая диалоговые окна для открытия файлов, сохранения файлов и печати. Поскольку эти диалоговые окна реализованы операционной системой, они могут совместно использоваться всеми приложениями, работающими в операционной системе, что помогает поддерживать единообразие пользовательского интерфейса; если пользователи знакомы с диалоговым окном, предоставляемым операционной системой в одном приложении, им не нужно учиться пользоваться этим диалоговым окном в других приложениях. Поскольку эти диалоговые окна доступны для всех приложений, и они помогают обеспечить единообразное взаимодействие с пользователем, они называются общими диалоговыми окнами.
Windows Presentation Foundation (WPF) инкапсулирует общие диалоговые окна открытия файла, сохранения файлов и печати и предоставляет их в качестве управляемых классов для использования в автономных приложениях. В этом разделе приводится краткий обзор каждого типа диалоговых окон.
Диалоговое окно открытия файла
Диалоговое окно открытия файлов, показанное на следующем рисунке, используется функциональностью открытия файла для получения имени открываемого файла.
Общее диалоговое окно открытия файла реализуется как OpenFileDialog класс и находится в Microsoft.Win32 пространстве имен. Следующий код показывает, как создавать, настраивать и отображать такое окно, а также как обрабатывать результат.
OpenFileDialog может использоваться для безопасного извлечения имен файлов приложениями, работающими с частичным доверием (см. раздел Безопасность).
диалоговое окно сохранения файлов
Диалоговое окно сохранения файлов, показанное на следующем рисунке, используется функциональностью сохранения файла для получения имени сохраняемого файла.
Диалоговое окно «Общие файлы сохранения» реализуется как SaveFileDialog класс и находится в Microsoft.Win32 пространстве имен. Следующий код показывает, как создавать, настраивать и отображать такое окно, а также как обрабатывать результат.
Диалоговое окно печати, показанное на следующем рисунке, используется функциональными возможностями печати для выбора и настройки принтера, на котором пользователь хочет печатать данные.
Общее диалоговое окно печати реализуется как PrintDialog класс и находится в System.Windows.Controls пространстве имен. Следующий код показывает, как создавать, настраивать и отображать такое окно.
Настраиваемые диалоговые окна
Хотя общие диалоговые окна полезны и должны использоваться, когда это возможно, они не поддерживают требований диалоговых окон отдельного домена. В этих случаях необходимо создавать собственные диалоговые окна. Как мы увидим, диалоговое окно является окном со специальным поведением. Window реализует эти поведения и, следовательно, используется Window для создания настраиваемых модальных и немодальных диалоговых окон.
Создание модального настраиваемого диалогового окна
В этом разделе показано, как использовать Window для создания типичной реализации модального диалогового окна с помощью Margins диалогового окна в качестве примера (см. Пример диалогового окна). Это Margins диалоговое окно показано на следующем рисунке.
Настройка модального диалогового окна
Пользовательский интерфейс для типичного диалогового окна включает следующее.
Различные элементы управления, которые необходимы для сбора нужных данных.
Кнопка Закрыть в заголовке окна.
Системное меню для сворачивания, развертывания, восстановления и закрытия диалогового окна.
Расположение выше и в центре окна, открывшего диалоговое окно.
Возможность изменять размер, если это возможно, чтобы не допустить слишком маленького диалогового окна, а также предоставить пользователю полезный размер по умолчанию. Для этого необходимо задать значения по умолчанию и минимальные размеры.
Следующий код демонстрирует такую конфигурацию.
Пользовательский интерфейс для диалогового окна также распространяется в строку меню окна, открывающего диалоговое окно. Если пункт меню вызывает функцию, которая перед продолжением выполнения требует взаимодействия с пользователем посредством диалогового окна, то в названии этого пункта меню будет многоточие в заголовке, как показано ниже.
Если пункт меню вызывает функцию, которая отображает диалоговое окно, не требующее взаимодействия с пользователем, например диалоговое окно «О программе», многоточие не требуется.
Открытие модального диалогового окна
Диалоговое окно обычно отображается в результате выбора пользователем пункта меню для выполнения доменной функции, такой как установка полей документа в текстовом процессоре. Отображение диалогового окна похоже на отображение обычного окна, хотя требуется дополнительная настройка для диалогового окна. Весь процесс создания, настройки и открытия диалогового окна показан в следующем коде.
Здесь код передает в диалоговое окно сведения по умолчанию (текущие поля). Он также задает Window.Owner свойство со ссылкой на окно, в котором отображается диалоговое окно. в общем случае необходимо всегда задавать владельца для диалогового окна, чтобы обеспечить поведение окна, которое является общим для всех диалоговых окон (дополнительные сведения см. в разделе обзор Windows WPF ).
Необходимо указать владельца для поддержки автоматизации ПОЛЬЗОВАТЕЛЬСКОГО интерфейса для диалоговых окон (см. Обзор модели автоматизации пользовательскогоинтерфейса).
После настройки диалогового окна он отображается как модальный путем вызова ShowDialog метода.
Проверка предоставленных пользователем данных
Если открывается диалоговое окно и пользователь предоставляет требуемые данные, диалоговое окно отвечает за проверку допустимости предоставленных данных по следующим причинам.
С точки зрения безопасности следует проверять все входные данные.
С точки зрения конкретного домена проверка данных предотвращает обработку в коде ошибочных данных, которые могут вызывать исключения.
С точки зрения взаимодействия с пользователем диалоговое окно может помочь пользователям, показывая, какие введенные ими данные являются недопустимыми.
С точки зрения производительности проверка данных в многоуровневом приложении может уменьшить количество циклов обработки между уровнями клиента и приложения, особенно в том случае, если в приложение входят веб-службы или серверные базы данных.
Чтобы сопоставить это правило проверки со связанным элементом управления, используется следующая разметка.
После того как правило проверки будет связано, WPF автоматически применит его при входе данных в привязанный элемент управления. Если элемент управления содержит недопустимые данные, WPF отобразит красную рамку вокруг недопустимого элемента управления, как показано на следующем рисунке.
Если диалоговое окно является допустимым, оно может быть безопасно закрыто и выполнен возврат. В рамках процесса возврата необходимо возвращать результат в вызывающую функцию.
Установка результата модального диалогового окна
Диалоговое окно автоматически возвращается, false когда пользователь нажимает кнопку Закрыть в строке заголовка или выбирает пункт меню Закрыть в системном меню.
Обработка данных, возвращаемых из модального диалогового окна
Если параметр DialogResult задается в диалоговом окне, то функция, которая открыла ее, может получить результат диалогового окна, проверив DialogResult свойство при ShowDialog возврате.
После ShowDialog возврата диалоговое окно нельзя открыть повторно. Вместо этого придется создать новый экземпляр.
Создание немодального настраиваемого диалогового окна
Немодальное диалоговое окно, например диалоговое окно поиска, показанное на следующем рисунке, в основном имеет такой же внешний вид, как и модальное диалоговое окно.
Однако поведение несколько отличается, как показано в следующих разделах.
Открытие немодального диалогового окна
Немодальное диалоговое окно открывается путем вызова Show метода.
Обработка данных, возвращенных из немодального диалогового окна
В этом примере объект FindDialogBox может вернуть один или несколько результатов поиска в главное окно в зависимости от искомого текста без какой бы то ни было определенной частоты. Как и в случае с модальным диалоговым окном, немодальное диалоговое окно может возвращать результаты с помощью свойств. Однако окну, которому принадлежит данное диалоговое окно, нужно знать, когда следует проверять эти свойства. Один из способов сделать это — реализовать для диалогового окна событие, которое возникает всякий раз, когда текст найден. FindDialogBox реализует TextFoundEvent для этой цели, для которой сначала требуется делегат.
Следовательно, Find может вызвать событие при обнаружении результата поиска.
Затем окну-владельцу нужно зарегистрировать и обработать это событие.
Закрытие немодального диалогового окна
Поскольку DialogResult не нужно задавать, немодальное диалоговое окно можно закрыть с помощью механизмов, предоставляемых системой, включая следующие:
Нажатие кнопки Закрыть в строке заголовка.
Нажатие клавиш ALT+F4.
Диалоговые элементы управления
Диалоговые элементы управления — это модальные наложения пользовательского интерфейса, которые предоставляют контекстную информацию о приложении. Они блокируют взаимодействие с окном приложения, пока пользователь явно их не закроет. Они часто требуют от пользователя совершения каких-либо действий.
Получение библиотеки пользовательского интерфейса Windows
Библиотека пользовательского интерфейса Windows 2.2 или более поздних версий содержит новый шаблон для этого элемента управления, который использует закругленные углы. Дополнительные сведения см. в разделе о радиусе угла. WinUI — это пакет NuGet, содержащий новые элементы управления и функции пользовательского интерфейса для приложений для Windows. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows.
Выбор правильного элемента управления
Диалоговые окна используются для уведомления пользователей о важной информации или запроса подтверждения либо дополнительных сведений перед совершением действия.
Рекомендации по целесообразности использования диалоговых окон и всплывающих элементов (аналогичных элементов управления) приведены в разделе Диалоговые окна и всплывающие элементы.
Примеры
Если у вас установлено приложение XAML Controls Gallery, щелкните здесь, чтобы открыть его и увидеть ContentDialog или Flyout в действии.
Общие рекомендации
Как создать диалоговое окно
Для создания диалогового окна используется класс ContentDialog. Диалоговое окно можно создать в виде кода или разметки. Хотя обычно проще определять элементы пользовательского интерфейса в XAML, при создании простого диалогового окна удобнее использовать обычный код. В этом примере показано создание диалогового окна для уведомления пользователя об отсутствии подключения к сети WiFi, а для отображения диалогового окна используется метод ShowAsync.
Когда пользователь нажимает кнопку диалогового кона, метод ShowAsync возвращает ContentDialogResult, чтобы сообщить вам, какую кнопку нажал пользователь.
В этом примере в диалоговом окне задается вопрос и используется возвращенный ContentDialogResult, чтобы определить ответ пользователя.
Предоставление безопасного действия
Так как диалоговые окна блокируют взаимодействие с пользователем, а кнопки — это основной механизм, позволяющий пользователям закрыть диалоговое окно, убедитесь, что диалоговое окно содержит по крайней мере одну кнопку безопасного и обратимого действия, например «Закрыть» или «Понятно». Все диалоговые окна должны содержать по крайней мере одну кнопку безопасного действия, позволяющую закрыть диалоговое окно. Это гарантирует, что пользователь сможет спокойно закрыть диалоговое окно без выполнения какого-либо действия.
Когда диалоговые окна используются для отображения блокирующего вопроса, диалоговое окно должно содержать кнопки действий, связанные с этим вопросом. Кнопка «безопасного» и обратимого действия может сопровождаться одной или двумя кнопками действия «выполнить». Предлагая пользователю несколько вариантов на выбор, убедитесь, что кнопки точно соответствуют действиям «выполнить» и безопасным действиям «не выполнять», связанным с предложенным вопросом.
Диалоговые окна с тремя кнопками используются, когда вы предлагаете пользователю два действия «выполнить» и одно действие «не выполнять». Диалоговые окна с тремя кнопками следует использовать не слишком часто. В них должны четко различаться дополнительное действие и безопасное действие (закрытие).
Три кнопки в диалоговом окне
ContentDialog поддерживает три типа кнопки, которые можно использовать для создания диалоговых окон.
Использование встроенных кнопок позволяет их правильно разместить в окне, а также гарантирует, что они будут правильно реагировать на события клавиатуры, что область команд останется видимой, даже когда отображена экранная клавиатура, и что диалоговое окно будет выглядеть согласованно с другими диалоговыми окнами.
CloseButton
Каждое диалоговое окно должно содержать кнопку безопасного и обратимого действия, которая позволяет пользователям спокойно закрыть диалоговое окно.
Используйте API ContentDialog.CloseButton для создания этой кнопки. Это позволит обеспечить правильное взаимодействие с пользователем для всех методов ввода, включая мышь, клавиатуру, сенсорный ввод и игровой контроллер. Это взаимодействие будет происходить в следующих случаях:
Когда пользователь нажимает кнопку диалогового кона, метод ShowAsync возвращает ContentDialogResult, чтобы сообщить вам, какую кнопку нажал пользователь. При нажатии кнопки CloseButton возвращается ContentDialogResult.None.
PrimaryButton и SecondaryButton
Помимо CloseButton, вы можете также предоставить пользователю одну или две кнопки действия, связанные с основной инструкцией. Используйте PrimaryButton для первого действия «выполнить» и SecondaryButton — для второго действия «выполнить». В диалоговых окнах с тремя кнопками PrimaryButton обычно представляет подтверждающее действие «выполнить», а SecondaryButton обычно представляет нейтральное или вспомогательное действие «выполнить». Например, приложение может предложить пользователю подписаться на службу. PrimaryButton в качестве подтверждающего действия «выполнить» будет содержать текст «Подписаться», а SecondaryButton в качестве нейтрального действия «выполнить» будет содержать текст «Попробовать». CloseButton позволит пользователю отменить операцию без выполнения какого-либо действия.
Когда пользователь нажимает кнопку PrimaryButton, метод ShowAsync возвращает ContentDialogResult.Primary. Когда пользователь нажимает кнопку SecondaryButton, метод ShowAsync возвращает ContentDialogResult.Secondary.
DefaultButton
При необходимости можно выделить одну из трех кнопок в качестве кнопки по умолчанию. Если задать кнопку по умолчанию, то происходит следующее.
Используйте свойство ContentDialog.DefaultButton, чтобы указать кнопку по умолчанию. По умолчанию кнопка по умолчанию не задана.
Диалоговые окна подтверждения («ОК» и «Отмена»)
Диалоговое окно подтверждения позволяет пользователям подтвердить действие. Они могут подтвердить выполнение действия или отменить его. Типичное диалоговое окно подтверждения обычно содержит две кнопки: подтверждения («ОК») и отмены.
В целом кнопка подтверждения должна быть слева (основная кнопка), а кнопка отмены (вспомогательная) — справа.
На некоторых платформах кнопка подтверждения размещена справа, а не слева. Так почему рекомендуется поместить ее слева? Если предполагается, что большинство пользователей — правши и держат телефон в правой руке, им будет удобнее нажимать кнопку подтверждения слева, так как более вероятно, что она будет расположена в пределах досягаемости больших пальцев пользователя. Чтобы нажать кнопки в правой части экрана, пользователю необходимо переместить большой палец в менее удобное положение.
ContentDialog в объектах AppWindow или XAML Island
ПРМЕЧАНИЕ. Этот раздел относится только к приложениям, предназначенным для Windows 10 версии 1903 или более поздней версии. Объекты AppWindow и XAML Island недоступны в более ранних версиях. Дополнительные сведения об управлении версиями см. в статье Приложения с адаптивным к версии кодом.
По умолчанию диалоговые окна содержимого модально связаны с корневым объектом ApplicationView. При использовании ContentDialog в объекте AppWindow или XAML Island необходимо вручную задать XamlRoot для диалогового окна, указав корень узла XAML.
Для этого задайте для свойства XamlRoot элемента ContentDialog то же значение XamlRoot, что и у элемента, уже заданного в AppWindow или XAML Island, как показано ниже.
В потоке может существовать только один элемент ContentDialog одновременно. Попытка открыть два элемента ContentDialogs породит исключение, даже если они пытаются открыться в отдельных объектах AppWindow.