Подсказки

  • Статья

Подсказка — это всплывающее окно, содержащее дополнительные сведения о другом элементе управления или объекте. Подсказки отображаются автоматически, когда пользователь перемещает фокус, нажимает и удерживает или наведите указатель на связанный элемент управления. Всплывающая подсказка исчезает, когда пользователь перемещает фокус с, перестает нажимать или наводит указатель на связанный элемент управления (если указатель не перемещается к подсказке).

Примечание

Начиная с Windows 11 версии 21H2 подсказку также можно закрыть, нажав клавишу CTRL.

Подсказка

Выбор правильного элемента управления

Используйте всплывающую подсказку, чтобы получить дополнительную информацию об элементе управления прежде, чем совершить действие. Подсказки должны использоваться не слишком часто и только тогда, когда они важны для пользователя, пытающегося выполнить определенную задачу. Одно из практических правил: не используйте подсказку, если нужная пользователю информация находится где-то в другом месте того же интерфейса. Эффективная подсказка должна четко разъяснять непонятное действие.

Когда следует использовать всплывающую подсказку? Чтобы определиться, ответьте на вопросы:

  • Должна ли информация становится видимой на основе наведения указателя? Если нет — используйте другой элемент управления. Отображайте подсказки только как результат действия пользователя и не допускайте их самостоятельного отображения.

  • У элемента управления есть текстовая метка? Если нет — используйте всплывающую подсказку, чтобы разместить метку. Хорошим тоном в проектировании взаимодействия с пользователем считается ставить метки для большей части элементов управления внутри приложения. Для таких элементов вам не потребуются всплывающие подсказки. Элементам управления панели инструментов и кнопкам, на которых изображены только значки, потребуются всплывающие подсказки.

  • Выигрывает ли объект от наличия описания или дополнительной информации? Если да — используйте всплывающую подсказку. Но текст должен быть дополнением, а не обязательной частью, необходимой для выполнения базовых задач. Если текст является обязательной частью, разместите его непосредственно в пользовательском интерфейсе, чтобы пользователям не пришлось его искать.

  • Содержит ли дополнительная информация ошибку, предупреждение или статус? Если да — используйте другой элемент интерфейса, например всплывающий элемент.

  • Нужно ли пользователям взаимодействовать с этой подсказкой? Если да — используйте другой элемент управления. Пользователи не могу взаимодействовать с подсказками, поскольку при движении указателя мыши они скрываются.

  • Нужно ли пользователям распечатывать дополнительную информацию? Если да — используйте другой элемент управления.

  • Будут ли подсказки раздражать или отвлекать пользователей? Если да — попытайтесь найти другое решение, которым, в том числе, может быть и отсутствие каких-либо действий. Если вы используете подсказки там, где они могут отвлекать, предоставьте пользователям возможность отключить их.

Рекомендации

  • Используйте подсказки не слишком часто (или не используйте вообще). Подсказки мешают непрерывной работе. Подсказки в виде всплывающих окон отвлекают пользователя, поэтому не используйте их, если в этом нет необходимости.
  • Текст подсказки должен быть кратким. Лучше всего использовать короткие предложения или фрагменты предложений. Большие блоки текста могут быть неудобными, а время отображения подсказки может закончится, прежде чем пользователь закончит чтение.
  • Создавайте полезный дополнительный текст подсказки. Текст подсказки должен быть информативным. Не пишите то, что понятно без объяснений, и не повторяйте то, что уже есть на экране. Поскольку текст подсказки обычно скрыт, он должен состоять из дополнительной информации, без которой пользователь может обойтись. Сообщайте важную информацию с помощью понятных меток элементов управления или встроенного дополнительного текста.
  • Используйте изображения, когда это целесообразно. Иногда в подсказке лучше использовать изображение. Например, когда пользователь наведет указатель мыши на гиперссылку, можно использовать подсказку, чтобы показать страницу, на которую ведет ссылка.
  • По умолчанию ускорители клавиатуры отображаются в подсказках. Если вы добавляете собственную подсказку, убедитесь, что она содержит сведения о доступных ускорителях клавиатуры.
  • Не используйте подсказку для отображения текста, уже имеющегося в пользовательском интерфейсе. Например, не создавайте всплывающую подсказку для кнопки, которая отображает тот же текст, что и на кнопке.
  • Не добавляйте интерактивные элементы управления в подсказку.
  • Не добавляйте в подсказку изображения, которые могут показаться интерактивными.

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые последние стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии включает новый шаблон для этого элемента управления, использующий скругленные углы. Дополнительные сведения см. в разделе о радиусе угла.

Создание подсказки

Откройте приложение коллекции WinUI 3 и просмотрите подсказку в действии.

Приложение "Коллекция WinUI 3" содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или исходный код на сайте GitHub

Подсказку необходимо назначить другому элементу пользовательского интерфейса, являющемуся ее владельцем. Класс ToolTipService предоставляет статические методы для отображения подсказки.

Чтобы присвоить подсказку владельцу, в XAML следует использовать присоединенное свойство ToolTipService.Tooltip.

<Button Content="New" ToolTipService.ToolTip="Create a new document"/>

Чтобы присвоить подсказку владельцу в коде следует использовать метод ToolTipService.SetToolTip.

<Button x:Name="submitButton" Content="New"/>

ToolTip toolTip = new ToolTip();
toolTip.Content = "Create a new document";
ToolTipService.SetToolTip(submitButton, toolTip);

Содержимое

Можно использовать любой объект в качестве Содержимого подсказки. Вот пример использования Изображения в подсказке.

<TextBlock Text="store logo">
    <ToolTipService.ToolTip>
        <Image Source="Assets/StoreLogo.png"/>
    </ToolTipService.ToolTip>
</TextBlock>

Размещение

По умолчанию подсказка отображается по центру над указателем. Размещение не ограничивается окном приложения, поэтому подсказка может отображаться частично или полностью вне границ окна приложения.

Чтобы указать появится ли подсказка выше, ниже, слева или справа от указателя, а также для общей корректировки, следует использовать свойство Placement или присоединенное свойство ToolTipService.Placement. Чтобы изменить расстояние между указателем и подсказкой можно задать свойства VerticalOffset или HorizontalOffset. На конечное расположение влияет только одно из двух значений смещения (VerticalOffset — когда Placement находится сверху или снизу или HorizontalOffset — когда Placement находится слева или справа).

<!-- An Image with an offset ToolTip. -->
<Image Source="Assets/StoreLogo.png">
    <ToolTipService.ToolTip>
        <ToolTip Content="Offset ToolTip."
                 Placement="Right"
                 HorizontalOffset="20"/>
    </ToolTipService.ToolTip>
</Image>

Если подсказка скрывает содержимое, на которое она ссылается, можно точно настроить ее размещение с помощью свойства PlacementRect . PlacementRect закрепляет положения ToolTip, а также является областью, которую всплывающая подсказка не будет закрывать, при условии, когда на экране достаточно места для отображения подсказки за пределами этой области. В качестве владельца подсказки вы можете указать источник прямоугольника, а также его высоту и ширину области исключения. Свойство Размещение используется для определения того, должна ли подсказка появляться вверху, снизу, слева или справа от PlacementRect.

<!-- An Image with a non-occluding ToolTip. -->
<Image Source="Assets/StoreLogo.png" Height="64" Width="96">
    <ToolTipService.ToolTip>
        <ToolTip Content="Non-occluding ToolTip."
                 PlacementRect="0,0,96,64"/>
    </ToolTipService.ToolTip>
</Image>

Получение примера кода