共用方式為

圓角半徑

  • 發行項

從 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 清單
  • 資訊列
  • 筆跡控制項
  • 媒體播放
  • MenuBar
  • NumberBox
  • PasswordBox
  • RichEditBox
  • SplitButton
  • TextBox
  • TimePicker
  • ToggleButton
  • ToggleSplitButton

飛出視窗和重疊 UI 元素的邊角

  • 這些可以是暫時出現在畫面上的暫時性 UI 元素 (例如 MenuFlyout)，或是會覆疊其他 UI 的元素 (例如 TabView 索引標籤)。
  • 這些 UI 元素的預設半徑值為 8px。

飛出視窗範例

控制項

  • CommandBarFlyout
  • ContentDialog
  • 飛出視窗
  • MenuFlyout
  • TabView 索引標籤
  • TeachingTip
  • 工具提示 (由於尺寸小而使用 4px 半徑)
  • 飛出視窗部分 (開啟時)
    • AutoSuggestBox
    • CalendarDatePicker
    • ComboBox
    • DatePicker
    • DropDownButton
    • 筆跡控制項
    • MenuBar
    • NumberBox
    • SplitButton
    • TimePicker
    • ToggleSplitButton

條狀元素

  • 這些 UI 元素的形狀類似條狀或線條，例如 ProgressBar。
  • 這裡使用的預設半徑值為 4px。

進度列範例

控制項

  • NavigationView 選取指標
  • ProgressBar
  • ScrollBar
  • 滑桿
    • ColorPicker 色彩滑杆
    • MediaTransportControls 搜尋列滑杆

自訂選項

我們提供的預設圓角半徑值並非一程不變，您有幾種方式可輕鬆地修改邊角的修圓量。 視您想要的自訂細微性層級而定，透過兩個全域資源，或直接在控制項上透過 CornerRadius 屬性即可達成。

何時不要修圓

在某些情況下，不得將控制項的邊角修圓，且預設不會將其修圓。

  • 當容器內的多個 UI 元素彼此接觸時，例如 SplitButton 的兩個部分。 當其碰觸時，應該就沒有任何間隔。

SplitButton

  • 當飛出視窗 UI 元素連結到可在一側叫用飛出視窗的 UI 時。

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

整頁或全應用程式的 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 資源必須在應用程式層級定義，才會生效。

這是因為快顯和飛出視窗不在頁面的視覺化樹狀結構中，它們會新增至「快顯根目錄」。 資源解析系統無法正確周遊「快顯根目錄」視覺化樹狀結構到「頁面」的視覺化樹狀結構。

每個控制項的 CornerRadius 變更

如果您只想變更所選控制項數目的圓度，可以直接在控制項上修改 CornerRadius 屬性。

預設 已修改屬性
DefaultCheckBox CustomCheckBox
<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 檔案。