圆角半径

项目
06/10/2024

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

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

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

重要

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

重要 API：Control.CornerRadius 属性

默认控件设计

圆角样式用在三个控件区域：矩形元素、弹出项目元素和条形元素。

矩形 UI 元素的角

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

控件

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

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

弹出项目示例

控件

CommandBarFlyout
ContentDialog
弹出项目
MenuFlyout
TabView 选项卡
TeachingTip
ToolTip（由于大小较小，使用 4px 半径）
弹出项目部分（在打开的时候）
- AutoSuggestBox
- CalendarDatePicker
- ComboBox
- DatePicker
- DropDownButton
- 墨迹书写控件
- MenuBar
- NumberBox
- SplitButton
- TimePicker
- ToggleSplitButton

条形元素

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

进度条示例

控件

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

自定义选项

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

何时不使用圆化

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

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

当某个弹出项目 UI 元素连接到某个 UI，而该 UI 在一侧调用该弹出项目时。

AutoSuggest 弹出项目的屏幕截图，其中某些角未圆化。

页面或应用范围的 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 属性。

默认	修改的属性

`<CheckBox Content="Checkbox"/>`	`<CheckBox Content="Checkbox" CornerRadius="5"/>`

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

基于 WinUI 创建自定义样式

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

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

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

通过