角半径

从 2.2 版 Windows UI 库 (WinUI) 开始,许多控件的默认样式已更新为使用圆角。 这些新样式旨在激起用户的温暖和信任感觉,使 UI 更易于被用户进行可视化处理。

下面是两个按钮控件,第一个没有圆角,第二个使用圆角样式。

Buttons without and with rounded corners

WinUI 为你提供 WinUI 和平台控件的更新样式。 有关如何自定义圆角的详细信息,请参阅自定义选项

重要

某些控件既可用于平台 (Windows.UI.Xaml.Controls),也可用于 WinUI (Microsoft.UI.Xaml.Controls),例如 TreeViewColorPicker。 在应用中使用 WinUI 时,应使用 WinUI 版控件。 角部圆化可能会在平台版中应用得不一致(与 WinUI 配合使用时)。

重要的 APIControl.CornerRadius 属性

默认控件设计

圆角样式用在三个控件区域:矩形元素、浮出控件元素和条形元素。

矩形 UI 元素的角

  • 这些 UI 元素包含基本的控件,例如用户在屏幕上随时能够看到的按钮。
  • 我们用于这些 UI 元素的默认半径值为 4px

Button with rounded corners highlighted

控件

  • AutoSuggestBox
  • 按钮
    • ContentDialog 按钮
  • CalendarDatePicker
  • CheckBox
    • TreeView、GridView 和 ListView 多选复选框
  • 颜色选取器
  • CommandBar
  • 组合框
  • DatePicker
  • DropDownButton
  • Expander
  • FlipView
  • GridView 和 ListView
    • AutoSuggestBox、ComboBox、DatePicker、MenuBar、NavigationView、TimePicker、TreeView 列表
  • InfoBar
  • 墨迹书写控件
  • 媒体播放
  • MenuBar
  • NumberBox
  • PasswordBox
  • RichEditBox
  • SplitButton
  • TextBox
  • TimePicker
  • ToggleButton
  • ToggleSplitButton

浮出控件和覆盖 UI 元素的角

  • 这些元素可能是临时显示在屏幕上的瞬态 UI 元素(例如 MenuFlyout),也可能是覆盖其他 UI 的元素(例如 TabView 选项卡)。
  • 我们用于这些 UI 元素的默认半径值为 8px。

Flyout example

控件

  • CommandBarFlyout
  • ContentDialog
  • 浮出控件
  • MenuFlyout
  • TabView 选项卡
  • TeachingTip
  • 工具提示 (由于大小较小而使用 4px 半径)
  • 浮出控件部分(在打开的时候)
    • AutoSuggestBox
    • CalendarDatePicker
    • 组合框
    • DatePicker
    • DropDownButton
    • 墨迹书写控件
    • MenuBar
    • NumberBox
    • SplitButton
    • TimePicker
    • ToggleSplitButton

条形元素

  • 这些 UI 元素(例如 ProgressBar)为条形或线形。
  • 我们在这里使用的默认半径值为 4px。

Progress bar example

控件

  • NavigationView 选择指示器
  • ProgressBar
  • ScrollBar
  • 滑块
    • ColorPicker 颜色滑块
    • MediaTransportControls 拖动条滑块

自定义选项

我们提供的默认角半径值并非一成不变,可以通过几种方式轻松地修改角部的圆化程度。 可以通过两个全局资源来这样做,也可以通过 CornerRadius 属性直接在控件上这样做,具体取决于所需的自定义粒度级别。

何时不使用圆化

有时候,控件的角部不应圆化,我们不默认将其圆化。

  • 位于一个容器中的多个 UI 元素互相接触时,例如 SplitButton 的两个部分。 当它们接触时,不应留有空间。

SplitButton

  • 当某个浮出控件 UI 元素连接到某个 UI,而该 UI 在一侧调用该浮出控件时。

Screenshot of an AutoSuggest flyout where some corners aren't rounded.

页面或应用范围的 CornerRadius 更改

可以通过 2 项应用资源来控制所有控件的角半径:

  • ControlCornerRadius - 默认值为 4px。
  • 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 资源必须在应用级别定义才能生效。

这是因为弹出项和浮出控件不在页面的可视化树中,而是添加到 Popup Root 中。 资源解析系统没有正确地将 Popup Root 可视化树遍历到 Page 的可视化树中。

按控件进行的 CornerRadius 更改

如果只希望更改选定数量的控件的圆度,则可直接修改控件上的 CornerRadius 属性。

默认值 修改的属性
DefaultCheckBox CustomCheckBox
<CheckBox Content="Checkbox"/> <CheckBox Content="Checkbox" CornerRadius="5"/>

并非所有控件的角都会响应其被修改的 CornerRadius 属性。 若要确保你要将其角部圆化的控件会真正地按你期望的方式响应其 CornerRadius 属性,请先检查 ControlCornerRadiusOverlayCornerRadius 全局资源是否会影响相关控件。 如果它们不影响,请检查要圆化的控件是否有角。 我们的许多控件不渲染实际的边缘,因此不能正确使用 CornerRadius 属性。

基于 WinUI 创建自定义样式

在样式中指定正确的 BasedOn,可以使自定义样式以 WinUI 圆角样式为基础。 例如,若要创建以 WinUI 按钮样式为基础的自定义按钮样式,请执行以下操作:

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

通常,WinUI 控件样式遵循一致的命名约定:“DefaultXYZStyle”,其中“XYZ”是控件的名称。 如需完整的参考,可以浏览 WinUI 存储库中的 XAML 文件。