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

Обновлено: 02.07.2024

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

На рис. 1-13 показано разнообразие элементов управления, возможных для оконных приложений.

Рисунок 1-13 Оконные элементы управления

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

Некоторые окна содержат полосы прокрутки, позволяющие прокручивать списки или просматривать предыдущие команды. Текстовый редактор является примером окна с прокруткой. По умолчанию большинство полос прокрутки отображаются с правой стороны прокручиваемых окон, хотя вы можете переместить их на левую сторону. Дополнительную информацию см. в главе 17 «Настройка среды Solaris».

Вы можете постепенно прокручивать вверх, чтобы просмотреть предыдущие команды, поместив указатель на стрелку вверх в подъемнике полосы прокрутки и нажав ВЫБРАТЬ. Вы можете снова прокрутить вниз, поместив указатель на стрелку вниз и нажав ВЫБРАТЬ. Вы также можете нажать SELECT в области перетаскивания и сдвинуть подъемник вверх или вниз. На рис. 1-14 показана полоса прокрутки Command Tool и ее элементы.

Рисунок 1-14 Полоса прокрутки Command Tool

Инструмент "Оболочка", напротив, представляет собой окно без прокрутки. Если вы введете длинную серию командных строк в окне без прокрутки, вы не увидите строки, которые прокручиваются выше верхней части окна.

Меню кнопок

Кнопки меню или окна появляются в областях управления многих приложений. Некоторые кнопки окна предоставляют одну опцию, а другие предоставляют меню выбора. Например, подменю «Правка» в приложении «Текстовый редактор» предоставляет параметры редактирования для вырезания, копирования и вставки текста, а также для повторения или отмены редактирования. Кнопка сокращенного меню текстового редактора в верхнем левом углу отображает параметры, общие для большинства приложений DeskSet, такие как «Открыть/Закрыть» и «Выход». Кнопки меню текстового редактора показаны на рис. 1-15.

Рисунок 1-15. Кнопки меню текстового редактора

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

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

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

Статьи в этом разделе содержат рекомендации по проектированию и инструкции по написанию кода для добавления элементов управления и шаблонов в ваше приложение для Windows.

Введение

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

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

Получить библиотеку пользовательского интерфейса Windows

Некоторые элементы управления доступны только в библиотеке пользовательского интерфейса Windows (WinUI), пакете NuGet, который содержит новые элементы управления и функции пользовательского интерфейса. Чтобы получить его, см. обзор библиотеки пользовательского интерфейса Windows и инструкции по установке.

Алфавитный указатель

Подробная информация о конкретных элементах управления и шаблонах.

Галерея элементов управления XAML

Загрузите приложение Галерея элементов управления XAML из Магазина Microsoft, чтобы увидеть эти элементы управления и Fluent Design System в действии. Приложение является интерактивным дополнением к этому веб-сайту. После его установки вы можете использовать ссылки на отдельных страницах элементов управления, чтобы запустить приложение и увидеть элемент управления в действии.

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

Самая быстрая сетка данных Windows Forms

Наша сетка данных Windows Forms обеспечивает высочайший уровень производительности и универсальности, а также богатый набор функций, подобных Microsoft® Excel®, которые сделают акцент на ваших настольных приложениях, ориентированных на данные. Особенности включают в себя:

Высокоскоростной ввод данных
Пользовательские макеты
Операции Microsoft® Excel
Виртуальные данные
Сенсорный экран
Проводник

Возможность редактирования
Выбор элемента
Визуальное отображение
Бизнес-аналитика
Перетаскивание
Фильтрация и анализ

Детализация
Редактирование и форматирование в Excel
Поддержка диаграмм
Сортировка и фильтрация
Проверка списка
Раскрывающийся список ячеек

Создание таблиц и управление ими
Диалоговое окно «Формат ячеек»
Стиль просмотра
Сетка с несколькими столбцами
Поддержка привязки данных

Истории, которые действительно важны

Более двух миллионов разработчиков используют наборы инструментов Infragistics UX и UI для поддержки и ускорения разработки своих приложений.

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

ABB Индия

Узнайте, почему мировой лидер в области технологий, компания ABB, использует наборы инструментов Ultimate UI для Windows Forms, помогающие обрабатывать данные со скоростью в реальном времени и повышающие гибкость элементов управления диаграммами. Подробнее

Самые быстрые диаграммы Windows Forms

Создавайте многофункциональные диаграммы Windows Forms с меньшим объемом кода. Окончательный пользовательский интерфейс для Windows Forms позволяет отображать более 60 высококачественных диаграмм Windows Forms и использовать сенсорные и анимационные данные с течением времени.

Диаграмма Windows Forms на все случаи жизни

Ваши диаграммы должны быть не только быстрыми; они должны быть всеобъемлющими. С каждым распространенным типом диаграмм категорий — гистограммой, линией, круговой диаграммой, областью и т. д. — вы можете визуализировать свои данные так, как вам удобно.

Простая привязка данных
Умный адаптер данных
Выделение фрагмента

Поддержка легенд
Диаграммы в реальном времени
Финансовые показатели

Линии тренда
Поддержка осей и легенд

Несколько взаимодействий
Полностью настраиваемый

Избранные элементы управления Windows Forms

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

Библиотека Excel Работайте с данными электронных таблиц, используя объекты электронных таблиц Microsoft® Excel®, такие как рабочие листы, ячейки, формулы и т. д. Узнать больше
Scheduling Schedule предоставляет общее решение для планирования для представления и управления периодами времени и связанными действиями. Узнать больше
Меню Воспроизведение внешнего вида, функций и функций приложений Microsoft® Office, включая панель навигации, панели инструментов, меню и представления списков. Узнать больше

Элементы управления пользовательского интерфейса Windows Forms для быстрого старта вашего следующего проекта

Более 60 полнофункциональных, простых в использовании компонентов и элементов управления Windows Forms позволяют создавать привлекательные современные настольные приложения на основе Microsoft Office.

Вдохновение повсюду

Приступайте к работе над своим следующим большим проектом Windows Forms.

Приложение Elemental для розничной торговли

Это приложение для розничной торговли подчеркивает использование элементов управления Carousel, Chart и Pivot Grid для отслеживания продаж отдельных предметов одежды и стилей.

Приложение для управления запасами

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

Приложение "Панель управления денежными потоками"

Приложение Cashflow Dashboard – это интерактивное приложение, демонстрирующее возможности элементов управления Infragistics Grid, Data Chart и Panel, которые упрощают принятие бизнес-решений на основе данных.

Ресурсы

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

Стандартизация набора инструментов пользовательского интерфейса Использование стандартного набора инструментов пользовательского интерфейса может помочь сократить время разработки и тестирования проекта на 33 %. Прочитайте этот технический документ и узнайте, как ваша организация может сократить время выхода на рынок и затраты на разработку. Узнать больше
Автоматизация тестирования для Micro Focus UFT Автоматизируйте тестирование пользовательского интерфейса приложения Windows Forms и обеспечьте полное регрессионное тестирование приложений, разработанных с помощью пользовательского интерфейса Infragistics Ultimate для Windows Forms. Узнать больше

Справка и образцы

Все, что вам нужно для начала работы над вашим следующим проектом Windows Forms!

Выберите план, который подходит именно вам!

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

Многолетняя скидка

Единственный полный набор инструментов UX/UI и решение для создания кода для веб-сайтов, мобильных устройств и настольных компьютеров.

Многолетняя скидка

Обширная библиотека компонентов пользовательского интерфейса для Интернета, мобильных устройств и компьютеров.

Многолетняя скидка

Присоединиться к беседе

Пользовательский интерфейс Ignite для Blazor: что нового в версии 21.2

Извините, но вы должны сказать своим детям, что Санта-Клаус не придет в этом году. Почему ты спрашиваешь? Ну это потому что Санта и все его е.

Примечания к выпуску Infragistics Windows Forms — декабрь 2021 г.: выпуск исправлений 20.2, 21.1

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

Примечания к выпуску Infragistics Windows Forms — сентябрь 2021 г.: выпуск исправлений 20.2, 21.1

Часто задаваемые вопросы

Вопросы и ответы по элементам управления пользовательского интерфейса Windows Forms

Что такое Ultimate UI для Windows Forms?

Ultimate UI для Windows Forms – это полная библиотека элементов управления и компонентов пользовательского интерфейса (UI) для всех аспектов разработки рабочего стола, включая более 100 диаграмм данных, таблиц, элементов управления и компонентов.

Чем Ultimate UI для Windows Forms отличается от других инструментов пользовательского интерфейса для настольных компьютеров?

Ultimate UI для Windows Forms — это самая полная библиотека корпоративных элементов управления и компонентов пользовательского интерфейса для разработки настольных компьютеров. Благодаря более чем 30-летнему лидерству Infragistics в отрасли и отмеченной наградами поддержке в режиме реального времени Ultimate UI для Windows Forms предоставляет вам все необходимое для создания современных настольных приложений.

Как работают цены и лицензирование Ultimate UI для Windows Forms?

Ultimate UI для Windows Forms лицензируется по модели подписки. Стоимость одной лицензии разработчика начинается от 995 долларов США за годовую подписку, включая один год стандартной поддержки и обновлений. Мы также предлагаем скидки на многолетние лицензии. Пожалуйста, обратитесь к нашей странице цен для получения дополнительной информации о ценах.

Как начать работу с Ultimate UI для Windows Forms?

Лучшим местом для начала работы будет наша документация и начальные материалы для каждого из наших наборов инструментов.

Где я могу найти образцы элементов управления и компонентов Windows Forms, а также примеры приложений Windows Forms?

Команда Infragistics поддерживает обширную библиотеку примеров кода Windows Forms, доступ к которым вы можете получить здесь. Мы также поддерживаем библиотеку примеров приложений, которые вы можете найти здесь.

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

Если вы помните мою статью Сделайте ваше PWA более похожим на приложение, вы, возможно, помните, как я упомянул о настройке строки заголовка вашего приложения как о стратегии создания приложения, более похожего на приложение. Вот пример того, как это может выглядеть, показывая приложение macOS Podcasts.

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

Оверлей оконных элементов управления состоит из четырех подфункций:

Значение "window-controls-overlay" для поля "display_override" в манифесте веб-приложения.
Переменные среды CSS titlebar-area-x , titlebar-area-y , titlebar-area-width и titlebar-area-height .
Стандартизация ранее проприетарного свойства CSS -webkit-app-region в качестве свойства app-region для определения перетаскиваемых областей в веб-контенте.
Механизм для запроса и обхода области управления окном через элемент windowControlsOverlay в window.navigator .

Область строки заголовка представляет собой пространство слева или справа от элементов управления окна (то есть кнопок для свертывания, развертывания, закрытия и т. д.) и часто содержит заголовок приложения. Оверлей оконных элементов управления позволяет прогрессивным веб-приложениям (PWA) создавать более похожие на приложения ощущения, заменяя существующую полосу заголовка во всю ширину небольшим оверлеем, содержащим элементы управления окном. Это позволяет разработчикам размещать настраиваемый контент в том месте, которое ранее было областью строки заголовка, контролируемой браузером.

Шаг	Статус
1. Создать объяснитель	Завершить
2. Создать первоначальный проект спецификации	Завершить
3. Соберите отзывы и доработайте дизайн	В процессе
4. Пробная версия Origin	Завершена
5. Запуск	Завершен (в Chromium 99)

Прогрессивное веб-приложение может включить наложение оконных элементов управления, добавив "window-controls-overlay" в качестве основного члена "display_override" в манифесте веб-приложения:

Наложение элементов управления окном будет видно только при выполнении всех следующих условий:

Приложение открывается не в браузере, а в отдельном окне PWA.
Манифест включает "display_override": ["window-controls-overlay"] . (После этого допускаются другие значения.)
PWA работает в настольной операционной системе.
Текущий источник соответствует источнику, для которого было установлено PWA.

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

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

Чтобы переместить этот элемент div вверх в строку заголовка, потребуется немного CSS:

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

Хотя на снимке экрана выше показано, что вы закончили, это еще не все. Окно PWA больше нельзя перетаскивать (за исключением очень небольшой области), поскольку кнопки управления окном не являются областями перетаскивания, а остальная часть строки заголовка состоит из виджета поиска. Это можно исправить, используя свойство CSS app-region со значением drag . В конкретном случае можно сделать перетаскиваемым все, кроме элемента ввода.

На данный момент app-region еще не стандартизирован, поэтому планируется продолжать использовать префикс -webkit-app-region до тех пор, пока app-region не будет стандартизирован. В настоящее время в браузере поддерживается только -webkit-app-region.

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

Поддержку Window Controls Overlay можно обнаружить, проверив наличие windowControlsOverlay :

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

Наложение элементов управления окном не будет отображаться в области строки заголовка при любых обстоятельствах. Хотя его, естественно, не будет в браузерах, которые не поддерживают функцию наложения элементов управления окнами, его также не будет, когда рассматриваемое PWA запускается на вкладке. Чтобы обнаружить эту ситуацию, вы можете запросить свойство visible окнаControlsOverlay :

Видимость наложения оконных элементов управления не следует путать с видимостью в смысле CSS любого содержимого HTML, которое вы размещаете рядом с наложением оконных элементов управления. Даже если вы установите display: none в элементе div, помещенном в наложение оконных элементов управления, свойство visible наложения оконных элементов управления все равно будет сообщать значение true .

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

Вы можете получать уведомления об изменениях геометрии, подписавшись на navigator.windowControlsOverlay.ongeometrychange или настроив прослушиватель событий для события геометрииchange. Это событие срабатывает, только когда наложение элементов управления окном видимо, то есть когда navigator.windowControlsOverlay.visible имеет значение true .

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

Вместо того, чтобы назначать функцию ongeometrychange , вы также можете добавить прослушиватель событий в windowControlsOverlay, как показано ниже. Вы можете прочитать о разнице между ними на MDN.

Есть два возможных случая для рассмотрения:

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

В обоих случаях по умолчанию HTML-код, который разработчик определил для размещения в оверлее элементов управления окном, будет отображаться встроенным, как обычный HTML-контент, а резервные значения переменных env() будут задействованы для позиционирования.В поддерживаемых браузерах вы также можете решить не отображать HTML-код, предназначенный для наложения оконных элементов управления, проверив свойство visible этого наложения и, если оно сообщает false , затем скройте этот HTML-контент.

Напоминаем, что неподдерживающие браузеры либо вообще не будут учитывать свойство манифеста веб-приложения display_override, либо не распознают "window-controls-overlay" и, таким образом, будут использовать следующее возможное значение в соответствии с резервной цепочкой. например, "автономный" .

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

Наличие надлежащего API меню приложения, похожего на меню, доступное для приложений Electron.js, отслеживается как crbug/1295253.

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

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

Функция поиска в оверлее оконных элементов управления полностью функциональна:

Команда Chromium разработала и внедрила API-интерфейс Window Controls Overlay, используя основные принципы, определенные в разделе Управление доступом к мощным функциям веб-платформы, включая управление пользователями, прозрачность и эргономику.

Предоставление сайтам частичного контроля над строкой заголовка дает разработчикам возможность подделывать контент в том регионе, который ранее был доверенным и контролируемым браузером. В настоящее время в браузерах Chromium автономный режим включает строку заголовка, которая при первоначальном запуске отображает заголовок веб-страницы слева и источник страницы справа (за ней следует кнопка «Настройки и другое» и элементы управления окном) . Через несколько секунд исходный текст исчезает. Если браузер настроен на язык с письмом справа налево (RTL), этот макет переворачивается таким образом, что исходный текст находится слева. Это открывает окно управления наложением, чтобы подделать исходную точку, если между исходной точкой и правым краем наложения недостаточно отступов. Например, к источнику «evil.ltd» может быть добавлен надежный сайт «google.com», что заставит пользователей поверить в то, что источник заслуживает доверия. План состоит в том, чтобы сохранить этот исходный текст, чтобы пользователи знали, каково происхождение приложения, и могли убедиться, что оно соответствует их ожиданиям. В браузерах, настроенных с использованием RTL, справа от исходного текста должно быть достаточно отступов, чтобы вредоносный веб-сайт не добавил к небезопасному источнику доверенный источник.

Включение наложения оконных элементов управления и перетаскиваемых областей не создает серьезных проблем с конфиденциальностью, кроме обнаружения функций. Однако из-за разного размера и положения кнопок управления окнами в разных операционных системах API JavaScript для navigator. ОкноКонтрольОверлей. getTitlebarAreaRect() вернет DOMRect, положение и размеры которого покажут информацию об операционной системе, в которой работает браузер. В настоящее время разработчики уже могут обнаружить ОС из строки пользовательского агента, но из-за проблем с отпечатками пальцев обсуждается замораживание строки UA и унификация версий ОС. Сообщество постоянно прилагает усилия, чтобы понять, как часто размер окна влияет на изменения оверлея на разных платформах, поскольку текущее предположение состоит в том, что они довольно стабильны в разных версиях ОС и, следовательно, не будут полезны для наблюдения за младшими версиями ОС.Хотя это потенциальная проблема с отпечатками пальцев, она применима только к установленным PWA, которые используют функцию настраиваемой строки заголовка, и не относится к обычному использованию браузера. Плюс навигатор. API windowControlsOverlay будет недоступен для фреймов, встроенных в PWA.

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

Команда Chromium хочет узнать о вашем опыте работы с Window Controls Overlay API.

Что-то в API работает не так, как вы ожидали? Или отсутствуют методы или свойства, необходимые для реализации вашей идеи? Есть вопрос или комментарий по модели безопасности? Зарегистрируйте проблему со спецификацией в соответствующем репозитории GitHub или добавьте свои мысли к существующей проблеме.

Планируете ли вы использовать API-интерфейс Window Controls Overlay? Ваша общедоступная поддержка помогает команде Chromium расставлять приоритеты в функциях и показывает другим поставщикам браузеров, насколько важна их поддержка.

Наложение оконных элементов управления было реализовано и определено Амандой Бейкер из команды Microsoft Edge. Эту статью рецензировали Джо Медли и Кеннет Роде Кристиансен. Геройское изображение от Зигмунда на Unsplash.

Читайте также: