Compartir a través de


RadialGradientBrush Clase

Definición

RadialGradientBrush pinta un área con un degradado radial. Un punto central define el origen del degradado y una elipse define los límites externos del degradado.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

/// [Microsoft.UI.Xaml.CustomAttributes.MUXContractProperty(version=0)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.Foundation.Metadata.Version(1)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="GradientStops")]
class RadialGradientBrush : XamlCompositionBrushBase
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="GradientStops")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.XamlContract, 65536)]
class RadialGradientBrush : XamlCompositionBrushBase
[Microsoft.UI.Xaml.CustomAttributes.MUXContractProperty(version=0)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.Foundation.Metadata.Version(1)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="GradientStops")]
public class RadialGradientBrush : XamlCompositionBrushBase
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="GradientStops")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.XamlContract), 65536)]
public class RadialGradientBrush : XamlCompositionBrushBase
Public Class RadialGradientBrush
Inherits XamlCompositionBrushBase
Herencia
RadialGradientBrush
Atributos

Ejemplos

Sugerencia

Para obtener más información, instrucciones de diseño y ejemplos de código, consulta Pinceles.

Las aplicaciones WinUI 3 Gallery y WinUI 2 Gallery incluyen ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3 y WinUI 2.

Si ya se instalaron, haga clic en los vínculos siguientes para abrirlas: WinUI 3 Gallery o WinUI 2 Gallery.

Si no están instaladas, puede descargar WinUI 3 Gallery y WinUI 2 Gallery desde Microsoft Store.

También puede obtener el código fuente de ambas desde GitHub (use la bifurcación principal para WinUI 3 y la bifurcación winui2 para WinUI 2).

En el ejemplo siguiente se crea un degradado radial con seis paradas de degradado y se usa para pintar un rectángulo.

<Page
  xmlns:media="using:Microsoft.UI.Xaml.Media">

  <Rectangle Width="200" Height="200">
      <Rectangle.Fill>
          <media:RadialGradientBrush>
              <GradientStop Color="Blue" Offset="0.0" />
              <GradientStop Color="Yellow" Offset="0.2" />
              <GradientStop Color="LimeGreen" Offset="0.4" />
              <GradientStop Color="LightBlue" Offset="0.6" />
              <GradientStop Color="Blue" Offset="0.8" />
              <GradientStop Color="LightGray" Offset="1" />
          </media:RadialGradientBrush>
      </Rectangle.Fill>
  </Rectangle>

</Page>

Rectángulo lleno de un degradado radial

En este ejemplo se crea un degradado radial que usa el modo de asignación absoluta con valores personalizados para Center, RadiusXRadiusY y GradientOrigin:

<Page
  xmlns:media="using:Microsoft.UI.Xaml.Media">

  <Rectangle Width="200" Height="200">
      <Rectangle.Fill>
          <media:RadialGradientBrush
            MappingMode="Absolute"
            Center="50,50"
            RadiusX="100"
            RadiusY="100"
            GradientOrigin="100,50"
            >
              <GradientStop Color="Yellow" Offset="0.0" />
              <GradientStop Color="Blue" Offset="1" />
          </media:RadialGradientBrush>
      </Rectangle.Fill>
  </Rectangle>

</Page>

Eje de degradado para un degradado vertical

Comentarios

Diseño de degradado

El degradado se dibuja dentro de una elipse definida por las propiedades Center, RadiusX y RadiusY . Los colores del degradado se inician en el centro de la elipse y terminan en el radio.

Los colores del degradado radial se definen según los delimitadores de color agregados a la propiedad de colección GradientStops. Cada delimitador de degradado especifica un color y un desplazamiento a lo largo del degradado.

El origen del degradado se establece de manera predeterminada en el centro y se puede desplazar con la propiedad GradientOrigin.

MappingMode define si Center, RadiusX, RadiusY y GradientOrigin representan coordenadas relativas o absolutas.

Cuando MappingMode se establece RelativeToBoundingBoxen , los valores X e Y de las tres propiedades se tratan como relativos a los límites del elemento, donde (0,0) representa la parte superior izquierda y (1,1) representa la parte inferior derecha de los límites del elemento para las propiedades Center, RadiusX y RadiusY y (0,0) representa el centro de la propiedad GradientOrigin .

Cuando MappingMode se establece en Absolute, los valores X e Y de las tres propiedades se tratan como coordenadas absolutas dentro de los límites del elemento.

compatibilidad con versiones de Windows 10

La representación de degradado se admite en Windows 10 versión 1903 (v10.0.18362.0) y versiones posteriores. En versiones anteriores del sistema operativo, el pincel representará un color sólido especificado por la FallbackColor propiedad .

Pinceles como recursos XAML

Cada uno de los tipos Brush que se pueden declarar en XAML (SolidColorBrush, LinearGradientBrush, ImageBrush) está diseñado para definirse como un recurso, de modo que pueda reutilizar ese pincel como un recurso en toda la aplicación. La sintaxis XAML mostrada para los tipos Brush es adecuada para definir el pincel como un recurso. Al declarar un pincel como un recurso, también necesita un atributo x:Key que usará más adelante para hacer referencia a ese recurso desde otras definiciones de interfaz de usuario. Para obtener más información sobre los recursos XAML y cómo usar el atributo x:Key, consulta Referencias de recursos ResourceDictionary y XAML.

La ventaja de declarar pinceles como recursos es que reduce el número de objetos en tiempo de ejecución necesarios para construir una interfaz de usuario: el pincel ahora se comparte como un recurso común que proporciona valores para varias partes del gráfico de objetos.

Si examinas las definiciones de plantilla de control existentes para Windows Runtime controles XAML, verás que las plantillas usan recursos de pincel ampliamente (aunque normalmente son SolidColorBrush, no LinearGradientBrush). Muchos de estos recursos son recursos del sistema y usan la extensión de marcado {ThemeResource} para la referencia de recursos en lugar de la extensión de marcado {StaticResource}. Para obtener más información sobre cómo usar pinceles de recursos del sistema en tu propio XAML de plantilla de control, consulta Recursos de temas XAML.

Constructores

RadialGradientBrush()

Inicializa una nueva instancia de la clase RadialGradientBrush .

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

Propiedades

Center

Obtiene o establece el centro de la elipse que contiene el degradado.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

CenterProperty

Identifica la propiedad de dependencia Center.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

GradientOrigin

Obtiene o establece el origen del degradado (relativo a la esquina superior izquierda).

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

GradientOriginProperty

Identifica la propiedad de dependencia GradientOrigin.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

GradientStops

Obtiene o establece los delimitadores de degradado del pincel.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

InterpolationSpace

Obtiene o establece el espacio de color utilizado para interpolar los colores del degradado.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

InterpolationSpaceProperty

Identifica la propiedad de dependencia InterpolationSpace.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

MappingMode

Obtiene o establece si las coordenadas de posicionamiento del pincel de degradado son absolutas o relativas al área de salida.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

MappingModeProperty

Identifica la propiedad de dependencia MappingMode.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

RadiusX

Obtiene o establece el radio del eje X de la elipse que contiene el degradado.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

RadiusXProperty

Identifica la propiedad de dependencia RadiusX.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

RadiusY

Obtiene o establece el radio del eje Y de la elipse que contiene el degradado.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

RadiusYProperty

Identifica la propiedad de dependencia RadiusY.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

SpreadMethod

Obtiene o establece el tipo de método de propagación que especifica cómo dibujar un degradado que comienza o finaliza dentro de los límites del objeto que se pinta.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

SpreadMethodProperty

Identifica la propiedad de dependencia SpreadMethod.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

Se aplica a

Consulte también