Радиус угла

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

Ниже приведены два элемента управления Кнопка: первый без скругленных углов, а второй — со скругленными углами.

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

Важно!

Некоторые элементы управления доступны как на платформе (Windows.UI.Xaml.Controls), так и в WinUI (Microsoft.UI.Xaml.Controls); например TreeView или ColorPicker. При использовании WinUI в приложении следует использовать версию элемента управления WinUI. При использовании с WinUI в версии платформы скругление углов может применяться непоследовательно.

Важные API: Свойство Control.CornerRadius

Макеты элементов управления по умолчанию

Существуют три области элементов управления, в которых используются стили скругленных углов: прямоугольные элементы, всплывающие элементы и элементы панели.

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

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

Элементы управления

• Элемент управления AutoSuggestBox
• Кнопки
  • Кнопки ContentDialog
• CalendarDatePicker
• Флажок
  • Поля treeView, GridView и ListView с множественным выделением проверка
• Палитра
• CommandBar
• ComboBox
• DatePicker
• DropDownButton
• Expander
• FlipView.
• GridView и ListView
  • AutoSuggestBox, ComboBox, DatePicker, MenuBar, NavigationView, TimePicker, TreeView list
• InfoBar
• Элементы управления рукописным вводом
• Воспроизведение мультимедиа
• MenuBar
• NumberBox
• PasswordBox
• Элемент управления RichEditBox
• SplitButton
• TextBox
• TimePicker
• ToggleButton
• ToggleSplitButton

Углы элементов пользовательского интерфейса всплывающего меню и наложения

• Это могут быть элементы пользовательского интерфейса, которые отображаются на экране временно, например MenuFlyout, или элементы, накладываемые на другой элемент пользовательского интерфейса, такие как вкладки TabView.
• Значение радиуса по умолчанию, которое мы используем для этих элементов пользовательского интерфейса, — 8 пикселей.

Элементы управления

• CommandBarFlyout
• ContentDialog
• Всплывающий элемент
• MenuFlyout
• вкладки TabView
• TeachingTip
• Подсказка (использует радиус 4 пикселей из-за небольшого размера)
• Часть всплывающего элемента (при открытии)
  • Элемент управления AutoSuggestBox
  • CalendarDatePicker
  • ComboBox
  • DatePicker
  • DropDownButton
  • Элемент управления рукописным вводом
  • MenuBar
  • NumberBox
  • SplitButton
  • TimePicker
  • ToggleSplitButton

Элементы панели

• Эти элементы пользовательского интерфейса выглядят как строки или линии; например ProgressBar.
• Значения радиуса по умолчанию, которые мы используем здесь, — 4 пикселей.

Элементы управления

• Индикатор выбора NavigationView
• ProgressBar
• ScrollBar
• Ползунок
  • Ползунок цвета ColorPicker
  • Ползунок полосы поиска MediaTransportControls

Параметры настройки

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

Когда не следует закруглять

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

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

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

Изменения CornerRadius на уровне страницы или приложения

Существует 2 ресурса приложения, которые управляют радиусом углов всех элементов управления:

• ControlCornerRadiusЗначение по умолчанию — 4 пкс.
• OverlayCornerRadius — значение по умолчанию — 8 пикселей.

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

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

<Application
    xmlns=”http://schemas.microsoft.com/winfx/2006/xamlpresentation”
    xmlns:x=”http://schemas.micosoft.com/winfx/2006/xaml”
    xmlns:control=”using:Microsoft.UI.Xaml.Controls”>
    <Application.Resources>
      <controls:XamlControlsResources>
        <controls:XamlControlsResources.MergedDictionaries>
          <ResourceDictionary>
            <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
            <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
          </ResourceDictionary>
        </controls:XamlControlsResources.MergedDictionaries>
      </controls:XamlControlsResources>
    </Application.Resources>
</Application>

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

<Grid>
    <Grid.Resources>
        <CornerRadius x:Key="ControlCornerRadius">8</CornerRadius>
    </Grid.Resources>
    <Button Content="Button"/>
</Grid>

Примечание

Чтобы изменения вступили в силу, ресурс OverlayCornerRadius следует определить на уровне приложения.

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

Изменения для каждого элемента управления CornerRadius

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

Значение по умолчанию	Измененное свойство
<CheckBox Content="Checkbox"/>	<CheckBox Content="Checkbox" CornerRadius="5"/>

Не все углы элементов управления будут реагировать на изменение их свойства CornerRadius. Чтобы убедиться, что элемент управления, углы которого вы хотите закруглить, будет отвечать свойству CornerRadius, сначала проверьте, влияют ли на рассматриваемый элемент управления глобальные ресурсы ControlCornerRadius или OverlayCornerRadius. Если нет, убедитесь, что у элемента управления, который вы хотите закруглить, есть углы. Многие элементы управления не отображают фактические края и поэтому не могут правильно использовать свойство CornerRadius.

Создание пользовательских стилей на основе WinUI

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

<Style x:Key="MyCustomButtonStyle" BasedOn="{StaticResource DefaultButtonStyle}">
   ...
</Style>

Как правило, стили элементов управления WinUI следуют согласованному порядку именования: "DefaultXYZStyle", где "XYZ" — это имя элемента управления. Полную справку можно найти в файлах XAML в репозитории WinUI.