Элементы управления приложений для Windows Controls for Windows apps

В разработке приложений для Windows элемент управления — это элемент пользовательского интерфейса, отображающий содержимое или обеспечивающий взаимодействие. In Windows app development, a control is a UI element that displays content or enables interaction. Элементы управления — это основа пользовательского интерфейса. Controls are the building blocks of the user interface. Шаблон — это макет для объединения нескольких элементов управления, позволяющий получить что-то новое. A pattern is a recipe for combining several controls to make something new.

Мы предоставляем более 45 элементов управления — от простых кнопок до мощных элементов управления данными, таких как представление сетки. We provide 45+ controls for you to use, ranging from simple buttons to powerful data controls like the grid view. Эти элементы управления являются частью системы Fluent Design и помогают создавать удобный и масштабируемый пользовательский интерфейс, который прекрасно выглядит на всех устройствах и экранах разного размера. These controls are a part of the Fluent Design System and can help you create a bold, scalable UI that looks great on all devices and screen sizes.

В статьях в этом разделе представлены инструкции по проектированию и программированию для добавления элементов управления и шаблонов в приложение для Windows. The articles in this section provide design guidance and coding instructions for adding controls & patterns to your Windows app.

Вступление Intro

Общие инструкции и примеры кода для добавления и настройки стиля элементов управления на языках XAML и C#. General instructions and code examples for adding and styling controls in XAML and C#.

Добавление элементов управления и обработка событий Add controls and handle events
Три основных действия для добавления элементов управления в приложение: добавление элемента управления в пользовательский интерфейс приложения, установка свойств элемента управления и добавление кода в обработчики событий элемента управления, чтобы он начал функционировать. There are 3 key steps to adding controls to your app: Add a control to your app UI, set properties on the control, and add code to the control’s event handlers so that it does something.

Настройка стиля элементов управления Styling controls
Платформа XAML предоставляет множество способов настройки внешнего вида приложений. You can customize the appearance of your apps in many ways by using the XAML framework. С помощью стилей вы можете настраивать свойства элементов управления и многократно использовать эти параметры, чтобы придать единообразный внешний вид нескольким элементам управления. Styles let you set control properties and reuse those settings for a consistent appearance across multiple controls.

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

Некоторые элементы управления доступны только в библиотеке пользовательского интерфейса Windows (WinUI). Это пакет NuGet, который содержит новые элементы управления и компоненты пользовательского интерфейса. Some controls are only available in the Windows UI Library (WinUI), a NuGet package that contains new controls and UI features. Чтобы получить ее, ознакомьтесь с общими сведениями и инструкциями по установке библиотеки пользовательского интерфейса Windows. To get it, see the Windows UI Library overview and installation instructions.
Начиная с версии WinUI 2.2 стиль по умолчанию для многих элементов управления обновлен для использования скругленных углов. Starting with WinUI 2.2, the default style for many controls has been updated to use rounded corners. Дополнительные сведения см. в разделе о радиусе угла. For more info, see Corner radius.

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

Подробные сведения о конкретных элементах управления и шаблонах. Detailed information about specific controls and patterns.

• Анимированный визуальный проигрыватель (см. сведения о Lottie)
• Поле автозаполнения Auto-suggest box
• Кнопка Button
• Выбор даты в календаре Calendar date picker
• Представление календаря Calendar view
• Флажок Checkbox
• Палитра
• Поле со списком Combo box
• Панель команд Command bar
• Всплывающее меню панели команд
• Карточка контакта Contact card
• Диалоговое окно содержимого Content dialog
• Ссылка на содержимое Content link
• Контекстное меню Context menu
• Выбор даты Date picker
• Диалоговые окна и всплывающие элементы Dialogs and flyouts
• Кнопка раскрытия списка
• Представление пролистывания Flip view
• Flyout Flyout
• Формы (шаблон) Forms (pattern)
• Представление в виде сетки Grid view
• Гиперссылка Hyperlink
• Кнопка с гиперссылкой Hyperlink button
• Изображения и кисти изображений Images and image brushes
• Элементы управления рукописным вводом Inking controls
• Список/сведения (шаблон) List/details (pattern)
• Представление списка List view
• Элемент управления картой Map control
• Воспроизведение мультимедиа Media playback
• Строка меню
• Всплывающее меню Menu flyout
• Представление навигации

• Поле ввода номера телефона
• Представление параллакса
• Поле ввода пароля Password box
• Изображение пользователя
• Сведение Pivot
• Индикатор выполнения
• Кольцевой индикатор выполнения
• Переключатель
• Элемент управления «Оценка»
• Кнопка повтора Repeat button
• Поле форматируемого текста Rich edit box
• Блок форматированного текста Rich text block
• Средство прокрутки Scroll viewer
• Поиск (шаблон) Search (pattern)
• Контекстное масштабирование Semantic zoom
• Фигуры Shapes
• Ползунок Slider
• Разворачивающаяся кнопка
• Комбинированный режим Split view
• Элемент управления для прокрутки
• Вкладки
• Совет по обучению
• Блок текста Text block
• Текстовое поле Text box
• Выбор времени Time picker
• Тумблер Toggle switch
• Выключатель Toggle button
• Выключатель с разделением Toggle split button
• Подсказки Tooltips
• Представление в виде дерева
• Представление с двумя панелями
• Представление веб-страницы Web view

XAML Controls Gallery XAML Controls Gallery

Скачайте приложение XAML Controls Gallery с сайта Microsoft Store, чтобы просмотреть эти элементы управления и систему Fluent Design в действии. Get the XAML Controls Gallery app from the Microsoft Store to see these controls and the Fluent Design System in action. Данное приложение является интерактивным помощником для этого веб-сайта. The app is an interactive companion to this website. После его установки вы можете использовать ссылки на отдельные страницы элементов управления для запуска приложения, чтобы увидеть его в действии. When you have it installed, you can use links on individual control pages to launch the app and see the control in action.

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

Дополнительные элементы управления для разработки для Windows предлагают такие компании, как Telerik, SyncFusion, DevExpress, Infragistics, ComponentOne и ActiPro. Additional controls for Windows development are available from companies such as Telerik, SyncFusion, DevExpress, Infragistics, ComponentOne, and ActiPro. Эти элементы управления обеспечивают дополнительную поддержку для предприятий и разработчиков .NET путем дополнения стандартных системных элементов управления пользовательскими элементами управления и службами. These controls provide additional support for enterprise and .NET developers by augmenting the standard system controls with custom controls and services.

Following User Interface Guidelines

This topic defines what user interface guidelines are and describes why following guidelines exclusively might not be the best strategy.

What Are UI Guidelines?

UI guidelines are collections of recommendations that designers and developers follow when creating the user interface for applications. Guidelines can include:

General design principles derived through research.

These principles can include the expression of a fundamental design philosophy, assumptions about human behavior, a design methodology, and concepts embodied in the interface.

Most, if not all, major software platforms have published guidelines for user interface design. One example is the Microsoft Windows User Experience, which is subtitled the Official Guidelines for User Interface Developers and Designers.

Local rules or style guide.

Many individual companies and organizations have their own set of documented UI rules or styles for interface design that developers in that company use. This is common in large companies especially, where a suite of applications is created internally.

Do Not Rely on Guidelines Exclusively

As an application designer, following UI guidelines helps ensure that the product allows users to apply skills they’ve already learned to common tasks and learn new tasks more easily. However, you cannot rely solely on guidelines to ensure the usability of your product. UI guidelines are often too general. Yet it’s that very generality that makes them difficult to apply. When you are trying to make specific decisions within the context of your product, a general set of guidelines might not give you enough information for you to make a decision. An example is when you’re trying to decide between method A and method B of presenting information in a dialog box.

On the other hand, guidelines can be too specific. For example, a guideline might specify having no more than seven items on a menu. However, adding additional menus might be more confusing to users than having more than seven choices on any one menu. Additionally, guidelines may conflict with one another. For example, one guideline might specify having no more than seven items on a menu, and another might specify keeping similar items grouped together on menus. Which guideline takes precedence?

Nevertheless, when designing an application, the visual consistency encouraged by UI guidelines can be helpful. Consider the consistency you find in Microsoft Word and Microsoft Excel. The user interfaces in these software products are very similar in the basic elements such as menus, toolbars, and placement of buttons in dialog boxes (that is, the surface-level interface). In addition, they are consistent in how they handle many common tasks: formatting text, saving files, and so on. Consistency in these and other elements can make it easier for users to transfer skills when learning different applications. Specific UI guidelines can help maintain consistency across different products.

This all boils down to context: A user interface needs to be designed for specific users, goals, and tasks. Guidelines may be a reasonable starting point, but they are only a starting point. The value in UI consistency lies in effective learning, by making it easy to transfer knowledge from another product without interfering with ease of use.

Библиотека пользовательского интерфейса Windows 2.x Windows UI Library 2.x

В библиотеке пользовательского интерфейса Windows предоставляются официальный набор элементов управления пользовательского интерфейса Windows и других элементов пользовательского интерфейса для приложений Windows. The Windows UI Library provides official native Windows UI controls and other user interface elements for Windows apps.

Она поддерживает совместимость низкого уровня с предыдущими версиями Windows 10, поэтому ваше приложение будет работать, даже если пользователи применяют не самую последнюю версию ОС. It maintains down-level compatibility with earlier versions of Windows 10, so your app works even if users don’t have the latest OS.

Ознакомьтесь с предварительной версией 4 библиотеки пользовательского интерфейса Windows 3 (февраль 2021 г.), крупным обновлением, связанным с платформой пользовательского интерфейса Windows 10. Check out the Windows UI Library 3 Preview 4 (February 2021), a major update to the Windows 10 UI platform.

Возможности Features

Новые элементы управления. Библиотека пользовательского интерфейса Windows содержит новые элементы управления, которые не предоставляются на платформе Windows по умолчанию. New controls: The Windows UI Library contains new controls that aren’t shipped as part of the default Windows platform.

Обновленные версии существующих элементов управления. Библиотека также содержит обновленные версии существующих элементов управления платформы Windows, которые можно использовать в более ранних версиях Windows 10. Updated versions of existing controls: The library also contains updated versions of existing Windows platform controls that you can use with earlier versions of Windows 10.

Поддержка более ранних версий Windows 10. API библиотеки пользовательского интерфейса Windows работают в предыдущих версиях Windows 10, поэтому для обеспечения работы пользователей, не использующих последние версии ОС, не нужно добавлять проверки версии или условный код XAML. Support for earlier versions of Windows 10: Windows UI Library APIs work on earlier versions of Windows 10, so you don’t have to include version checks or conditional XAML to support users who might not be running the very latest OS.

Поддержка XamlDirect. Интерфейсы API XAML Direct, предназначенные для разработчиков ПО промежуточного слоя, предоставляют доступ к функциям XAML более низкого уровня, которые обеспечивает более высокую производительность по нагрузке на ЦП и рабочему набору. Support for XamlDirect: The Xaml Direct APIs, designed for middleware developers, gives you access to a lower-level Xaml features which provide better CPU and working set performance. XamlDirect позволяет применять API XamlDirect в более ранних версиях Windows 10, не требуя писать специальный код для работы с несколькими целевыми версиями Windows 10. XamlDirect enables you to use XamlDirect APIs on earlier versions of Windows 10 without needing to write special code to handle multiple target Windows 10 versions.

Примеры Examples

Пример приложения XAML Controls Gallery включает интерактивные демонстрации и примеры кода для работы с элементами управления WinUI. The Xaml Controls Gallery sample app includes interactive demos and sample code for using WinUI controls.

Установите приложение XAML Controls Gallery из Microsoft Store. Install the XAML Controls Gallery app from the Microsoft Store

Также на сайте GitHub доступен открытый код приложения Xaml Controls Gallery. The Xaml Controls Gallery is also open source on GitHub

Документация Documentation

Практические руководства по элементам управления из библиотеки пользовательского интерфейса Windows вы найдете в документации по элементам управления универсальной платформы Windows. How-to articles for Windows UI Library controls are included with the Universal Windows Platform controls documentation.

Справочная документация по API доступна по этой ссылке: API библиотеки пользовательского интерфейса Windows. API reference docs are located here: Windows UI Library APIs.

Установка и использование библиотеки пользовательского интерфейса Windows Install and use the Windows UI Library

План разработки и открытый код Open source and developer roadmap

WinUI — проект с открытым кодом, размещенный на сайте GitHub. WinUI is an open source project hosted on GitHub. Мы рады любым сообщениям об ошибках, запросам на добавление функций и вкладам сообщества в создание кода, вносимым в репозиторий библиотеки пользовательского интерфейса Windows. We welcome bug reports, feature requests and community code contributions in the Windows UI Library repo.

Мы продолжаем разрабатывать и развивать WinUI, чтобы поддерживать новые сценарии разработки. We are continuing to develop and evolve WinUI to support more developer scenarios. Последние сведения о планах по разработке Windows см. в этой статье о стратегии развития, размещенной в репозитории библиотеки пользовательского интерфейса Windows. For the latest details about our plans for WinUI, see our roadmap on the Windows UI Library repo.

Список пакетов NuGet NuGet package list

Библиотека пользовательского интерфейса Windows содержит несколько пакетов NuGet: Список пакетов NuGet для библиотеки пользовательского интерфейса Windows. The Windows UI Library contains multiple NuGet packages: Windows UI Library NuGet package list.