Элементы управления — это элементы пользовательского интерфейса, составляющие приложение Windows— кнопки, текстовые поля, списки, средства выбора и многое другое. Элемент управления отображает содержимое или позволяет пользователям взаимодействовать с приложением.
Шаблон объединяет несколько элементов управления в многократно используемый рецепт для распространенных сценариев, таких как формы или макеты сведений о списках.
Windows предоставляет более 45 готовых элементов управления, созданных на основе Fluent Design System. От простых переключений до расширенных представлений данных, таких как сетка и список, эти элементы управления помогают создавать интерфейсы, которые визуально полируются, доступны и реагируют на разных устройствах.
Ознакомьтесь со статьями в этом разделе по проектированию, примерам кода и рекомендациям по каждому элементу управления и шаблону.
Начало работы
Чтобы узнать, как добавить элементы управления в приложение и связать обработчики событий, см. в разделе Добавление элементов управления и обработка событий. Сведения о настройке внешнего вида элемента управления с помощью повторно используемых стилей XAML см. в разделе "Стилизация элементов управления".
Элементы управления
В следующей таблице перечислены элементы управления приложениями Windows, доступные в WinUI, со ссылками на их документацию.
| Изображение |
Управление |
Описание |
|
Buttons |
Элемент управления, который отвечает на входные данные пользователя и вызывает событие Click. Включает кнопку, раскрывающуюся кнопку, разделенную кнопку, переключатель и многое другое. |
|
флажки |
Элемент управления, который пользователь может выбрать или очистить. |
|
Поля со списком |
Раскрывающийся список элементов, которые пользователь может выбрать. |
|
Hyperlinks |
Кнопка, которая отображается в виде текста гиперссылки и может перейти к URI или обработать событие щелчка. |
|
Радиокнопки |
Элемент управления, позволяющий пользователю выбрать один параметр из группы параметров. |
|
Элемент управления "Оценка" |
Оцените что-нибудь от 1 до 5 звезд. |
|
ползунки управления |
Элемент управления, позволяющий пользователю выбирать из диапазона значений, перемещая ползунок вдоль дорожки. |
|
Переключатели |
Переключатель, который можно переключать между 2 состояниями. |
Коллекции
| Изображение |
Управление |
Описание |
|
Представление элементов |
Элемент управления, отображающий коллекцию элементов с использованием различных макетов. |
|
Представление списка и представление сетки |
Элементы управления, которые представляют коллекцию элементов в вертикальном списке или в строках и столбцах. |
|
Переключение вида |
Представляет коллекцию элементов, которые пользователь может пролистывать, один элемент за раз. |
|
Пейджер Pips |
Элемент управления, который позволяет пользователю перемещаться по коллекции с разбивкой на страницы, когда номера страниц не должны быть визуально известны. |
|
Представление в виде дерева |
Шаблон иерархического списка с расширением и сворачиванием узлов, содержащих вложенные элементы. |
|
Повторитель элементов |
Гибкий примитивный элемент управления для макетов на основе данных. |
|
Свайп |
Жест касания для быстрого доступа к действиям меню элементов. |
|
Обновление путем оттягивания |
Предоставляет возможность извлекать коллекцию элементов в списке или сетке для обновления содержимого коллекции. |
Диалоговые окна и всплывающие элементы
| Изображение |
Управление |
Описание |
|
Диалоги |
Диалоговое окно, которое можно настроить для хранения любого содержимого XAML. |
|
Всплывающие элементы |
Отображает контекстную информацию и позволяет взаимодействовать с пользователем. |
|
Совет по обучению |
Расширенное всплывающее окно для руководства пользователями и создания моментов обучения. |
| Изображение |
Управление |
Описание |
|
Формы |
Шаблон сбора и отправки входных данных пользователей с помощью сочетания входных элементов управления и меток. |
| Изображение |
Управление |
Описание |
|
значки |
Представляет элементы управления значками, использующие различные типы изображений в качестве содержимого. |
|
Анимированные значки |
Элемент, который отображает и управляет значком, который анимирует при взаимодействии пользователя с элементом управления. |
|
Изображения и кисти изображений |
Элемент управления для отображения содержимого изображения. |
|
Чернила |
Элементы управления для цифрового рукописного ввода, включая рукописный холст и панель инструментов рукописного ввода. |
|
воспроизведение мультимедиа |
Элемент управления для отображения содержимого видео и изображения. |
|
Фигуры |
Рисуйте фигуры, такие как эллипсы, прямоугольники и многоугольники. |
| Изображение |
Управление |
Описание |
|
Меню и контекстные меню |
Отображает контекстный список простых команд или параметров. |
|
Панель команд |
Панель инструментов для отображения команд, относящихся к приложению, обрабатывающих макет и изменение размера содержимого. |
|
Всплывающее меню панели команд |
Мини-панель инструментов, отображающая упреждающие команды и необязательное меню команд. |
|
Всплывающее меню и панель меню |
Классическое меню, разрешающее отображение MenuItems, содержащего MenuFlyoutItems. |
Навигация
| Изображение |
Управление |
Описание |
|
Панель навигации |
Показывает путь навигации до текущего местоположения. |
|
Список и подробные сведения |
Шаблон, который отображает список элементов вместе с подробными сведениями о выбранном элементе. |
|
Представление навигации |
Универсальный вертикальный макет для основных областей вашего приложения через свертывающееся меню навигации. |
|
Сводка |
Предоставляет информацию из разных источников во вкладках. |
|
Панель селектора |
Представляет сведения из небольшого набора различных источников. Пользователь может выбрать один из них. |
|
Представление вкладок |
Элемент управления, отображающий коллекцию вкладок, которые можно использовать для отображения нескольких документов. |
Люди
Pickers
| Изображение |
Управление |
Описание |
|
Средство выбора цветов |
Элемент управления, отображающий выделенный цветовой спектр. |
|
Средство выбора дат календаря |
Элемент управления, позволяющий пользователям выбирать значение даты с помощью календаря. |
|
Представление календаря |
Элемент управления, который представляет календарь, чтобы пользователь мог выбрать дату. |
|
Выбор даты |
Элемент управления, позволяющий пользователю выбрать значение даты. |
|
Выбор времени |
Настраиваемый элемент управления, позволяющий пользователю выбрать значение времени. |
| Изображение |
Управление |
Описание |
|
Расширитель |
Контейнер с заголовком, который можно развернуть, чтобы отобразить текст с большим содержимым. |
|
Элементы управления прокруткой и сдвигом |
Элемент управления контейнером, позволяющий пользователю сдвигать содержимое и масштабировать его содержимое. |
|
Аннотированная полоса прокрутки |
Элемент управления, расширяющий функциональность обычной вертикальной полосы прокрутки для простой навигации по большим коллекциям. |
|
Семантический зум |
Позволяет пользователю масштабировать два разных представления коллекции, что упрощает навигацию по большим коллекциям элементов. |
|
Разделенный вид |
Контейнер с 2 областями содержимого с несколькими параметрами отображения области. |
|
Двухпанельный вид |
Элемент управления с двумя областями содержимого, охватывающими доступное пространство, расположенными либо рядом друг с другом, либо сверху-вниз. |
| Изображение |
Управление |
Описание |
|
Progress |
Показывает ход выполнения задачи приложением с помощью индикатора хода выполнения или кругового индикатора. |
|
подсказка |
Отображает сведения об элементе во всплывающем окне. |
|
Панель сведений |
Встроенное сообщение для отображения сведений об изменении состояния на уровне приложения. |
|
Значок сведений |
Неинтрузивный пользовательский интерфейс для отображения уведомлений или привлечения фокуса к области. |
Текст
| Изображение |
Управление |
Описание |
|
Поле автоматического предложения |
Элемент управления для предоставления предложений при вводе текста пользователем. |
|
Текстовый блок |
Упрощенный элемент управления для отображения небольших объемов текста. |
|
Блок расширенного текста |
Элемент управления, отображающий форматированный текст, гиперссылки, встроенные изображения и другое форматируемое содержимое. |
|
Текстовое поле |
Однострочное или многострочное текстовое поле. |
|
Текстовое поле расширенного редактирования |
Элемент управления редактированием форматированного текста, который поддерживает форматированный текст, гиперссылки и другое форматируемое содержимое. |
|
Поле ввода пароля |
Элемент управления для ввода паролей. |
|
Поле "Номер" |
Текстовый элемент управления, используемый для числовых входных и вычислений алгебраических уравнений. |
|
Метки |
Руководство по добавлению доступных меток в элементы управления входными данными. |
Строка заголовка
| Изображение |
Управление |
Описание |
|
Строка заголовка |
Настройте заголовок окна приложения. |
Коллекция WinUI 3
Приложение WinUI 3 Gallery — это лучший способ практического изучения этих элементов управления. Он предоставляет интерактивные демонстрации большинства элементов управления WinUI, функций и шаблонов Fluent Design, что делает его идеальным компаньоном в этой документации. Установите его, чтобы попробовать элементы управления в режиме реального времени и связаться непосредственно с отдельных страниц элементов управления.
Дополнительные элементы управления и ресурсы
Набор средств сообщества Windows Community Toolkit — это набор вспомогательных элементов, расширений и дополнительных элементов управления пользовательского интерфейса, которые дополняют встроенные элементы управления WinUI. Она управляется сообществом и поддерживается корпорацией Майкрософт, охватывая распространенные сценарии, такие как расширенные макеты, преобразователи и анимации.
Чтобы получить ранний доступ к экспериментальным элементам управления и функциям, ознакомьтесь с Windows Community Toolkit Labs, где новые компоненты разрабатываются и тестируются перед выпуском в основной набор средств.