角半径Corner radius

从 2.2 版 Windows UI 库 (WinUI) 开始,许多控件的默认样式已更新为使用圆角。Starting with version 2.2 of the Windows UI Library (WinUI), the default style for many controls has been updated to use rounded corners. 这些新样式旨在激起用户的温暖和信任感觉,使 UI 更易于被用户进行可视化处理。These new styles are intended to evoke warmth and trust, and make the UI easier for users to visually process.

下面是两个按钮控件,第一个没有圆角,第二个使用新的圆角样式。Here are two Button controls, the first without rounded corners and the second using the new rounded corner style.

没有圆角的按钮和有圆角的按钮

安装 WinUI 2.2 或更高版的 NuGet 包时,会为 WinUI 控件和平台控件安装新的默认样式。When you install the NuGet package for WinUI 2.2 or later, new default styles are installed for both WinUI controls and platform controls. 在应用中使用 WinUI 2.2 时,系统会自动使用这些样式;不需执行进一步的操作即可使用新样式。These styles are used automatically when you use WinUI 2.2 in your app; there is no further action you need to take to use the new styles. 不过,我们会在本文的后面部分介绍如何根据需要自定义圆角。However, later in this article we show how to customize the rounded corners if you need to do so.

重要

某些控件既可用于平台 (Windows.UI.Xaml.Controls),也可用于 WinUI (Microsoft.UI.Xaml.Controls),例如 TreeViewColorPickerSome controls are available both in the platform (Windows.UI.Xaml.Controls) and in WinUI (Microsoft.UI.Xaml.Controls); for example, TreeView or ColorPicker. 在应用中使用 WinUI 时,应使用 WinUI 版控件。When you use WinUI in your app, you should use the WinUI version of the control. 角部圆化可能会在平台版中应用得不一致(与 WinUI 配合使用时)。Corner rounding might be applied inconsistently in the platform version when used with WinUI.

重要的 APIControl.CornerRadius 属性Important APIs: Control.CornerRadius property

默认控件设计Default control designs

圆角样式用在三个控件区域:矩形元素、浮出控件元素和条形元素。There are three areas of the controls where the rounded corner styles are used: rectangular elements, flyout elements, and bar elements.

矩形 UI 元素的角Corners of rectangle UI elements

  • 这些 UI 元素包含基本的控件,例如用户在屏幕上随时能够看到的按钮。These UI elements include basic controls like buttons that users see on screen at all times.
  • 我们用于这些 UI 元素的默认半径值为 2pxThe default radius value we use for these UI elements is 2px.

突出显示圆角的按钮

控件Controls

  • AutoSuggestBoxAutoSuggestBox
  • ButtonButton
    • ContentDialog 按钮ContentDialog buttons
  • CalendarDatePickerCalendarDatePicker
  • CheckBoxCheckBox
    • TreeView 多选复选框TreeView multi-select check boxes
  • 组合框ComboBox
  • DatePickerDatePicker
  • DropDownButtonDropDownButton
  • FlipViewFlipView
  • PasswordBoxPasswordBox
  • RichEditBoxRichEditBox
  • SplitButtonSplitButton
  • TextBoxTextBox
  • TimePickerTimePicker
  • ToggleButtonToggleButton
  • ToggleSplitButtonToggleSplitButton

浮出控件和覆盖 UI 元素的角Corners of flyout and overlay UI elements

  • 这些元素可能是临时显示在屏幕上的瞬态 UI 元素(例如 MenuFlyout),也可能是覆盖其他 UI 的元素(例如 TabView 选项卡)。These can be transient UI elements that appear on screen temporarily, like MenuFlyout, or elements that overlay other UI, like TabView tabs.
  • 我们用于这些 UI 元素的默认半径值为 4pxThe default radius value we use for these UI elements is 4px.

浮出控件示例

控件Controls

  • CommandBarFlyoutCommandBarFlyout
  • ContentDialogContentDialog
  • 浮出控件Flyout
  • MenuFlyoutMenuFlyout
  • TabView 选项卡TabView tabs
  • TeachingTipTeachingTip
  • ToolTipToolTip
  • 浮出控件部分(在打开的时候)Flyout part (when open)
    • AutoSuggestBoxAutoSuggestBox
    • CalendarDatePickerCalendarDatePicker
    • 组合框ComboBox
    • DatePickerDatePicker
    • DropDownButtonDropDownButton
    • MenuBarMenuBar
    • SplitButtonSplitButton
    • TimePickerTimePicker
    • ToggleSplitButtonToggleSplitButton

条形元素Bar elements

  • 这些 UI 元素(例如 ProgressBar)为条形或线形。These UI elements are shaped like bars or lines; for example, ProgressBar.
  • 我们在这里使用的默认半径值为 2pxThe default radius values we use here are 2px.

进度条示例

控件Controls

  • NavigationView 选择指示器NavigationView selection indicator
  • 透视选择指示器Pivot selection indicator
  • 进度栏ProgressBar
  • ScrollBar(当 IndicatorMode=TouchIndicator 时)ScrollBar (when IndicatorMode=TouchIndicator)
  • 滑块Slider
    • ColorPicker 颜色滑块ColorPicker color slider
    • MediaTransportControls 拖动条滑块MediaTransportControls seek bar slider

自定义选项Customization options

我们提供的默认角半径值并非一成不变,可以通过几种方式轻松地修改角部的圆化程度。The default corner radii values that we provide are not set in stone and there are a few ways you can easily modify the amount of rounding on the corners. 可以通过两个全局资源来这样做,也可以通过 CornerRadius 属性直接在控件上这样做,具体取决于所需的自定义粒度级别。This can be done through two global resources, or through the CornerRadius property directly on the control, depending on the level of customization granularity you want.

何时不使用圆化When not to round

有时候,控件的角部不应圆化,我们不默认将其圆化。There are instances where the corner of a control should not be rounded, and we don't round these by default.

  • 位于一个容器中的多个 UI 元素互相接触时,例如 SplitButton 的两个部分。When multiple UI elements that are housed inside a container touch each other, such as the two parts of a SplitButton. 当它们接触时,不应留有空间。There should be no space when they contact.

SplitButton

  • 当一个控件位于另一个容器中时,例如 ScrollBar 的条和按钮,它们属于 ScrollBar 容器的一部分,而该容器也是 ScrollViewer 的一部分。When a control is housed inside another container, like a ScrollBar's bar and buttons that are part of the ScrollBar container, which is also part of a ScrollViewer.

不带圆角的垂直滚动条的屏幕截图。

  • 当某个浮出控件 UI 元素连接到某个 UI,而该 UI 在一侧调用该浮出控件时。When a flyout UI element is connected to a UI that invokes the flyout on one side.

AutoSuggest 浮出控件的屏幕截图,其中某些角未圆化。

键盘焦点矩形和阴影Keyboard focus rectangle and shadow

我们的默认设计并不特意圆化键盘焦点矩形或控件阴影的角部。Our default design does not do any special work to round the corners of the keyboard focus rectangle or control shadow. 使用较高的角半径值不会在功能方面造成影响,但仍必须了解这一点,避免因值较大而引入不需要的视觉故障。Using a higher corner radius value will not break them functionally; however, it is good to be aware of this to avoid unwanted visual glitches that could be introduced with a larger value.

下面是一个示例,说明角半径较大可能会导致阴影看起来不舒服:Here is an example of how a larger corner radius can make the shadow look undesirable:

ContentDialogShadow

圆角和性能Rounded corners and performance

渲染圆角自然会比渲染方角消耗更多的绘制力。Rendering rounded corners naturally uses more drawing power than rendering square corners. 选择默认的角半径值时,我们不仅考虑设计原则,而且还需谨慎行事,确保默认控件在应用中使用时性能良好。When selecting the default corner radius values, we not only considered the design principles but we were also careful to ensure our default controls perform well when you use them in your apps.

在这种情况下考虑应用性能时,应主要考虑页面加载时间和应用启动时间。When thinking about app performance in this context, you should primarily consider page load time and app launch time. 要考虑到,圆角在较大的 UI 图面上对性能的影响较大。Consider that rounded corners on a larger UI surface have a greater impact on performance. 避免在全屏应用 UI 上绘制圆角。Avoid drawing rounded corners on a full screen app UI. 如果 UI 显示时间短且是在页面加载后显示的(例如 ContentDialog),则这样做问题不大。This is less of an issue if the UI is displayed briefly and after the page is loaded, like a ContentDialog.

页面或应用范围的 CornerRadius 更改Page or app-wide CornerRadius changes

可以通过 2 项应用资源来控制所有控件的角半径:There are 2 app resources that control the corner radii of all the controls:

  • ControlCornerRadius - 默认值为 2px。ControlCornerRadius - default is 2px.
  • OverlayCornerRadius - 默认值为 4px。OverlayCornerRadius - default is 4px.

如果在任意范围覆盖这些资源的值,则会相应地影响该范围内的所有控件。If you override the value of these resources at any scope, it will affect all controls within that scope accordingly.

这意味着,若要在能够应用圆度的地方更改所有控件的圆度,可以使用新的 CornerRadius 值在应用级别定义这两项资源,如下所示:This means if you want to change the roundness of all controls where roundness could be applied, you can define both resources at the app level with the new CornerRadius values like this:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <ResourceDictionary>
                <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
                <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

或者,若要在特定范围内(例如在页面或容器级别)更改所有控件的圆度,可以遵循相似的模式:Alternatively, if you want to change all controls' roundness within a particular scope, like at a page or container level, you can follow a similar pattern:

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

备注

OverlayCornerRadius 资源必须在应用级别定义才能生效。The OverlayCornerRadius resource must be defined at the app level in order to take effect.

这是因为弹出窗口和浮出控件是动态的,在可视化树中的根元素处创建,因此它们使用的任何资源也必须在该处定义。This is because popups and flyouts are dynamic and created at the root element in the Visual Tree, so any resources that they use must also be defined there. 否则,它们会超出范围。Otherwise, they're out of scope.

按控件进行的 CornerRadius 更改Per-control CornerRadius changes

如果只希望更改选定数量的控件的圆度,则可直接修改控件上的 CornerRadius 属性。You can modify the CornerRadius property on controls directly if you want to change the roundness of only a select number of controls.

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

并非所有控件的角都会响应其被修改的 CornerRadius 属性。Not all controls' corners will respond to their CornerRadius property being modified. 若要确保你要将其角部圆化的控件会真正地按你期望的方式响应其 CornerRadius 属性,请先检查 ControlCornerRadiusOverlayCornerRadius 全局资源是否会影响相关控件。To ensure that the control whose corners you wish to round will indeed respond to their CornerRadius property the way you expect, first check that the ControlCornerRadius or OverlayCornerRadius global resources affect the control in question. 如果它们不影响,请检查要圆化的控件是否有角。If they do not, check that the control you wish to round has corners at all. 我们的许多控件不渲染实际的边缘,因此不能正确使用 CornerRadius 属性。Many of our controls do not render actual edges and therefore cannot make proper use of the CornerRadius property.

基于 WinUI 创建自定义样式Basing custom styles on WinUI

在样式中指定正确的 BasedOn,可以使自定义样式以 WinUI 圆角样式为基础。You can base your custom styles on the WinUI rounded corner styles by specifying the correct BasedOn attribute in your style. 例如,若要创建以 WinUI 按钮样式为基础的自定义按钮样式,请执行以下操作:For example to create a custom button style based on WinUI button style, do the following:

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

通常,WinUI 控件样式遵循一致的命名约定:“DefaultXYZStyle”,其中“XYZ”是控件的名称。In general, WinUI control styles follow a consistent naming convention: "DefaultXYZStyle" where "XYZ" is the name of the control. 如需完整的参考,可以浏览 WinUI 存储库中的 XAML 文件。For full reference, you can browse the XAML files in the WinUI repository.