Información general sobre objetos TileBrush

Artículo
10/07/2008

Actualización: noviembre 2007

Los objetos TileBrush proporcionan un gran control sobre cómo se pinta un área con una imagen, o con un objeto Drawing o Visual. En este tema se describe cómo utilizar las características de TileBrush para obtener un mayor control sobre cómo se pinta un área con ImageBrush, DrawingBrush o VisualBrush.

Este tema contiene las secciones siguientes.

Requisitos previos
Pintar un área con mosaicos
Contenido del pincel
Mosaico base
Temas relacionados

Requisitos previos

Para entender este tema, resulta útil comprender cómo utilizar las características básicas de las clases ImageBrush, DrawingBrush y VisualBrush. Para ver una introducción a estos tipos, consulte Pintar con imágenes, dibujos y elementos visuales.

Pintar un área con mosaicos

ImageBrush, DrawingBrush y VisualBrush son tipos de objetos TileBrush. Los pinceles de mosaico le proporcionan un gran control sobre cómo se pinta un área con una imagen, un dibujo o un objeto visual. Por ejemplo, en lugar de limitarse a pintar una área con una sola imagen expandida, puede hacerlo con una serie de mosaicos de la imagen que crean una trama.

Al pintar un área con un pincel de mosaico se utilizan tres componentes: el contenido, el mosaico base y el área de salida.

Componentes de TileBrush con un solo mosaico
Componentes de TileBrush con Tile como TileMode
Componentes de TileBrush en mosaico

El área de salida es el área que se pinta, como la propiedad Fill de un objeto Ellipse o la propiedad Background de un objeto Button. En las secciones siguientes se describen los otros dos componentes de TileBrush.

Contenido del pincel

Hay tres tipos diferentes de TileBrush y cada uno de ellos pinta con un tipo diferente de contenido.

Si el pincel es ImageBrush, este contenido es una imagen. La propiedad ImageSource especifica el contenido de ImageBrush.
Si el pincel es DrawingBrush, este contenido es un dibujo. La propiedad Drawing especifica el contenido de DrawingBrush.
Si el pincel es VisualBrush, este contenido es un objeto visual. La propiedad Visual especifica el contenido de VisualBrush.

Puede especificar la posición y las dimensiones del contenido de TileBrush mediante la propiedad Viewbox, aunque es frecuente dejar la propiedad Viewbox establecida en su valor predeterminado. De manera predeterminada, Viewbox se configura para contener completamente el contenido del pincel. Para obtener más información sobre cómo configurar Viewbox, consulte la página de propiedades de Viewbox.

Mosaico base

Un objeto TileBrush proyecta su contenido en un mosaico base. La propiedad Stretch controla cómo se expande el contenido de TileBrush para rellenar el mosaico base. La propiedad Stretch acepta los valores siguientes, definidos por la enumeración Stretch:

None: el contenido del pincel no se expande para rellenar el mosaico.
Fill: se ajusta la escala del contenido del pincel para ajustarla al mosaico. Dado que la escala del alto y del ancho del contenido se ajusta de manera independiente, puede que no se conserve la relación de aspecto original del contenido. Es decir, puede que el contenido del pincel quede distorsionado al rellenar completamente el mosaico de salida.
Uniform: se ajusta la escala del contenido del pincel para que se ajuste completamente dentro del mosaico. Se conserva la relación de aspecto del contenido.
UniformToFill: se ajusta la escala del contenido del pincel para que rellene completamente el área de salida conservando la relación de aspecto original del contenido.

En la siguiente imagen se ilustran los diferentes valores de Stretch.

Diferentes valores de Stretch para TileBrush

En el ejemplo siguiente, se establece el contenido de un objeto ImageBrush de modo que no se expanda para rellenar el área de salida.

<Rectangle
  Width="125" Height="175"
  Stroke="Black"
  StrokeThickness="1"
  Margin="0,0,5,0">
  <Rectangle.Fill>
    <ImageBrush 
      Stretch="None"
      ImageSource="sampleImages\testImage.gif"/>
  </Rectangle.Fill>
</Rectangle>

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 125;
myRectangle.Height = 175;
myRectangle.Stroke = Brushes.Black;
myRectangle.StrokeThickness = 1;
myRectangle.Margin = new Thickness(0,5,0,0);

// Load the image.
BitmapImage theImage = 
    new BitmapImage(
        new Uri("sampleImages\\testImage.gif", UriKind.Relative));   
ImageBrush myImageBrush = new ImageBrush(theImage);

// Configure the brush so that it
// doesn't stretch its image to fill
// the rectangle.
myImageBrush.Stretch = Stretch.None;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

De manera predeterminada, TileBrush genera un mosaico único (el mosaico base) y expande ese mosaico hasta rellenar completamente el área de salida. Puede cambiar el tamaño y la posición del mosaico base estableciendo las propiedades Viewport y ViewportUnits.

Tamaño del mosaico base

La propiedad Viewport determina el tamaño y la posición del mosaico base; la propiedad ViewportUnits determina si Viewport se especifica mediante coordenadas absolutas o relativas. Si las coordenadas son relativas, son relativas al tamaño del área de salida. El punto (0,0) representa la esquina superior izquierda del área de salida y (1,1) representa la esquina inferior derecha del área de salida. Para especificar que la propiedad Viewport utiliza coordenadas absolutas, establezca la propiedad ViewportUnits en Absolute.

En la ilustración siguiente se muestra la diferencia entre una propiedad ViewportUnits absoluta y relativa para TileBrush. Observe que ambas ilustraciones muestran una trama de mosaico; en la sección siguiente se describe cómo especificar una trama de mosaico.

Unidades de área de visualización absoluta y relativa

En el ejemplo siguiente, se utiliza una imagen para crear un mosaico con un ancho y un alto del 50%. El mosaico base se sitúa en (0,0) en el área de salida.

<Rectangle
 Width="50" Height="100">
  <Rectangle.Fill>

    <!-- Paints an area with 4 tiles. -->
    <ImageBrush ImageSource="sampleImages\cherries_larger.jpg"
      Viewport="0,0,0.5,0.5"
      ViewportUnits="RelativeToBoundingBox" 
      TileMode="Tile" />
  </Rectangle.Fill>
</Rectangle>

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 50;
myRectangle.Height = 100;

// Load the image.
BitmapImage theImage = 
    new BitmapImage(
        new Uri("sampleImages\\cherries_larger.jpg", UriKind.Relative));   
ImageBrush myImageBrush = new ImageBrush(theImage);

// Create tiles that are 1/4 the size of 
// the output area.
myImageBrush.Viewport = new Rect(0,0,0.25,0.25);
myImageBrush.ViewportUnits = BrushMappingMode.RelativeToBoundingBox;

// Set the tile mode to Tile.
myImageBrush.TileMode = TileMode.Tile;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

En el ejemplo siguiente se establecen los mosaicos de ImageBrush en un tamaño de 25 por 25 píxeles independientes del dispositivo. Dado que el valor de ViewportUnits es absoluto, los mosaicos de ImageBrush siempre tienen 25 por 25 píxeles, independientemente del área pintada.

<Rectangle
 Width="50" Height="100">
  <Rectangle.Fill>

    <!-- Paints an area with 25 x 25 tiles. -->
    <ImageBrush ImageSource="sampleImages\cherries_larger.jpg"
      Viewport="0,0,25,25"
      ViewportUnits="Absolute" 
      TileMode="Tile" />
  </Rectangle.Fill>
</Rectangle>

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 50;
myRectangle.Height = 100;

// Load the image.       
BitmapImage theImage =
    new BitmapImage(
        new Uri("sampleImages\\cherries_larger.jpg", UriKind.Relative));
ImageBrush myImageBrush = new ImageBrush(theImage);

// Create tiles that are 25 x 25, regardless of the size
// of the output area.
myImageBrush.Viewport = new Rect(0, 0, 25, 25);
myImageBrush.ViewportUnits = BrushMappingMode.Absolute;

// Set the tile mode to Tile.
myImageBrush.TileMode = TileMode.Tile;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

Comportamiento de mosaico

TileBrush genera una trama de mosaico cuando su mosaico base no rellena completamente el área de salida y se especifica un modo de mosaico distinto de None. Cuando el mosaico de un pincel de mosaico no rellena completamente el área de salida, su propiedad TileMode especifica si el mosaico base se debe duplicar para rellenar el área de salida y, en caso afirmativo, cómo se debe duplicar. La propiedad TileMode acepta los valores siguientes, definidos por la enumeración TileMode:

None: sólo se dibuja el mosaico base.
Tile: se dibuja el mosaico base y el área restante se rellena repitiendo el mosaico base de tal modo que el borde derecho de un mosaico sea adyacente al borde izquierdo del siguiente, y lo mismo en sentido vertical.
FlipX: igual que Tile, pero volteando en sentido horizontal columnas alternas de mosaicos.
FlipY: igual que Tile, pero volteando en sentido vertical filas alternas de mosaicos.
FlipXY: combinación de FlipX y FlipY.

En la siguiente imagen se ilustran los diferentes modos de mosaico.

Diferentes valores de TileMode para TileBrush

En el ejemplo siguiente, se utiliza una imagen para pintar un rectángulo de 100 píxeles de ancho por 100 píxeles de alto. La propiedad Viewport del pincel se ha establecido en 0,0,0.25,0.25; el mosaico base del pincel ocupa 1/4 del área de salida. La propiedad TileMode del pincel se establece en FlipXY, para que rellene el rectángulo con filas de mosaicos.

<Rectangle
 Width="100" Height="100" >
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\triangle.jpg"
      Viewport="0,0,0.25,0.25" 
      TileMode="FlipXY"
      />
  </Rectangle.Fill>    
</Rectangle>

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;

// Load the image.
BitmapImage theImage = 
    new BitmapImage(
        new Uri("sampleImages\\triangle.jpg", UriKind.Relative));   
ImageBrush myImageBrush = new ImageBrush(theImage);

// Create tiles that are 1/4 the size of 
// the output area.
myImageBrush.Viewport = new Rect(0,0,0.25,0.25);

// Set the tile mode to FlipXY.
myImageBrush.TileMode = TileMode.FlipXY;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

Vea también

Compartir a través de

Información general sobre objetos TileBrush

Requisitos previos

Pintar un área con mosaicos

Contenido del pincel

Mosaico base

Tamaño del mosaico base

Comportamiento de mosaico

Vea también

Tareas

Conceptos

Referencia

Otros recursos

Recursos adicionales