Radio de redondeoCorner radius

A partir de la versión 2.2 de la biblioteca de interfaz de usuario de Windows (WinUI), el estilo predeterminado de muchos controles se actualizó para usar esquinas redondeadas.Starting with version 2.2 of the Windows UI Library (WinUI), the default style for many controls has been updated to use rounded corners. Estos nuevos estilos están diseñados para provocar calidez y confianza, así como facilitar a los usuarios el procesamiento visual de la interfaz de usuario.These new styles are intended to evoke warmth and trust, and make the UI easier for users to visually process.

A continuación se muestran dos controles de botón: el primero, sin esquinas redondeadas; y el segundo, con el nuevo estilo de esquinas redondeadas.Here are two Button controls, the first without rounded corners and the second using the new rounded corner style.

Botones con y sin esquinas redondeadas

Al instalar el paquete NuGet para WinUI 2.2 o una versión posterior, se instalan nuevos estilos predeterminados para los controles WinUI y los controles de plataforma.When you install the NuGet package for WinUI 2.2 or later, new default styles are installed for both WinUI controls and platform controls. Estos estilos se aplican automáticamente cuando se usa WinUI 2.2 en la aplicación; no es necesario realizar ninguna otra acción para usar los nuevos estilos.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. Sin embargo, más adelante en este artículo se muestra cómo personalizar las esquinas redondeadas en caso de que sea necesario hacerlo.However, later in this article we show how to customize the rounded corners if you need to do so.

Importante

Algunos controles están disponibles en la plataforma (Windows.UI.Xaml.Controls) y en WinUI (Microsoft.UI.Xaml.Controls); por ejemplo, TreeView o 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. Al usar WinUI en la aplicación, se debe usar la versión WinUI del control.When you use WinUI in your app, you should use the WinUI version of the control. El redondeo de esquinas podría aplicarse de forma incoherente en la versión de la plataforma cuando se usa con WinUI.Corner rounding might be applied inconsistently in the platform version when used with WinUI.

API importantes: Propiedad Control.CornerRadiusImportant APIs: Control.CornerRadius property

Diseños de controles predeterminadosDefault control designs

Hay tres áreas de los controles en los que se utilizan los estilos de esquinas redondeadas: los elementos rectangulares, los elementos de control flotante y los elementos de barras.There are three areas of the controls where the rounded corner styles are used: rectangular elements, flyout elements, and bar elements.

Esquinas de los elementos rectangulares de la interfaz de usuarioCorners of rectangle UI elements

  • Estos elementos de la interfaz de usuario incluyen controles básicos (como los botones) que los usuarios ven en pantalla en todo momento.These UI elements include basic controls like buttons that users see on screen at all times.
  • El valor de radio predeterminado que se usa para estos elementos de la interfaz de usuario es 2 px.The default radius value we use for these UI elements is 2px.

Botón con las esquinas redondeadas resaltadas

ControlesControls

  • AutoSuggestBoxAutoSuggestBox
  • BotónButton
    • Botones de ContentDialogContentDialog buttons
  • CalendarDatePickerCalendarDatePicker
  • CheckBoxCheckBox
    • Casillas de selección múltiple de TreeViewTreeView multi-select check boxes
  • ComboBoxComboBox
  • DatePickerDatePicker
  • DropDownButtonDropDownButton
  • FlipViewFlipView
  • PasswordBoxPasswordBox
  • RichEditBoxRichEditBox
  • SplitButtonSplitButton
  • TextBoxTextBox
  • TimePickerTimePicker
  • ToggleButtonToggleButton
  • ToggleSplitButtonToggleSplitButton

Esquinas de los elementos de control flotante y superposición de la interfaz de usuarioCorners of flyout and overlay UI elements

  • Pueden ser elementos de interfaz de usuario transitorios que aparecen en la pantalla de forma temporal (como MenuFlyout), o elementos que se superponen a otras interfaces de usuario (como las pestañas TabView).These can be transient UI elements that appear on screen temporarily, like MenuFlyout, or elements that overlay other UI, like TabView tabs.
  • El valor de radio predeterminado que se usa para estos elementos de la interfaz de usuario es 4 px.The default radius value we use for these UI elements is 4px.

Ejemplo de control flotante

ControlesControls

  • CommandBarFlyoutCommandBarFlyout
  • ContentDialogContentDialog
  • Control flotanteFlyout
  • MenuFlyoutMenuFlyout
  • Pestañas de TabViewTabView tabs
  • TeachingTipTeachingTip
  • Información sobre herramientasToolTip
  • Elemento de control flotante (cuando está abierto)Flyout part (when open)
    • AutoSuggestBoxAutoSuggestBox
    • CalendarDatePickerCalendarDatePicker
    • ComboBoxComboBox
    • DatePickerDatePicker
    • DropDownButtonDropDownButton
    • MenuBarMenuBar
    • SplitButtonSplitButton
    • TimePickerTimePicker
    • ToggleSplitButtonToggleSplitButton

Elementos de barrasBar elements

  • Estos elementos de la interfaz de usuario tienen la forma de barras o líneas; por ejemplo, ProgressBar.These UI elements are shaped like bars or lines; for example, ProgressBar.
  • Los valores de radio predeterminados que se usan aquí son de 2 px.The default radius values we use here are 2px.

Ejemplo de barra de progreso

ControlesControls

  • Indicador de selección de NavigationViewNavigationView selection indicator
  • Indicador de selección dinámicaPivot selection indicator
  • ProgressBarProgressBar
  • ScrollBar (cuando IndicatorMode=TouchIndicator)ScrollBar (when IndicatorMode=TouchIndicator)
  • Control deslizanteSlider
    • Control deslizante de color de ColorPickerColorPicker color slider
    • Control deslizante de la barra de búsqueda de MediaTransportControlsMediaTransportControls seek bar slider

Opciones de personalizaciónCustomization options

Los valores de radios de redondeo predeterminados que proporcionamos no son definitivos y hay varias formas de modificar fácilmente la cantidad de redondeo de las esquinas.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. Esto puede hacerse a través de dos recursos globales o a través de la propiedad CornerRadius directamente en el control, en función del nivel de detalle que quieras en la personalización.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.

Cuándo no se debe redondearWhen not to round

Hay situaciones en las que no se debe redondear la esquina de un control y no se redondean de forma predeterminada.There are instances where the corner of a control should not be rounded, and we don't round these by default.

  • Cuando varios elementos de la interfaz de usuario contenidos en un contenedor se tocan entre sí, como las dos partes de un SplitButton.When multiple UI elements that are housed inside a container touch each other, such as the two parts of a SplitButton. No debe haber ningún espacio cuando entran en contacto.There should be no space when they contact.

SplitButton

  • Cuando un control contenido dentro de otro contenedor; por ejemplo, la barra y los botones de una ScrollBar que forman parte del contenedor del control ScrollBar, que a su vez forma parte de 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.

Captura de pantalla de una barra de desplazamiento vertical sin esquinas redondeadas.

  • Cuando un elemento de control flotante de la interfaz de usuario está conectado con una interfaz de usuario que invoca el control flotante en uno de sus lados.When a flyout UI element is connected to a UI that invokes the flyout on one side.

Captura de pantalla de un control flotante AutoSuggest donde algunas esquinas no están redondeadas.

Rectángulo y sombra del foco de tecladoKeyboard focus rectangle and shadow

Nuestro diseño predeterminado no se encarga en particular de redondear las esquinas del rectángulo de foco del teclado ni de la sombra del control.Our default design does not do any special work to round the corners of the keyboard focus rectangle or control shadow. El uso de un valor de radio de redondeo no los averiará en términos de funcionalidad; sin embargo, es conveniente tenerlo en cuenta para evitar los problemas visuales no deseados que podrían surgir con un valor mayor.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.

Este es un ejemplo de cómo un radio de redondeo mayor puede hacer que la sombra no parezca agradable:Here is an example of how a larger corner radius can make the shadow look undesirable:

ContentDialogShadow

Esquinas redondeadas y rendimientoRounded corners and performance

La representación de esquinas redondeadas utiliza de forma natural más potencia que la representación de las esquinas cuadradas.Rendering rounded corners naturally uses more drawing power than rendering square corners. Al seleccionar los valores de radio de redondeo predeterminados, no solo se toman en cuenta los principios de diseño, sino que también se garantiza que los controles predeterminados funcionan bien al usarlos en las aplicaciones.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.

Cuando se medita sobre el rendimiento de la aplicación en este contexto, principalmente se debe tomar en cuenta el tiempo de carga de la página y el tiempo de inicio de la aplicación.When thinking about app performance in this context, you should primarily consider page load time and app launch time. Ten en cuenta que las esquinas redondeadas en una superficie de interfaz de usuario más grande tienen un mayor impacto en el rendimiento.Consider that rounded corners on a larger UI surface have a greater impact on performance. Evita dibujar esquinas redondeadas en una interfaz de usuario de aplicación a pantalla completa.Avoid drawing rounded corners on a full screen app UI. Esto apenas resulta un problema si la interfaz de usuario se muestra brevemente y después de que se carga la página, como un elemento ContentDialog.This is less of an issue if the UI is displayed briefly and after the page is loaded, like a ContentDialog.

Cambios de CornerRadius en la página o aplicaciónPage or app-wide CornerRadius changes

Hay dos recursos de aplicación que controlan los radios de redondeo de todos los controles:There are 2 app resources that control the corner radii of all the controls:

  • ControlCornerRadius: el valor predeterminado es 2 px.ControlCornerRadius - default is 2px.
  • OverlayCornerRadius: el valor predeterminado es 4 px.OverlayCornerRadius - default is 4px.

Si invalidas el valor de estos recursos en cualquier ámbito, todos los controles de ese ámbito se verán afectados en consecuencia.If you override the value of these resources at any scope, it will affect all controls within that scope accordingly.

Esto significa que si quieres cambiar la cantidad redondeo de todos los controles donde se puede aplicar, puedes definir ambos recursos en el nivel de la aplicación con nuevos valores de CornerRadius de la siguiente manera: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>

Si quieres cambiar la cantidad de redondeo de todos los controles dentro de un ámbito determinado (como en el nivel de página o contenedor), también puedes seguir un patrón similar: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>

Nota

El recurso OverlayCornerRadius debe definirse en el nivel de la aplicación para que surta efecto.The OverlayCornerRadius resource must be defined at the app level in order to take effect.

Esto se debe a que los elementos emergentes y los controles flotantes son dinámicos y se crean en el elemento raíz del árbol visual, por lo que todos los recursos que utilizan también se deben definir allí.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. De lo contrario, están fuera del ámbito.Otherwise, they're out of scope.

Cambios de CornerRadius por controlPer-control CornerRadius changes

Puedes modificar la propiedad CornerRadius en los controles directamente si quieres cambiar la cantidad de redondeo de solo un número reducido de controles.You can modify the CornerRadius property on controls directly if you want to change the roundness of only a select number of controls.

Valor predeterminadoDefault Propiedad modificadaProperty modified
DefaultCheckBox CustomCheckBox
<CheckBox Content="Checkbox"/> <CheckBox Content="Checkbox" CornerRadius="5"/>

No todas las esquinas de los controles responderán a la modificación de la propiedad CornerRadius.Not all controls' corners will respond to their CornerRadius property being modified. Para asegurarte de que el control cuyas esquinas quieres redondear responderá realmente a la propiedad CornerRadius de la manera esperada, comprueba primero que los recursos globales ControlCornerRadius o OverlayCornerRadius afecten al control en cuestión.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 no es así, comprueba que el control que quieres redondear tiene esquinas.If they do not, check that the control you wish to round has corners at all. Muchos de nuestros controles no representan visualmente bordes reales y, por lo tanto, no pueden hacer un uso correcto de la propiedad CornerRadius.Many of our controls do not render actual edges and therefore cannot make proper use of the CornerRadius property.

Estilos personalizados basados en WinUIBasing custom styles on WinUI

Puedes basar tus estilos personalizados en los estilos de esquinas redondeadas de WinUI si especificas el atributo BasedOn correcto en el estilo.You can base your custom styles on the WinUI rounded corner styles by specifying the correct BasedOn attribute in your style. Por ejemplo, para crear un estilo de botón personalizado basado en el estilo de botón de WinUI, haz lo siguiente: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 general, los estilos de control de WinUI siguen una convención de nomenclatura coherente: "DefaultXYZStyle" donde "XYZ" es el nombre del control.In general, WinUI control styles follow a consistent naming convention: "DefaultXYZStyle" where "XYZ" is the name of the control. Para obtener una referencia completa, puedes examinar los archivos XAML en el repositorio de WinUI.For full reference, you can browse the XAML files in the WinUI repository.