Подсказки

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

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

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

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

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

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

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

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

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

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

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

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

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

UWP и WinUI 2

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

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

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

Приложение коллекции 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>

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

• Пример коллекции WinUI. Просмотрите все элементы управления XAML в интерактивном формате.

Связанные статьи

• ToolTip Class (Класс ToolTip)