диалоговое окно для взаимодействия приложения с пользователем
Диалоговые окна и всплывающие элементы
Диалоговые окна и всплывающие элементы используются для временного отображения элементов пользовательского интерфейса, если происходит нечто, требующее уведомления, подтверждения или дополнительных сведений от пользователя.
Диалоги
Диалоговые окна — это модальные наложения пользовательского интерфейса, которые предоставляют контекстную информацию о приложении. Диалоговые окна блокируют взаимодействие с окном приложения, пока пользователь явно не закроет окно. Они часто требуют от пользователя совершения каких-либо действий.
Всплывающие элементы
Всплывающий элемент — это облегченное всплывающее контекстно-зависимое окно, отображающее элемент пользовательского интерфейса в зависимости от действий пользователя. Он включает логику расположения и размеров и может использоваться для отображения дополнительного элемента управления или отображения дополнительных сведений об элементе.
В отличие от диалогового окна, всплывающий элемент можно быстро закрыть нажатием или щелчком за его пределами, нажатием клавиши Escape или кнопки «Назад», изменением размера окна приложения или ориентации устройства.
Выбор правильного элемента управления
Диалоговые окна и всплывающие элементы позволяют пользователям быть в курсе важной информации, но также мешают взаимодействию с пользователем. Так как диалоговые окна модальны (приводят к блокировке), они прерывают работу пользователей и мешают им выполнять дальнейшие действия, пока не произойдет взаимодействие с диалоговым окном. Всплывающие элементы в меньшей степени мешают взаимодействию с пользователем, но отображение слишком большого числа всплывающих элементов может отвлекать.
Определив, собираетесь ли вы использовать диалоговое окно или всплывающий элемент, необходимо выбрать один из этих вариантов.
Учитывая то, что, в отличие от всплывающих элементов, диалоговые окна блокируют взаимодействие, последние следует использовать в тех случаях, когда пользователь должен уделить все внимание определенной информации или ответить на вопрос. С другой стороны, всплывающие элементы можно использовать для привлечения внимания к определенной информации, которую пользователь вполне может проигнорировать.
Как избавиться от ненужных диалоговых окон и всплывающих элементов
Учитывайте важность информации, которую требуется отобразить: важна ли она настолько, чтобы прерывать пользователя? Также учтите частоту отображения информации. Если диалоговое окно или уведомление отображается каждые несколько минут, возможно, следует выделить для этой информации место в основном пользовательском интерфейсе. Возьмем, к примеру, клиент чата. Вместо того чтобы отображать всплывающий элемент каждый раз, когда друг выполняет вход, можно отображать список друзей, находящихся на данный момент в сети, и выделять друзей, выполняющих вход.
Диалоговые окна часто используются для подтверждения действия (например, удаления файла) перед его выполнением. Если ожидается, что пользователь будет часто выполнять определенное действие, вы можете предоставить пользователю возможность отменить ошибочное действие, чем запрашивать его подтверждение каждый раз.
Как создать диалоговое окно
Как создать всплывающий элемент
Примеры
Если у вас установлено приложение XAML Controls Gallery, щелкните здесь, чтобы открыть его и увидеть ContentDialog или Flyout в действии.
СОДЕРЖАНИЕ
Немодальный
Немодальные или немодальные диалоговые окна используются, когда запрошенная информация не важна для продолжения, и поэтому окно можно оставить открытым, пока работа продолжается в другом месте. Типом немодального диалогового окна является панель инструментов, которая либо отделена от основного приложения, либо может быть отделена от основного приложения, а элементы на панели инструментов могут использоваться для выбора определенных функций или функций приложения.
В общем, хороший дизайн программного обеспечения требует, чтобы диалоги были этого типа там, где это возможно, поскольку они не вынуждают пользователя переходить к определенному режиму работы. Примером может служить диалог настроек для текущего документа, например, цвета фона и текста. Пользователь может продолжить добавление текста в главное окно любого цвета, но может изменить его в любое время с помощью диалогового окна. (Это не является примером наилучшего интерфейса для этого; часто те же функции могут быть выполнены с помощью кнопок панели инструментов в главном окне приложения.)
Системный модальный
Системные модальные диалоговые окна предотвращают взаимодействие с любым другим окном на экране и не позволяют пользователям переключаться на другое приложение или выполнять любые другие действия до тех пор, пока проблема, представленная в диалоговом окне, не будет решена. Системные модальные диалоги чаще использовались в прошлом в однозадачных системах, где одновременно могло быть запущено только одно приложение. Одним из текущих примеров является экран выключения текущих версий Windows.
Модальное окно приложения
Модальный документ
В macOS диалоги появляются из слота в их родительском окне и отображаются с усиливающей анимацией. Это помогает пользователю понять, что диалог прикреплен к родительскому окну, а не просто отображается перед ним. Пока отображается диалоговое окно, в самом базовом документе нельзя выполнять никаких действий, но родительское окно все еще можно перемещать, изменять размер и минимизировать, а другие окна можно вывести на передний план, чтобы пользователь мог работать с ними:
Этот же тип диалогового окна можно сравнить со «стандартными» модальными диалоговыми окнами, используемыми в Windows и других операционных системах.
У обоих механизмов есть недостатки:
Использование общих диалоговых окон
В этом разделе рассматриваются задачи, вызывающие общие диалоговые окна:
Выбор цвета
В этом примере используется структура чусеколор для инициализации диалогового окна следующим образом:
Выбор шрифта
Открытие файла
начиная с Windows Vista, общее диалоговое окно файла заменено диалоговым окном общих элементов при использовании для открытия файла. Вместо общепринятого API-интерфейса диалогового окна рекомендуется использовать интерфейс API общего элемента. Дополнительные сведения см. в разделе диалоговое окно общих элементов.
В этом примере элемент лпстрфилтер является указателем на буфер, указывающий два фильтра имен файлов, которые пользователь может выбрать для ограничения отображаемых имен файлов. Буфер содержит массив строк, заканчивающийся двойным нулем, в котором каждая пара строк задает фильтр. Элемент нфилтериндекс указывает, что первый шаблон используется при создании диалогового окна.
В языке программирования C строка, заключенная в кавычки, завершается нулем.
Отображение диалогового окна «Печать»
Использование страницы свойств печати
После завершения операции печати пример кода освобождает буферы DEVMODE, DEVNAMESи принтпажеранже и вызывает функцию делетедк для удаления контекста устройства.
Настройка печатной страницы
В следующем примере также активируется процедура-обработчик пажепаинсук для настройки рисования содержимого образца страницы.
Поиск текста
В этом разделе описывается пример кода, который отображает диалоговое окно поиска и управляет им, чтобы пользователь мог указать параметры операции поиска. Диалоговое окно отправляет сообщения в процедуру окна, чтобы можно было выполнить операцию поиска.
Использование диалоговых окон
Используйте диалоговые окна для вывода сведений и запроса ввода от пользователя. Приложение загружает и Инициализирует диалоговое окно, обрабатывает входные данные пользователя и уничтожает диалоговое окно, когда пользователь завершает задачу. Процесс обработки диалоговых окон зависит от того, является ли диалоговое окно модальным или немодальным. Модальное диалоговое окно требует, чтобы пользователь закрыл диалоговое окно перед активацией другого окна в приложении. Однако пользователь может активировать Windows в разных приложениях. Немодальное диалоговое окно не требует немедленного ответа от пользователя. Он аналогичен главному окну, содержащему элементы управления.
В следующих разделах описывается использование обоих типов диалоговых окон.
Отображение окна сообщения
В следующем примере приложение отображает окно сообщения, предлагающее пользователю ввести действие после возникновения ошибки. В окне сообщения отобразится сообщение с описанием условия ошибки и способами ее устранения. _ Данет в стиле «МБ» направляет MessageBox для предоставления двух кнопок, с помощью которых пользователь может выбрать способ продолжения:
На следующем рисунке показаны выходные данные предыдущего примера кода:
Создание модального диалогового окна
Следующие инструкции создают модальное диалоговое окно. Шаблон диалогового окна — это ресурс в исполняемом файле приложения с идентификатором ресурса DLG _ DELETEITEM.
Создание немодального диалогового окна
В приведенных выше инструкциях креатедиалог вызывается, только если не hwndGoto содержит допустимый обработчик окна. Это гарантирует, что приложение не будет одновременно отображать два диалоговых окна. Для поддержки этого метода процедура диалогового окна должна иметь значение null при уничтожении диалогового окна.
Цикл обработки сообщений для приложения состоит из следующих инструкций.
В следующих инструкциях определяется процедура диалогового окна.
Инициализация диалогового окна
В приведенных выше инструкциях процедура использует функцию getHandler для получения маркера окна-владельца для диалогового окна. Функция возвращает обработчик окна владельца в диалоговые окна, а родительский окно — в дочерние окна. Поскольку приложение может создать диалоговое окно, не имеющее владельца, процедура проверяет возвращенный обработчик и использует функцию жетдесктопвиндов для получения маркера окна рабочего стола при необходимости. После вычисления новой должности процедура использует функцию SetWindowPos для перемещения диалогового окна, указывая _ верхнее значение HWND, чтобы убедиться, что диалоговое окно остается в верхней части окна владельца.
Создание шаблона в памяти
Приложения иногда адаптируют или изменяют содержимое диалоговых окон в зависимости от текущего состояния обрабатываемых данных. В таких случаях нецелесообразно предоставлять все возможные шаблоны диалоговых окон в качестве ресурсов исполняемого файла приложения. Но создание шаблонов в памяти обеспечивает большую гибкость при адаптации к любым обстоятельствам.
В следующем примере приложение создает шаблон в памяти для модального диалогового окна, содержащего сообщение и кнопки « ОК » и « Справка ».
В шаблоне диалогового окна все символьные строки, например диалоговые окна и заголовки кнопок, должны быть строками в Юникоде. В этом примере используется функция MultiByteToWideChar для создания этих строк Юникода.
Диалоговые элементы управления
Диалоговые элементы управления — это модальные наложения пользовательского интерфейса, которые предоставляют контекстную информацию о приложении. Они блокируют взаимодействие с окном приложения, пока пользователь явно их не закроет. Они часто требуют от пользователя совершения каких-либо действий.
Получение библиотеки пользовательского интерфейса 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.