角の半径

  • [アーティクル]

Windows UI ライブラリ (WinUI) のバージョン 2.2 から、多くのコントロールで既定のスタイルが更新され、角の丸めを使用するようになりました。 これらの新しいスタイルの目的は、暖かみと安心感を与え、ユーザーにとって UI を視覚的に扱いやすくすることです。

次に示している 2 つのボタン コントロールでは、1 つ目は角を丸めず、2 つ目は角を丸めたスタイルを使用しています。

Buttons without and with rounded corners

WinUI には、WinUI とプラットフォームの両コントロールの更新されたスタイルがあります。 角の丸めのカスタマイズ方法の詳細については、「カスタマイズ オプション」を参照してください。

重要

TreeView や ColorPicker などの一部のコントロールは、プラットフォーム (Windows.UI.Xaml.Controls) と WinUI (Microsoft.UI.Xaml.Controls) の両方で使用できます。 アプリで WinUI を使用するときは、コントロールの WinUI バージョンを使用することをお勧めします。 WinUI と共に使用すると、プラットフォーム バージョンでは角の丸めが一貫して適用されない場合があります。

重要な API:Control.CornerRadius プロパティ

既定のコントロール デザイン

コントロールで角の丸めスタイルが使用される 3 つの領域は、四角形要素、フライアウト要素、バー要素です。

四角形 UI 要素の角

  • これらの UI 要素には、ユーザーがいつも画面上で目にするボタンなどの基本的なコントロールが含まれます。
  • これらの UI 要素に使用する既定の半径値は 4 px です。

Button with rounded corners highlighted

コントロール

  • AutoSuggestBox
  • ボタン
    • ContentDialog のボタン
  • CalendarDatePicker
  • チェック ボックス
    • TreeView、GridView、および ListView の複数選択チェック ボックス
  • カラー ピッカー
  • CommandBar
  • ComboBox
  • 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 に重なる要素の場合もあります。
  • これらの UI 要素に使用する既定の半径値は 8 px です。

Flyout example

コントロール

  • CommandBarFlyout
  • ContentDialog
  • ポップアップ
  • MenuFlyout
  • TabView のタブ
  • TeachingTip
  • ツールヒント (サイズが小さいため 、4px 半径を使用)
  • フライアウト部品 (開いているとき)
    • AutoSuggestBox
    • CalendarDatePicker
    • ComboBox
    • DatePicker
    • DropDownButton
    • インク コントロール
    • MenuBar
    • NumberBox
    • SplitButton
    • TimePicker
    • ToggleSplitButton

バー要素

  • これらの UI 要素は棒や線のような形をしており、ProgressBar などの例があります。
  • ここで使用する既定の半径値は 4 px です。

Progress bar example

コントロール

  • NavigationView 選択インジケーター
  • ProgressBar
  • ScrollBar
  • スライダー
    • ColorPicker 色スライダー
    • MediaTransportControls シーク バー スライダー

カスタマイズ オプション

ここで説明している既定の角の半径値は固定ではなく、いくつかの方法で角の丸め量を簡単に変更できます。 これは、必要なカスタマイズのきめ細かさに応じて、2 つのグローバル リソースを使用して、または CornerRadius プロパティを使用してコントロールに対して直接、実行できます。

丸めない場合

コントロールの角を丸めることが望ましくない状況があり、そのような状況では、丸めは既定では適用されません。

  • SplitButton の 2 つの部品のように、コンテナーに格納されている複数の UI 要素が互いに接している場合。 接している場合、スペースがありません。

SplitButton

  • フライアウト UI 要素が、1 つの端で、そのフライアウトを呼び出す UI と接している場合。

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

ページまたはアプリ全体での CornerRadius の変更

すべてのコントロールの角の半径を制御する 2 つのアプリ リソースがあります。

  • ControlCornerRadius - 既定値は 4 px です。
  • 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 ファイルを参照できます。