Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Utiliza Brush objetos para pintar los interiores y contornos de formas, texto y controles XAML, logrando que sean visibles en la interfaz de usuario de la aplicación.
APIs importantes: clase Brush
Introducción a los pinceles
Para pintar una forma , texto o partes de un control que se muestra en el lienzo de la aplicación, ajuste la propiedad de relleno Fill de la forma o las propiedades de fondo Background y de primer plano Foreground de un control a un valor de brocha .
Los diferentes tipos de pinceles son:
- PincelAcrílico
- SolidColorBrush
- LinearGradientBrush
- RadialGradientBrush
- ImageBrush
- WebViewBrush
- XamlCompositionBrushBase
Pinceles de color sólido
Un SolidColorBrush pinta un área con un único Color, como rojo o azul. Este es el pincel más básico. En XAML, hay tres maneras de definir un SolidColorBrush y el color que especifica: nombres de color predefinidos, valores de color hexadecimales o la sintaxis del elemento de propiedad.
Nombres de color predefinidos
Puede usar un nombre de color predefinido, como Amarillo o Magenta. Hay 256 colores con nombre disponibles. El analizador XAML convierte el nombre de color en una estructura Color con los canales de color correctos. Los 256 colores con nombre se basan en el X11 nombres de color de la especificación Hojas de estilo en cascada, nivel 3 (CSS3), por lo que es posible que ya esté familiarizado con esta lista de colores con nombre si tiene experiencia anterior con el desarrollo web o el diseño.
Este es un ejemplo que establece la propiedad Fill de un Rectángulo en el color predefinido Rojo.
<Rectangle Width="100" Height="100" Fill="Red" />
objeto SolidColorBrush
PincelDeColorSólido aplicado a un Rectángulo
Si vas a definir un SolidColorBrush con código en lugar de XAML, cada color con nombre está disponible como un valor de propiedad estático de la clase Colors de la clase Colors. Por ejemplo, para declarar un valor color de
Valores de color hexadecimal
Puede usar una cadena de formato hexadecimal para declarar valores de color precisos de 24 bits con un canal alfa de 8 bits para un SolidColorBrush. Dos caracteres del intervalo 0 a F definen cada valor de componente y el orden de valor del componente de la cadena hexadecimal es: canal alfa (opacidad), canal rojo, canal verde y canal azul (ARGB). Por ejemplo, el valor hexadecimal "#FFFF0000" define rojo totalmente opaco (alpha="FF", red="FF", green="00" y blue="00").
En este ejemplo de XAML, se establece la propiedad Fill de un Rectangle al valor hexadecimal "#FFFF0000" y da un resultado idéntico al usar el color denominado Colors.Red.
<StackPanel>
<Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>
Sintaxis del elemento Property
Puede usar la sintaxis del elemento de propiedad para definir un SolidColorBrush. Esta sintaxis es más detallada que los métodos anteriores, pero puede especificar valores de propiedad adicionales en un elemento, como la opacidad. Para obtener más información sobre la sintaxis XAML, incluida la sintaxis de elementos de propiedad, consulta la información general de XAML y la guía de sintaxis XAML .
En los ejemplos anteriores, el pincel que se crea se crea de forma implícita y automática, como parte de una abreviatura deliberada del lenguaje XAML que ayuda a simplificar las definiciones de interfaz de usuario para los casos más comunes. En el ejemplo siguiente se crea un Rectángulo y se crea explícitamente el SolidColorBrush como valor de elemento para una propiedad Rectangle.Fill . El Color del SolidColorBrush se establece en Azul y la Opacidad se establece en 0,5.
<Rectangle Width="200" Height="150">
<Rectangle.Fill>
<SolidColorBrush Color="Blue" Opacity="0.5" />
</Rectangle.Fill>
</Rectangle>
Pinceles de degradado lineal
Un LinearGradientBrush pinta un área con un degradado definido a lo largo de una línea. Esta línea se denomina eje de degradado. Puede especificar los colores del degradado y sus ubicaciones a lo largo del eje de degradado mediante GradientStop objetos. De forma predeterminada, el eje de degradado se extiende desde la esquina superior izquierda hasta la esquina inferior derecha del área que pinta el pincel, resultando en un sombreado diagonal.
El es el elemento básico de un pincel de degradado. Un delimitador de degradado especifica cuál es el color
La propiedad de color del punto de control del degradado especifica el color del punto de control del degradado. Puede establecer el color mediante un nombre de color predefinido o especificando los valores ARGB hexadecimales.
La propiedad Offset de un GradientStop especifica la posición de cada GradientStop a lo largo del eje del degradado. El desplazamiento es un doble que oscila entre 0 y 1. Un Offset de 0 coloca el GradientStop al inicio del eje del degradado, es decir, cerca de su StartPoint. Un offset de
En este ejemplo se crea un degradado lineal con cuatro colores y se usa para pintar un rectángulo.
<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
<GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
<GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
<GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
El color de cada punto entre las paradas de degradado se interpola linealmente como una combinación del color especificado por los dos delimitadores de degradado. En la imagen siguiente se resaltan los puntos de degradado en el ejemplo anterior. Los círculos marcan la posición de los puntos de parada de degradado, y la línea discontinua muestra el eje de degradado.
Combinación de colores especificados por los dos delimitadores de degradado
Puede cambiar la línea en la que se colocan los delimitadores de degradado estableciendo las propiedades StartPoint y EndPoint con valores diferentes a los valores predeterminados iniciales (0,0) y (1,1). Al cambiar los valores de coordenadas StartPoint y EndPoint , puede crear degradados horizontales o verticales, invertir la dirección del degradado o condensar la propagación de degradado para aplicarse a un rango menor que el área pintada completa. Para condensar el degradado, establezca los valores de StartPoint y/o EndPoint para que se encuentren entre los valores 0 y 1. Por ejemplo, si desea un degradado horizontal en el que todo se produzca en la mitad izquierda del pincel y el lado derecho sea sólido para el último color GradientStop, especifique un StartPoint de (0,0) y un EndPoint de (0.5,0).
Uso de herramientas para crear degradados
Ahora que sabe cómo funcionan los degradados lineales, puede usar Visual Studio o Blend para facilitar la creación de estos degradados. Para crear un degradado, seleccione el objeto al que desea aplicar un degradado en la superficie de diseño o en la vista XAML. Expanda Pincel y seleccione la pestaña de Degradado Lineal .
Creación de un degradado lineal en Visual Studio
Ahora puede cambiar los colores de los puntos de degradado y deslizar sus posiciones mediante la barra en la parte inferior. También puede agregar nuevos puntos de parada del degradado haciendo clic en la barra y eliminarlos arrastrándolos fuera de la barra (consulte la captura de pantalla siguiente).
control deslizante de configuración degradado
Pinceles de degradado radial
Un RadialGradientBrush se dibuja dentro de una elipse que está definida por las propiedades Center, RadiusXy RadiusY. Los colores para el gradiente comienzan en el centro de la elipse y terminan en el radio.
Los colores del degradado radial se definen mediante los puntos de color que se agregan a la propiedad de colección GradientStops . Cada punto de parada del degradado especifica un color y un desplazamiento a lo largo del degradado.
El origen del degradado se establece de forma predeterminada en el centro y se puede desplazar mediante la propiedad GradientOrigin.
MappingMode define si Center, RadiusX, RadiusY y GradientOrigin representan coordenadas relativas o absolutas.
Cuando MappingMode se configura como RelativeToBoundingBox, 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 el centro de , las propiedades de radio RadioXy RadioY, y (0,0) representa el centro de la propiedad GradientOrigin.
Cuando MappingMode se establece en Absolute, los valores de X y Y de las tres propiedades se consideran coordenadas absolutas dentro de los límites del elemento.
En este ejemplo se crea un degradado lineal con cuatro colores y se usa para pintar un rectángulo.
<!-- This rectangle is painted with a radial gradient. -->
<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>
El color de cada punto entre los puntos de parada de degradado se interpola radialmente mediante una combinación del color especificado por los dos puntos de parada de degradado. En la imagen siguiente se resaltan los puntos de degradado en el ejemplo anterior.
paradas de degradado
Pinceles de imagen
Un ImageBrush pinta un área con una imagen, obtenida de un archivo de imagen. Estableces la propiedad ImageSource usando la ruta de acceso de la imagen que se va a cargar. Normalmente, el origen de la imagen procede de un elemento del Contenido que es parte de los recursos de tu aplicación.
De forma predeterminada, un ImageBrush amplía su imagen para rellenar completamente el área pintada, posiblemente distorsionando la imagen si el área pintada tiene una relación de aspecto diferente a la imagen. Para cambiar este comportamiento, modifique la propiedad Stretch de su valor predeterminado Fill y configúrela como None, Uniformo UniformToFill.
En el ejemplo siguiente se crea un ImageBrush y se establece el ImageSource en una imagen denominada licorice.jpg, que debe incluir como recurso en la aplicación. Luego, el ImageBrush pinta el área definida por una elipse de forma .
<Ellipse Height="200" Width="300">
<Ellipse.Fill>
<ImageBrush ImageSource="licorice.jpg" />
</Ellipse.Fill>
</Ellipse>
Un ImageBrush renderizado
ImageBrush e Image hacen referencia a un archivo de origen de imagen por identificador uniforme de recursos (URI), donde ese archivo de origen de imagen usa varios formatos de imagen posibles. Estos archivos de origen de imagen se especifican como URI. Para obtener más información sobre cómo especificar orígenes de imágenes, los formatos de imagen utilizables y empaquetarlos en una aplicación, consulta Image e ImageBrush.
Pinceles y texto
También puede usar pinceles para aplicar características de representación a elementos de texto. Por ejemplo, la propiedad Primer plano de TextBlock utiliza un Pincel. Puede aplicar cualquiera de los pinceles descritos aquí al texto. Sin embargo, tenga cuidado con los pinceles aplicados al texto, ya que cualquier fondo podría hacer que el texto sea ilegible si utiliza pinceles que se mezclan con el fondo. Use SolidColorBrush para mejorar la legibilidad de los elementos de texto en la mayoría de los casos, a menos que desee que el elemento de texto sea principalmente decorativo.
Incluso cuando se usa un color sólido, asegúrese de que el color de texto que elija tiene suficiente contraste con el color de fondo del contenedor de diseño del texto. El nivel de contraste entre el fondo del contenedor de texto y el primer plano del texto es una consideración de accesibilidad.
WebViewBrush
Un WebViewBrush es un tipo especial de Brush que puede acceder al contenido que normalmente se ve en un control WebView. En lugar de renderizar el contenido en el área de control rectangular WebView, WebViewBrush pinta ese contenido sobre otro elemento que tiene una propiedad de tipo Brushpara una superficie de representación. WebViewBrush no es adecuado para cada escenario de uso de pinceles, pero es útil para las transiciones de un WebView. Para obtener más información, consulta WebViewBrush.
XamlCompositionBrushBase
XamlCompositionBrushBase es una clase base que se usa para crear pinceles personalizados que usan CompositionBrush para pintar elementos de la interfaz de usuario XAML.
Esto permite la interoperación en cascada entre las capas Windows.UI.Xaml y Windows.UI.Composition, como se describe en la información general de la capa visual de .
Para crear un pincel personalizado, cree una nueva clase que herede de XamlCompositionBrushBase e implemente los métodos necesarios.
Por ejemplo, esto se puede usar para aplicar efectos a XAML UIElements mediante un CompositionEffectBrush, como un GaussianBlurEffect o un SceneLightingEffect que controla las propiedades reflectantes de un XAML UIElement cuando es iluminado por un XamlLight.
Para obtener ejemplos de código, consulte XamlCompositionBrushBase.
Pinceles como recursos XAML
Puedes declarar cualquier pincel para que sea un recurso XAML con clave en un diccionario de recursos XAML. Esto facilita la replicación de los mismos valores de pincel que se aplican a varios elementos de una interfaz de usuario. A continuación, los valores de pincel se comparten y se aplican a cualquier caso en el que hagas referencia al recurso de pincel como un {StaticResource} uso en tu XAML. Esto incluye casos en los que tienes una plantilla de control XAML que hace referencia al pincel compartido y la plantilla de control es un recurso XAML con clave.
Pinceles en el código
Es mucho más habitual especificar pinceles mediante XAML que usar código para definir pinceles. Esto se debe a que los pinceles normalmente se definen como recursos XAML y, dado que los valores de los pinceles suelen ser el resultado de las herramientas de diseño o forman parte de una definición de interfaz de usuario XAML. Sin embargo, para el caso ocasional en el que es posible que quiera definir un pincel mediante código, todos los tipos de Brush están disponibles para la instanciación mediante código.
Para crear un SolidColorBrush en código, use el constructor que toma un parámetro Color. Pase un valor que sea una propiedad estática de la clase Colors , de la siguiente manera:
SolidColorBrush blueBrush = new SolidColorBrush(Windows.UI.Colors.Blue);
Dim blueBrush as SolidColorBrush = New SolidColorBrush(Windows.UI.Colors.Blue)
Windows::UI::Xaml::Media::SolidColorBrush blueBrush{ Windows::UI::Colors::Blue() };
blueBrush = ref new SolidColorBrush(Windows::UI::Colors::Blue);
Para WebViewBrush y ImageBrush, utilice el constructor predeterminado y, a continuación, llame a otras API antes de intentar utilizar ese pincel para una propiedad de la interfaz de usuario.
- ImageSource requiere un BitmapImage (no un URI) al definir un ImageBrush mediante código. Si el origen es una secuencia , use el método SetSourceAsync para inicializar el valor. Si el origen es un URI, que incluye contenido en la aplicación que usa los esquemas ms-appx o ms-resource, use el constructor BitmapImage que toma un URI. También puede considerar la posibilidad de controlar el evento ImageOpened si hay algún problema de tiempo con la recuperación o descodificación del origen de la imagen, donde es posible que necesite contenido alternativo para mostrar hasta que el origen de la imagen esté disponible.
- Para WebViewBrush, puede que necesite llamar a Redibujar si ha restablecido recientemente la propiedad SourceName o si también se cambia el contenido de WebView con código.
Para obtener ejemplos de código, vea WebViewBrush, ImageBrush y XamlCompositionBrushBase.
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
