Rayon d’angleCorner radius

À compter de la version 2.2 de la bibliothèque d’interface utilisateur Windows (WinUI), de nombreux contrôles utilisent des angles arrondis comme style par défaut.Starting with version 2.2 of the Windows UI Library (WinUI), the default style for many controls has been updated to use rounded corners. Ces nouveaux styles visent, d’une part, à évoquer la chaleur et la confiance et, d’autre part, à rendre l’interface plus facile à assimiler visuellement pour les utilisateurs.These new styles are intended to evoke warmth and trust, and make the UI easier for users to visually process.

Voici deux contrôles Button, le premier sans angles arrondis et le second utilisant le nouveau style d’angles arrondis.Here are two Button controls, the first without rounded corners and the second using the new rounded corner style.

Boutons sans et avec angles arrondis

Quand vous installez le package NuGet pour WinUI 2.2 ou ultérieur, de nouveaux styles par défaut sont installés pour les contrôles WinUI et les contrôles de plateforme.When you install the NuGet package for WinUI 2.2 or later, new default styles are installed for both WinUI controls and platform controls. Ces nouveaux styles sont appliqués automatiquement quand vous utilisez WinUI 2.2 dans votre application ; aucune autre action n’est nécessaire.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. Toutefois, plus loin dans cet article, nous vous montrerons comment personnaliser les angles arrondis si vous en avez besoin.However, later in this article we show how to customize the rounded corners if you need to do so.

Important

Certains contrôles sont disponibles à la fois dans la plateforme (Windows.UI.Xaml.Controls) et dans WinUI (Microsoft.UI.Xaml.Controls) ; par exemple, TreeView ou ColorPicker.Some controls are available both in the platform (Windows.UI.Xaml.Controls) and in WinUI (Microsoft.UI.Xaml.Controls); for example, TreeView or ColorPicker. Quand vous utilisez WinUI dans votre application, vous devez utiliser la version WinUI du contrôle.When you use WinUI in your app, you should use the WinUI version of the control. L’arrondi des angles peut être appliqué de manière incohérente dans la version plateforme en cas d’utilisation avec WinUI.Corner rounding might be applied inconsistently in the platform version when used with WinUI.

API importantes : Control.CornerRadius, propriétéImportant APIs: Control.CornerRadius property

Conceptions de contrôle par défautDefault control designs

Le style constitué d’angles arrondis est appliqué aux trois endroits suivants d’un contrôle : éléments rectangulaires, éléments d’un menu volant et éléments d’une barre.There are three areas of the controls where the rounded corner styles are used: rectangular elements, flyout elements, and bar elements.

Angles des éléments rectangulaires de l’interface utilisateurCorners of rectangle UI elements

  • Les contrôles de base comme les boutons visibles à l’écran à tout moment font partie de ces éléments de l’interface utilisateur.These UI elements include basic controls like buttons that users see on screen at all times.
  • Pour ceux-ci, nous utilisons un rayon par défaut de 2px.The default radius value we use for these UI elements is 2px.

Bouton avec angles arrondis mis en évidence

ContrôlesControls

  • AutoSuggestBoxAutoSuggestBox
  • BoutonButton
    • ContentDialog, boutonsContentDialog buttons
  • CalendarDatePickerCalendarDatePicker
  • CheckBoxCheckBox
    • TreeView, cases à cocher à sélection multipleTreeView multi-select check boxes
  • ComboBoxComboBox
  • DatePickerDatePicker
  • DropDownButtonDropDownButton
  • FlipViewFlipView
  • PasswordBoxPasswordBox
  • RichEditBoxRichEditBox
  • SplitButtonSplitButton
  • TextBoxTextBox
  • TimePickerTimePicker
  • ToggleButtonToggleButton
  • ToggleSplitButtonToggleSplitButton

Angles des éléments d’interface utilisateur dans les menus volants et les superpositionsCorners of flyout and overlay UI elements

  • Il s’agit notamment d’éléments de l’interface utilisateur qui s’affichent à l’écran temporairement, comme MenuFlyout, ou d’éléments qui chevauchent une autre interface utilisateur, comme les onglets TabView.These can be transient UI elements that appear on screen temporarily, like MenuFlyout, or elements that overlay other UI, like TabView tabs.
  • Pour ceux-ci, nous utilisons un rayon par défaut de 4px.The default radius value we use for these UI elements is 4px.

Exemple de menu volant

ContrôlesControls

  • CommandBarFlyoutCommandBarFlyout
  • ContentDialogContentDialog
  • Menu volantFlyout
  • et MenuFlyoutMenuFlyout
  • TabView, ongletsTabView tabs
  • TeachingTipTeachingTip
  • Info-bulleToolTip
  • Partie de menu volant (à l’ouverture)Flyout part (when open)
    • AutoSuggestBoxAutoSuggestBox
    • CalendarDatePickerCalendarDatePicker
    • ComboBoxComboBox
    • DatePickerDatePicker
    • DropDownButtonDropDownButton
    • MenuBarMenuBar
    • SplitButtonSplitButton
    • TimePickerTimePicker
    • ToggleSplitButtonToggleSplitButton

Éléments de barreBar elements

  • Ces éléments d’interface utilisateur sont en forme de barres ou de lignes ; par exemple, ProgressBar.These UI elements are shaped like bars or lines; for example, ProgressBar.
  • Nous utilisons ici un rayon par défaut de 2px.The default radius values we use here are 2px.

Exemple de barre de progression

ContrôlesControls

  • NavigationView, indicateur de sélectionNavigationView selection indicator
  • Pivot, indicateur de sélectionPivot selection indicator
  • ProgressBarProgressBar
  • ScrollBar (quand IndicatorMode=TouchIndicator)ScrollBar (when IndicatorMode=TouchIndicator)
  • CurseurSlider
    • ColorPicker, curseur de couleurColorPicker color slider
    • MediaTransportControls, curseur de barre de rechercheMediaTransportControls seek bar slider

Options de personnalisationCustomization options

Les valeurs des rayons d’angle par défaut que nous fournissons n’étant pas fixes, vous pouvez facilement modifier la quantité d’arrondi sur les angles de plusieurs manières.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. Vous pouvez par exemple utiliser deux ressources globales ou la propriété CornerRadius directement sur le contrôle en fonction du niveau de précision souhaité.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.

Quand ne pas arrondirWhen not to round

Dans certains cas, les angles d’un contrôle ne doivent pas être arrondis (ils ne le sont pas par défaut).There are instances where the corner of a control should not be rounded, and we don't round these by default.

  • Quand plusieurs éléments d’interface utilisateur hébergés à l’intérieur d’un conteneur se touchent l’un l’autre, comme les deux parties d’un SplitButton.When multiple UI elements that are housed inside a container touch each other, such as the two parts of a SplitButton. Il ne doit pas y avoir d’espace entre les deux.There should be no space when they contact.

SplitButton

  • Quand un contrôle est hébergé dans un autre conteneur, comme la barre d’un ScrollBar et les boutons qui font partie du conteneur ScrollBar (qui fait également partie d’un 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.

Capture d’écran d’une barre de défilement verticale sans angles arrondis.

  • Quand un élément d’interface utilisateur de menu volant est connecté à une interface utilisateur qui appelle le menu volant d’un côté.When a flyout UI element is connected to a UI that invokes the flyout on one side.

Capture d’écran d’un menu volant de suggestion automatique où certains angles ne sont pas arrondis.

Rectangle et ombre du focus clavierKeyboard focus rectangle and shadow

Notre conception par défaut n’effectue aucune tâche spéciale pour arrondir les angles du rectangle de focus clavier ou de l’ombre du contrôle.Our default design does not do any special work to round the corners of the keyboard focus rectangle or control shadow. L’utilisation d’une valeur de rayon d’angle plus élevée n’entraîne aucune rupture fonctionnelle. Sachez toutefois qu’une valeur plus élevée peut entraîner des anomalies visuelles.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.

Voici un exemple qui montre comment un rayon d’angle plus important peut rendre une ombre indésirable :Here is an example of how a larger corner radius can make the shadow look undesirable:

ContentDialogShadow

Angles arrondis et performancesRounded corners and performance

Le rendu d’angles arrondis demande naturellement plus de puissance que le rendu d’angles carrés.Rendering rounded corners naturally uses more drawing power than rendering square corners. Au moment de sélectionner les valeurs de rayon d’angle par défaut, nous avons pris en compte les principes de conception, mais nous avons également veillé à ce que les contrôles par défaut fonctionnent bien quand vous les utilisez dans vos applications.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.

Quand vous songez aux performances d’une application dans ce contexte, vous devez principalement tenir compte du temps de chargement des pages et du temps de lancement de l’application.When thinking about app performance in this context, you should primarily consider page load time and app launch time. Sachez que les coins arrondis sur une grande surface d’interface utilisateur ont un impact plus important sur les performances.Consider that rounded corners on a larger UI surface have a greater impact on performance. Évitez de dessiner des angles arrondis dans l’interface utilisateur d’une application en plein écran.Avoid drawing rounded corners on a full screen app UI. Ce problème se pose moins si l’interface utilisateur est affichée brièvement après le chargement d’une page, comme avec un ContentDialog.This is less of an issue if the UI is displayed briefly and after the page is loaded, like a ContentDialog.

Modifications de CornerRadius à l’échelle de la page ou de l’applicationPage or app-wide CornerRadius changes

Deux ressources d’application contrôlent les rayons d’angle de tous les contrôles :There are 2 app resources that control the corner radii of all the controls:

  • ControlCornerRadius : la valeur par défaut est 2px.ControlCornerRadius - default is 2px.
  • OverlayCornerRadius : la valeur par défaut est 4px.OverlayCornerRadius - default is 4px.

Si vous remplacez la valeur de ces ressources dans une étendue quelconque, tous les contrôles de cette étendue seront affectés.If you override the value of these resources at any scope, it will affect all controls within that scope accordingly.

Cela signifie que si vous souhaitez modifier l’arrondi de tous les contrôles auxquels l’arrondi peut être appliqué, vous pouvez définir les deux ressources au niveau de l’application avec les nouvelles valeurs CornerRadius comme ceci :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>

Sinon, si vous souhaitez modifier l’arrondi de tous les contrôles dans une étendue particulière, comme au niveau d’une page ou d’un conteneur, vous pouvez suivre une approche similaire :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>

Notes

La ressource OverlayCornerRadius doit être définie au niveau de l’application pour prendre effet.The OverlayCornerRadius resource must be defined at the app level in order to take effect.

En effet, les fenêtres contextuelles et les menus volants sont dynamiques et créés au niveau de l’élément racine de l’arborescence visuelle. Toutes les ressources utilisées doivent donc également y être définies.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. Dans le cas contraire, elles sont hors de l’étendue.Otherwise, they're out of scope.

Modifications de CornerRadius par contrôlePer-control CornerRadius changes

Vous pouvez modifier la propriété CornerRadius directement sur les contrôles si vous souhaitez changer l’arrondi d’un nombre spécifique de contrôles.You can modify the CornerRadius property on controls directly if you want to change the roundness of only a select number of controls.

Par défautDefault Propriété modifiéeProperty modified
DefaultCheckBox CustomCheckBox
<CheckBox Content="Checkbox"/> <CheckBox Content="Checkbox" CornerRadius="5"/>

Tous les angles des contrôles ne répondent pas à la modification de leur propriété CornerRadius.Not all controls' corners will respond to their CornerRadius property being modified. Pour faire en sorte que le contrôle dont vous souhaitez arrondir les angles répond comme prévu à la propriété CornerRadius, commencez par vérifier que les ressources globales ControlCornerRadius ou OverlayCornerRadius affectent le contrôle en question.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. Si ce n’est pas le cas, vérifiez que le contrôle que vous souhaitez arrondir a bien des angles.If they do not, check that the control you wish to round has corners at all. La plupart de nos contrôles n’affichent pas les bords réels et ne peuvent donc pas utiliser correctement la propriété CornerRadius.Many of our controls do not render actual edges and therefore cannot make proper use of the CornerRadius property.

Baser des styles personnalisés sur WinUIBasing custom styles on WinUI

Vous pouvez baser vos styles personnalisés sur les styles d’angles arrondis de WinUI en spécifiant l’attribut BasedOn approprié dans votre style.You can base your custom styles on the WinUI rounded corner styles by specifying the correct BasedOn attribute in your style. Par exemple, pour créer un style de bouton personnalisé basé sur le style de bouton WinUI, procédez comme suit :For example to create a custom button style based on WinUI button style, do the following:

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

En général, les styles de contrôle WinUI suivent une convention d’affectation de noms cohérente : « DefaultXYZStyle », où « XYZ » est le nom du contrôle.In general, WinUI control styles follow a consistent naming convention: "DefaultXYZStyle" where "XYZ" is the name of the control. Pour une référence complète, vous pouvez parcourir les fichiers XAML dans le référentiel WinUI.For full reference, you can browse the XAML files in the WinUI repository.