Översikt över TileBrush

TileBrush-objekt ger dig mycket kontroll över hur ett område målas med en bild, Drawingeller Visual. Det här avsnittet beskriver hur du använder TileBrush funktioner för att få mer kontroll över hur en ImageBrush, DrawingBrusheller VisualBrush målar ett område.

Förutsättningar

För att förstå det här avsnittet är det bra att förstå hur du använder de grundläggande funktionerna i klassen ImageBrush, DrawingBrusheller VisualBrush. En introduktion till dessa typer finns i Målning med bilder, ritningar och visuella objekt.

Måla ett område med paneler

ImageBrush, DrawingBrush, är VisualBrush är typer av TileBrush objekt. Panelpenslar ger dig stor kontroll över hur ett område målas med en bild, ritning eller ett visuellt objekt. I stället för att bara måla ett område med en enda utsträckt bild kan du till exempel måla ett område med en serie bildpaneler som skapar ett mönster.

Att måla ett område med en kakelsättningsborste omfattar tre komponenter: innehåll, basplattan och utdataområdet.

Komponenter i en TileBrush med en enda panel

Komponenter i en TileBrush med en TileMode av Tile

Utdataområdet är det område som målas, till exempel Fill för en Ellipse eller Background för en Button. I nästa avsnitt beskrivs de andra två komponenterna i en TileBrush.

Penselinnehåll

Det finns tre olika typer av TileBrush och varje färg med olika typer av innehåll.

• Om penseln är en ImageBrushär det här innehållet en bild Egenskapen ImageSource anger innehållet i ImageBrush.

• Om penseln är en DrawingBrush, så är det här innehållet en teckning. Egenskapen Drawing anger innehållet i DrawingBrush.

• Om penseln är en VisualBrushär det här innehållet visuellt. Egenskapen Visual anger innehållet i VisualBrush.

Du kan ange positionen och dimensionerna för TileBrush innehåll med hjälp av egenskapen Viewbox, även om det är vanligt att lämna Viewbox inställt på standardvärdet. Som standard är Viewbox konfigurerad för att helt innehålla penselns innehåll. Mer information om hur du konfigurerar Viewboxfinns på egenskapssidan Viewbox.

Baspanelen

En TileBrush projicerar innehållet på en baspanel. Egenskapen Stretch styr hur TileBrush innehåll sträcks ut för att fylla basplattan. Egenskapen Stretch accepterar följande värden som definieras av Stretch uppräkning:

• None: Penselns innehåll är inte expanderat för att fylla plattan.

• Fill: Penselns innehåll skalas så att det passar plattan. Eftersom innehållets höjd och bredd skalas oberoende av varandra kanske det ursprungliga bildförhållandet för innehållet inte bevaras. Det vill säga, penselns innehåll kan förvrängas för att helt fylla utdataflisen.

• Uniform: Penselns innehåll skalas så att det får plats helt inom plattan. Innehållets proportioner bevaras.

• UniformToFill: Penselns innehåll skalas så att det helt fyller utdataområdet samtidigt som innehållets ursprungliga proportion bevaras.

Följande bild visar de olika inställningarna för Stretch.

I följande exempel anges innehållet i en ImageBrush så att det inte förlängs för att fylla outputområdet.

<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

Som standard genererar en TileBrush en enda panel (baspanelen) och sträcker ut panelen för att helt fylla utdataområdet. Du kan ändra storlek och position för baspanelen genom att ange egenskaperna Viewport och ViewportUnits.

Storlek på baspanel

Egenskapen Viewport avgör baspanelens storlek och position, och egenskapen ViewportUnits avgör om Viewport anges med hjälp av absoluta eller relativa koordinater. Om koordinaterna är relativa är de relativa till utdataområdets storlek. Punkten (0,0) representerar det övre vänstra hörnet i utdataområdet och (1,1) representerar det nedre högra hörnet i utdataområdet. Om du vill ange att egenskapen Viewport använder absoluta koordinater anger du egenskapen ViewportUnits till Absolute.

Följande bild visar skillnaden i resultat mellan en TileBrush med relativ kontra absolut ViewportUnits. Observera att var och en av illustrationerna visar ett kakelmönster. I nästa avsnitt beskrivs hur du anger kakelmönster.

I följande exempel används en bild för att skapa en panel som har en bredd och höjd på 50%. Basplattan finns på (0,0) i utdataområde.

<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

I nästa exempel anges plattorna på en ImageBrush till 25 gånger 25 enhetsoberoende pixlar. Eftersom ViewportUnits är absoluta är de ImageBrush plattorna alltid 25 x 25 bildpunkter, oavsett storleken på det område som målas.

<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

Tiling-beteende

En TileBrush skapar ett kaklat mönster när dess baspanel inte helt fyller utdataområdet och ett annat plattsättningsläge än None anges. När en panelborstes panel inte helt fyller utdataområdet anger dess egenskap TileMode om baspanelen ska dupliceras för att fylla utdataområdet och i så fall hur baspanelen ska dupliceras. Egenskapen TileMode accepterar följande värden som definieras av TileMode uppräkning:

• None: Endast baspanelen ritas.

• Tile: Baspanelen ritas och det återstående området fylls genom att baspanelen upprepas så att den högra kanten på en panel ligger intill den vänstra kanten av nästa, och på samma sätt för nedre och övre.

• FlipX: Samma som Tile, men varannan kolumn av plattor vänds horisontellt.

• FlipY: Samma som Tile, men alternativa rader med paneler vänds lodrätt.

• FlipXY: En kombination av FlipX och FlipY.

Följande bild illustrerar de olika plattsättningslägena.

I följande exempel används en bild för att måla en rektangel som är 100 bildpunkter bred och 100 bildpunkter hög. Genom att ställa in penselns Viewport till 0.0,0.25,0.25 görs penselns grundplatta till 1/4 av utdataområdet. Penselns TileMode är inställd på FlipXY. så att den fyller rektangeln med rader av plattor.

<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

Se även

• ImageBrush
• DrawingBrush
• VisualBrush
• TileBrush
• målning med bilder, ritningar och visuella objekt
• instruktionsämnen
• Översikt över frysbara objekt
• ImageBrush-exempel
• VisualBrush-exempel