Compartir vía

Radio de redondeo

  • Artículo

A partir de la versión 2.2 de WinUI, el estilo predeterminado de muchos controles se actualizó para usar esquinas redondeadas. 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.

A continuación se muestran dos controles de botón: el primero, sin esquinas redondeadas, y el segundo, con un estilo de esquinas redondeadas.

Botones con y sin esquinas redondeadas

WinUI proporciona los estilos actualizados para los controles WinUI y de plataforma. Consulte Opciones de personalización para obtener más información sobre cómo personalizar las esquinas redondeadas.

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. Al usar WinUI en la aplicación, se debe usar la versión WinUI del control. El redondeo de esquinas podría aplicarse de forma incoherente en la versión de la plataforma cuando se usa con WinUI.

API importantes: propiedad Control.CornerRadius

Diseños de controles predeterminados

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.

Esquinas de los elementos rectangulares de la interfaz de usuario

  • Estos elementos de la interfaz de usuario incluyen controles básicos (como los botones) que los usuarios ven en pantalla en todo momento.
  • El valor de radio predeterminado que se usa para estos elementos de la interfaz de usuario es 4 px.

Botón con las esquinas redondeadas resaltadas

Controles

  • AutoSuggestBox
  • Botones
    • Botones de ContentDialog
  • CalendarDatePicker
  • Casilla
    • Casillas de selección múltiple TreeView, GridView y ListView
  • Selector de colores
  • CommandBar
  • ComboBox
  • DatePicker
  • DropDownButton
  • Expander
  • FlipView
  • GridView y ListView
    • Lista AutoSuggestBox, ComboBox, DatePicker, MenuBar, NavigationView, TimePicker, TreeView
  • Barra de información
  • Controles de entrada manuscrita
  • Reproducción de contenido multimedia
  • MenuBar
  • NumberBox
  • PasswordBox
  • RichEditBox
  • SplitButton
  • TextBox
  • TimePicker
  • ToggleButton
  • ToggleSplitButton

Esquinas de los elementos de control flotante y superposición de la interfaz de usuario

  • 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).
  • El valor de radio predeterminado que se usa para estos elementos de la interfaz de usuario es 8 píxeles.

Ejemplo de control flotante

Controles

  • CommandBarFlyout
  • ContentDialog
  • control flotante
  • MenuFlyout
  • Pestañas de TabView
  • TeachingTip
  • Información sobre herramientas (use un radio de 4 píxeles debido al tamaño pequeño)
  • Elemento de control flotante (cuando está abierto)
    • AutoSuggestBox
    • CalendarDatePicker
    • ComboBox
    • DatePicker
    • DropDownButton
    • Control de entrada manuscrita
    • MenuBar
    • NumberBox
    • SplitButton
    • TimePicker
    • ToggleSplitButton

Elementos de barras

  • Estos elementos de la interfaz de usuario tienen la forma de barras o líneas; por ejemplo, ProgressBar.
  • Los valores de radio predeterminados que se usan aquí son de 4 píxeles.

Ejemplo de barra de progreso

Controles

  • Indicador de selección de NavigationView
  • ProgressBar
  • ScrollBar
  • Control deslizante
    • Control deslizante de color de ColorPicker
    • Control deslizante de la barra de búsqueda de MediaTransportControls

Opciones de personalización

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. 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.

Cuándo no se debe redondear

Hay situaciones en las que no se debe redondear la esquina de un control y no se redondean de forma predeterminada.

  • Cuando varios elementos de la interfaz de usuario contenidos en un contenedor se tocan entre sí, como las dos partes de un SplitButton. No debe haber ningún espacio cuando entran en contacto.

SplitButton

  • 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.

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

Cambios de CornerRadius en la página o aplicación

Hay dos recursos de aplicación que controlan los radios de redondeo de todos los controles:

  • ControlCornerRadius: el valor predeterminado es 4 px.
  • OverlayCornerRadius: el valor predeterminado es 8 píxeles.

Si invalidas el valor de estos recursos en cualquier ámbito, todos los controles de ese ámbito se verán afectados en consecuencia.

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:

<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>

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:

<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.

Esto se debe a que los controles emergentes y flotantes no están en el árbol visual de la página, se agregan a la raíz emergente. El sistema de resolución de recursos no atraviesa correctamente el árbol visual raíz emergente en el árbol visual de la página.

Cambios de CornerRadius por control

Puedes modificar la propiedad CornerRadius en los controles directamente si quieres cambiar la cantidad de redondeo de solo un número reducido de controles.

Valor predeterminado Propiedad modificada
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. 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. Si no es así, comprueba que el control que quieres redondear tiene esquinas. Muchos de nuestros controles no representan visualmente bordes reales y, por lo tanto, no pueden hacer un uso correcto de la propiedad CornerRadius.

Estilos personalizados basados en WinUI

Puedes basar tus estilos personalizados en los estilos de esquinas redondeadas de WinUI si especificas el atributo BasedOn correcto en el estilo. Por ejemplo, para crear un estilo de botón personalizado basado en el estilo de botón de WinUI, haz lo siguiente:

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

En general, los estilos de control WinUI siguen una convención de nomenclatura coherente: "DefaultXYZStyle" donde "XYZ" es el nombre del control. Para obtener una referencia completa, puedes examinar los archivos XAML en el repositorio de WinUI.