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.
TileBrush Los objetos proporcionan un gran control sobre cómo se pinta un área con una imagen, Drawingo Visual. En este tema se describe cómo usar TileBrush características para obtener más control sobre cómo un ImageBrush, DrawingBrusho VisualBrush pinta un área.
Prerrequisitos
Para comprender este tema, resulta útil comprender cómo usar las características básicas de la ImageBrushclase , DrawingBrusho VisualBrush . Para obtener una introducción a estos tipos, vea pintura con imágenes, dibujos y objetos visuales.
Pintar un área con mosaicos
ImageBrush, DrawingBrush, son VisualBrush tipos de TileBrush objetos. Los pinceles de mosaico proporcionan una gran cantidad de control sobre cómo se pinta un área con una imagen, dibujo o objeto visual. Por ejemplo, en lugar de simplemente pintar un área con una sola imagen estirada, puede pintar un área con una serie de mosaicos de imagen que crean un patrón.
Pintar un área con un pincel de baldosas implica tres componentes: contenido, baldosa base y área de salida.
Componentes de un TileBrush con un único icono
Componentes de un TileBrush con un TileMode de Tile
El área de salida es el área que se está pintando, como el Fill de un Ellipse o el Background de un Button. En las secciones siguientes se describen los otros dos componentes de un TileBrush.
Contenido del pincel
Hay tres tipos diferentes de TileBrush y cada uno pinta con un tipo de contenido diferente.
Si el pincel es ImageBrush, este contenido es una imagen La propiedad ImageSource especifica el contenido de ImageBrush.
Si el pincel es un DrawingBrush, este contenido es un dibujo. La Drawing propiedad especifica el contenido de .DrawingBrush
Si el pincel es , VisualBrusheste contenido es un objeto visual. La Visual propiedad especifica el contenido de .VisualBrush
Puede especificar la posición y las dimensiones del TileBrush contenido mediante la Viewbox propiedad , aunque es habitual dejar el Viewbox conjunto en su valor predeterminado. De forma predeterminada, Viewbox está configurado para que contenga completamente el contenido del pincel. Para obtener más información sobre cómo configurar Viewbox, consulte la página de propiedades de Viewbox.
El cuadro base
Un TileBrush proyecta contenido en una baldosa base. La propiedad Stretch controla cómo se estira el contenido TileBrush para rellenar el mosaico base. La Stretch propiedad acepta los siguientes valores, definidos por la Stretch enumeración :
None: El contenido del pincel no se extiende para rellenar el azulejo.
Fill: El contenido del pincel se escala para ajustarse a la baldosa. Dado que el alto y el ancho del contenido se escalan de forma independiente, es posible que no se conserve la relación de aspecto original del contenido. Es decir, el contenido del pincel podría deformarse para rellenar completamente la baldosa de salida.
Uniform: El contenido del pincel se escala para que se ajuste completamente dentro del azulejo. Se conserva la relación de aspecto del contenido.
UniformToFill: el contenido del pincel se escala para que rellene completamente el área de salida mientras conserva la relación de aspecto original del contenido.
En la imagen siguiente se muestran las distintas Stretch configuraciones.
En el ejemplo siguiente, se establece el contenido de un ImageBrush para que no se estire para llenar 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;
' Create a rectangle.
Dim myRectangle As New Rectangle()
With myRectangle
.Width = 125
.Height = 175
.Stroke = Brushes.Black
.StrokeThickness = 1
.Margin = New Thickness(0, 5, 0, 0)
End With
' Load the image.
Dim theImage As New BitmapImage(New Uri("sampleImages\testImage.gif", UriKind.Relative))
Dim myImageBrush As 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 forma predeterminada, un TileBrush genera un único icono (el icono base) y extiende ese icono para rellenar completamente el área de salida. Puede cambiar el tamaño y la posición del icono base estableciendo las Viewport propiedades y ViewportUnits .
Tamaño del icono base
La Viewport propiedad determina el tamaño y la posición del icono base, y la ViewportUnits propiedad 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 Viewport propiedad usa coordenadas absolutas, establezca la ViewportUnits propiedad Absoluteen .
En la ilustración siguiente se muestra la diferencia en la salida entre un TileBrush con un contexto relativo frente a absoluto ViewportUnits. Observe que las ilustraciones muestran un patrón en mosaico; En la sección siguiente se describe cómo especificar el patrón de mosaico.
En el ejemplo siguiente, se usa una imagen para crear un icono que tenga un ancho y alto de 50%. El icono base se encuentra en (0,0) del á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;
' Create a rectangle.
Dim myRectangle As New Rectangle()
myRectangle.Width = 50
myRectangle.Height = 100
' Load the image.
Dim theImage As New BitmapImage(New Uri("sampleImages\cherries_larger.jpg", UriKind.Relative))
Dim myImageBrush As 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 las losetas de un ImageBrush a 25 por 25 píxeles independientes del dispositivo. Porque las ViewportUnits son absolutas, los ImageBrush mosaicos siempre miden 25 por 25 píxeles, independientemente del tamaño del área que se esté pintando.
<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;
' Create a rectangle.
Dim myRectangle As New Rectangle()
myRectangle.Width = 50
myRectangle.Height = 100
' Load the image.
Dim theImage As New BitmapImage(New Uri("sampleImages\cherries_larger.jpg", UriKind.Relative))
Dim myImageBrush As 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
Genera TileBrush un patrón en mosaico cuando su baldosa base no rellena completamente el área de salida y se especifica un modo de mosaico distinto a None. Cuando el icono de un pincel de mosaico no rellena completamente el área de salida, su TileMode propiedad especifica si el icono base debe duplicarse para rellenar el área de salida y, si es así, cómo se debe duplicar el icono base. La TileMode propiedad acepta los siguientes valores, definidos por la TileMode enumeración :
None: solo se dibuja el azulejo base.
Tile: el icono base se dibuja y el área restante se rellena repitiendo el icono base de forma que el borde derecho de un icono esté adyacente al borde izquierdo de la siguiente y de forma similar para la parte inferior y superior.
FlipX: igual que Tile, pero las columnas alternativas de los iconos se voltean horizontalmente.
FlipY: igual que Tile, pero las filas alternativas de los iconos se voltean verticalmente.
La siguiente imagen ilustra los diferentes modos de mosaico.
En el ejemplo siguiente, se usa una imagen para pintar un rectángulo de 100 píxeles de ancho y 100 píxeles de alto. Al establecer el pincel a Viewport 0,0,0.25,0.25, el azulejo base del pincel se ajusta para que sea 1/4 del área de salida. El TileMode del pincel está configurado en FlipXY. para que rellene el rectángulo con filas de azulejos.
<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;
' Create a rectangle.
Dim myRectangle As New Rectangle()
myRectangle.Width = 100
myRectangle.Height = 100
' Load the image.
Dim theImage As New BitmapImage(New Uri("sampleImages\triangle.jpg", UriKind.Relative))
Dim myImageBrush As 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
Consulte también
.NET Desktop feedback