Шаблоны распространенных элементов управления для Visual Studio

Общие элементы управления

Общие элементы управления составляют большинство пользовательского интерфейса в Visual Studio. Наиболее распространенные элементы управления, используемые в интерфейсе Visual Studio, должны соответствовать рекомендациям по взаимодействию с рабочим столом Windows. Этот раздел относится к Visual Studio и охватывает особые ситуации или сведения, которые расширяют эти рекомендации Для Windows.

Общие элементы управления в этом разделе

• Полосы прокрутки

• Поля ввода

• Поля со списком и раскрывающийся список

• Флажки

• Переключатели

• Групповые кадры

• Текстовые элементы управления

• Кнопки и гиперссылки

• Представления дерева

Визуальный стиль

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

• Диалоговые окна "Стандартный" (служебная программа): не тематические. Не шаблоны. Используйте базовый стиль управления по умолчанию.

• Окна инструментов, редакторы документов, поверхности конструктора и тематические диалоги: используйте специализированный тематический внешний вид с помощью цветовой службы.

Полосы прокрутки

Полосы прокрутки должны следовать общим шаблонам взаимодействия для полос прокрутки Windows, если они не дополнены информацией о содержимом, например в редакторе кода.

Поля ввода

Для типичного поведения взаимодействия следуйте рекомендациям по рабочему столу Windows для текстовых полей.

Визуальный стиль

• Поля ввода не должны быть стили в диалоговых окнах служебной программы. Используйте базовый стиль, встроенный в элемент управления.

• Тематические поля ввода должны использоваться только в тематических диалоговых окнах и окнах инструментов.

Специализированные взаимодействия

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

• Обязательные поля должны быть <обязательными> в качестве подложки внутри них. Не следует изменять цвет фона, за исключением редких ситуаций.

• Проверка ошибок: см . уведомления и ход выполнения для Visual Studio

• Поля ввода должны соответствовать содержимому, а не соответствовать ширине окна, в котором они отображаются, или произвольно соответствовать длине длинного поля, например пути. Длина может быть указанием пользователю ограничений на то, сколько символов разрешено в поле.

  
  Неправильная длина поля ввода: маловероятно, что имя будет таким длинным.

  
  Правильная длина поля ввода: поле ввода является разумной шириной для ожидаемого содержимого.

Поля со списком и раскрывающийся список

Для типичного поведения взаимодействия следуйте указаниям по раскрывающимся спискам и полям со списками Windows.

Визуальный стиль

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

• В тематических интерфейсах поля со списком и раскрывающимися списками соответствуют стандартным темам для элементов управления.

Макет

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

Неправильно: ширина раскрывающегося списка слишком длинна для отображаемого содержимого.

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

Флажки

Для типичного поведения взаимодействия следуйте рекомендациям по проверка полям Windows Desktop.

Визуальный стиль

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

• В тематических пользовательском интерфейсе проверка поля соответствуют стандартным темам элементов управления.

Специализированные взаимодействия

• Взаимодействие с полем проверка никогда не должно всплывать в диалоговом окне или переходить в другую область.

• Выровнять проверка поля с базовым показателем первой строки текста.

  
  Неправильно: поле проверка сосредоточено на тексте.

  
  Правильно: поле проверка выравнивается с первой строкой текста.

Переключатели

Для типичного поведения взаимодействия следуйте рекомендациям windows Desktop для переключателей.

Визуальный стиль

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

Специализированные взаимодействия

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

Групповые кадры

Для типичного поведения взаимодействия следуйте рекомендациям windows Desktop для групповых кадров.

Визуальный стиль

В диалоговых окнах служебной программы не имитировать групповые кадры. Используйте базовый стиль, встроенный в элемент управления.

Макет

• Не обязательно использовать групповую рамку для заключения вариантов радио, если вам не нужно поддерживать различие между группами в жестком макете.

• Никогда не используйте кадр группы для одного элемента управления.

• Иногда допустимо использовать горизонтальное правило вместо контейнера группового кадра.

Текстовые элементы управления

Статические текстовые поля

Статическое текстовое поле представляет сведения только для чтения и не может быть выбрано пользователем. Не используйте его для любого текста, который пользователь может скопировать в буфер обмена. Однако статический текст только для чтения может измениться, чтобы отразить изменение состояния. В приведенном ниже примере статический текст "Имя вывода" в группе сведений изменяется, чтобы отразить любые изменения, внесенные в текстовое поле корневого пространства имен над ним.

Существует два способа отображения статических текстовых сведений.

Статический текст может находиться в диалоговом окне без каких-либо элементов, если нет конфликта группировки. Решите, действительно ли необходимы дополнительные линии коробки. Примером является отображение пути к каталогу в разделе, созданном строкой группы, как показано ниже:

Статические текстовые сведения в элементах управления текстом

В диалоговом окне, где существуют другие сгруппированные области и содержащиеся в ней сведения, могут быть скрытыми или отображаемыми разделами (как в области описания окно свойств) или вы хотите быть согласованы с аналогичным пользовательским интерфейсом, поместите статический текст в поле. Это поле группы должно быть одним правилом и цветом с ButtonShadowпомощью :

Статический текст в окно свойств

Текстовое поле только для чтения

Это позволяет пользователю выбирать текст внутри поля, но не изменять его. Эти текстовые поля обрамляются обычным 3-D чиселом с ButtonShadow заливкой.

Текстовое поле может стать активным (редактируемым), когда пользователь изменяет связанный элемент управления, например проверка ing/un проверка ing a проверка поля или выбора или отмены выбора переключателя. Например, на странице "Параметры инструментов>", показанном ниже, текстовое поле домашней страницы становится активным, когда поле "Использовать проверка по умолчанию" не проверка.

Текстовое поле только для чтения, показывающее неактивные и активные состояния

Использование текста в диалоговых окнах

Основные рекомендации по тексту в диалоговых окнах:

• Метки для текстовых полей, списков и кадров в необязаемых диалоговых окнах начинаются с глагола, имеют начальную букву только для первого слова и заканчиваются двоеточием.

  Элементы управления текстом в тематических диалоговых окнах соответствуют рекомендациям по пользовательскому интерфейсу Windows для настольных компьютеров и не препинания, за исключением вопросительных знаков в ссылках справки.

• Метки для полей проверка и кнопки параметров начинаются с глагола, начальной буквы только для первого слова и не имеют конца пунктуации.

• Метки для кнопок, меню, элементов меню и вкладок имеют начальные буквы для каждого слова (регистр заголовка).

• Терминология меток должна быть согласована с аналогичными метками в других диалогах.

• Если это возможно, напишите или утвердите текст, прежде чем он перейдет к разработчику для реализации.

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

Вспомогательный текст

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

Следуйте общим расположениям для вспомогательного текста и будьте выборочными при внедрении новых областей. Распространенные сценарии для вспомогательного текста:

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

• Текст водяного знака в пустых окнах инструментов или диалоговых окнах, чтобы объяснить, почему содержимое не отображается.

• Область описания, как в нижней части окно свойств.

• Текст водяного знака в пустом редакторе, чтобы объяснить, какие действия должен предпринять пользователь для начала работы.

Текст подсказки для диалогового окна

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

Водяные знаки

Диалоговые окна пользуются немного разными рекомендациями по водяному знаку. Так как диалоговое окно может быть занято многими элементами пользовательского интерфейса (метками, текстом подсказки, кнопками и другими элементами управления контейнерами), особенно если они отображаются в черном цвете, подложки выделяются лучше в темно-сером цвете (VSColor: ButtonShadow). Обычно подложка отображается внутри элемента управления, например в поле списка с белым фоном (VSColor: Window).

• Текст отображается в темно-сером цвете (VSColor: ButtonShadow). Однако если подложка отображается на фоне среднего серого или другого цвета (VSColor:ButtonFace) и возникает озабоченность по поводу его удобочитаемости, идти с черным текстом (VSColor: ). WindowText

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

Пример текста водяного знака

Текст, зависящий от контекста (динамический)

Динамический текст можно использовать одним из двух способов в диалоговом окне или в режиме пользовательского интерфейса: как динамическая метка или как динамическое содержимое.

• Динамическая метка: обычное использование динамического текста находится на описательных панелях, которые предлагают дополнительные сведения для выбранного элемента, например в диалоговом окне, в котором содержится список элементов и свойств для этих элементов, отображаемых в сетке справа. Метка сетки свойств может быть динамической, чтобы при выборе элемента слева сетка справа отображала сведения для этого конкретного элемента.

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

Если вы хотите, чтобы пользователи имели возможность копировать информацию, динамический текст должен находиться в текстовом поле только для чтения.

Кнопки и гиперссылки

Кнопки и элементы управления ссылками (гиперссылки) должны соответствовать базовым рекомендациям windows Desktop по гиперссылкам для использования, формулировки, изменения размера и интервалов.

Выбор между кнопками и ссылками

Традиционно кнопки были использованы для действий и гиперссылок, зарезервированы для навигации. Кнопки могут использоваться во всех случаях, но роль ссылок была расширена в Visual Studio, чтобы кнопки и ссылки были более взаимозаменяемыми в некоторых условиях.

Когда следует использовать кнопки команд:

• Основные команды

• Отображение окон, используемых для сбора входных данных или выбора, даже если они являются дополнительными командами

• Разрушительные или необратимые действия

• Кнопки обязательств в мастерах и потоках страниц

Избегайте кнопок команд в окнах инструментов или если для метки требуется более двух слов. Ссылки могут содержать более длинные метки.

Когда следует использовать ссылки:

• Переход к другому окну, документу или веб-странице

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

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

• Отмена подчеркивания дополнительных команд в ситуациях, когда существует много команд

Примеры

Ссылки команд, используемые в InfoBar после сообщения о состоянии

Ссылки, используемые во всплывающем меню CodeLens

Ссылки, используемые для дополнительных команд, где кнопки будут привлекать слишком много внимания

Общие кнопки

Text

Следуйте рекомендациям по написанию текста пользовательского интерфейса и терминологии.

Визуальный стиль

Стандартный (безотказный)

Большинство кнопок в Visual Studio будут отображаться в диалоговых окнах служебной программы и не должны быть стили. Они должны отражать стандартный внешний вид кнопок в соответствии с операционной системой.

Тематические

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

Специальные кнопки

Просмотреть... Кнопки

[Обзор...] кнопки используются в сетках, диалоговых окнах и окнах инструментов и других элементах пользовательского интерфейса без режима. Они отображают средство выбора, которое помогает пользователю заполнять значение в элемент управления. Существует два варианта этой кнопки, длинная и короткая.

Длинная кнопка [Обзор...]

Кнопка только с многоточием [...]

Когда следует использовать короткую кнопку только для многоточия:

• Если в диалоговом окне есть несколько длинных кнопки [Обзор...] , например, если в нескольких полях разрешен просмотр. Используйте короткую кнопку [...] для каждого из них, чтобы избежать запутанных ключей доступа, созданных в этой ситуации (&Обзор и B&rowse в одном диалоговом окне).

• В жестком диалоге или когда нет разумного места, чтобы положить длинную кнопку.

• Если кнопка появится в элементе управления сеткой.

Рекомендации по использованию кнопки:

• Не используйте ключ доступа. Чтобы получить доступ к нему с помощью клавиатуры, пользователь должен перейти на вкладку из соседнего элемента управления. Убедитесь, что порядок вкладок так, чтобы любая кнопка обзора падала сразу после того, как поле будет заполнено. Никогда не используйте подчеркивание ниже первого периода.

• Задайте для свойства "Специальные возможности Майкрософт" (MSAA) "Обзор" (включая многоточие), чтобы средства чтения с экрана читали его как "Обзор" и не "dot-dot-dot-dot" или "period-period-period-period". Для управляемых элементов управления это означает задание свойства AccessibleName.

• Никогда не используйте кнопку с многоточием [...], кроме действия обзора. Например, если вам нужна кнопка [Создать...] , но не хватает места для текста, необходимо изменить диалоговое окно.

Изменение размера и интервалов

Размеры кнопки [Обзор...]

Интервалы между кнопками [Обзор...]

Графические кнопки

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

Примечание.

Пользователи должны перейти на эти кнопки (нет ключей доступа), поэтому поместите их в разумный порядок. name Сопоставьте свойство кнопки с действием, которое оно принимает, чтобы средства чтения с экрана правильно интерпретировали действие кнопки.

Function	Кнопка
Добавить
Удалить
Добавление всех
Удалить все
Переместить вверх
Переместить вниз
DELETE

Изменение размера и интервалов

Размер графических кнопок совпадает с короткой версией кнопки [Обзор...] (26x23 пикселя):

Внешний вид графического изображения на кнопке с прозрачным цветом и без нее

Гиперссылки

Гиперссылки хорошо подходят для действий на основе навигации, таких как открытие раздела справки, модального диалога или мастера. Если гиперссылка используется для команды, она всегда должна отображать видимые и заметные изменения в пользовательском интерфейсе. Как правило, действия, которые фиксируют действие (например, "Сохранить", "Отмена" и "Удалить") лучше взаимодействовать с помощью кнопки.

Создание стиля

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

Визуальный стиль

• Гиперссылки всегда должны использовать службу VSColor. Если гиперссылка не настроена правильно, она мигает красным цветом, когда активен или отображает другой цвет после посещения.

• Не включайте подчеркивания в состояние отдыха элемента управления, если ссылка не является фрагментом предложения в полном предложении, как в подложке.

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

Представления в виде дерева

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

Визуальный стиль представления дерева

Расширители

Элементы управления представлением дерева должны соответствовать дизайну расширителя, используемому Windows и Visual Studio. Каждый узел использует элемент управления расширения для выявления или скрытия базовых элементов. Использование элемента управления расширения обеспечивает согласованность для пользователей, которые могут столкнуться с различными представлениями дерева в Windows и Visual Studio.

Правильно: правильный стиль узла представления дерева с помощью элемента управления расширения

Неправильно: неправильный стиль узла представления дерева

Выбор

При выборе узла в представлении дерева выделение должно быть развернуто до полной ширины элемента управления представлением дерева. Это помогает пользователям четко определить выбранный элемент. Цвета выделения должны отражать текущую тему Visual Studio.

Правильно: выделение выбранного узла соответствует всей ширине элемента управления представлением дерева.

Неправильно: выделение выбранного узла не соответствует всей ширине элемента управления представлением дерева.

Значки

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

Полосы прокрутки

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

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

Взаимодействие с представлением дерева

Контекстные меню

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

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

Клавиатура

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

Элемент управления "Представление дерева"

Элементы управления деревом Visual Studio должны соответствовать обычной навигации по клавиатуре:

• Стрелка вверх: выбор элементов путем перемещения вверх по дереву

• Стрелка вниз: выбор элементов путем перемещения вниз по дереву

• Стрелка вправо: разверните узел в дереве

• Стрелка влево: свернуть узел в дереве

• Ввод ключа: инициирование, загрузка, выполнение выбранного элемента

Trid (представление дерева и представление сетки)

Трид-элемент управления — это сложный элемент управления, содержащий представление дерева в сетке. Расширение, сворачивание и навигация по дереву должны учитывать те же команды клавиатуры, что и представление дерева, со следующими дополнениями:

• Стрелка вправо: разверните узел. После развертывания узла он должен продолжить переход к ближайшему столбцу справа. Навигация должна остановиться в конце строки.

• Вкладка: переходит к ближайшей ячейке справа. В конце строки навигация продолжается до следующей строки.

• SHIFT+TAB: переходит к ближайшей ячейке слева. В начале строки навигация продолжается до самой правой ячейки в предыдущей строке.

Элемент управления trid в Visual Studio