Радиус угла

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

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

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.
• Значение радиуса по умолчанию, используемое для этих элементов пользовательского интерфейса, равно 8px.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это означает, что если вы хотите изменить округлость всех элементов управления, к которым ее можно применить, вы можете определить оба ресурса на уровне приложений с помощью таких новых значений 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.