圓角半徑Corner radius

Windows UI 程式庫 (WinUI) 2.2 版開始,許多控制項的預設樣式已更新為使用圓角。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
  • 按鈕Button
    • ContentDialog 按鈕ContentDialog buttons
  • CalendarDatePickerCalendarDatePicker
  • CheckBoxCheckBox
    • TreeView 多選核取方塊TreeView multi-select check boxes
  • ComboBoxComboBox
  • 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
    • ComboBoxComboBox
    • 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
  • ProgressBarProgressBar
  • 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 時。When a flyout UI element is connected to a UI that invokes the flyout on one side.

自動建議飛出視窗的螢幕擷取畫面,其中有些角落不是圓角。

鍵盤焦點矩形和陰影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.

DefaultDefault 已修改屬性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.