Übersicht über TileBrush

Artikel
08/10/2011

TileBrush-Objekte bieten Ihnen umfangreiche Steuerungsmöglichkeiten beim Zeichnen eines Bereichs mit einem Bild, einer Drawing oder einem Visual. In diesem Thema wird die Verwendung der TileBrush-Features beschrieben, um besser steuern zu können, wie ein ImageBrush, DrawingBrush oder VisualBrush einen Bereich zeichnet.

Dieses Thema enthält folgende Abschnitte.

Erforderliche Komponenten
Zeichnen eines Bereichs mit Kacheln
Pinselinhalt
Basiskachel
Verwandte Abschnitte

Erforderliche Komponenten

Für dieses Thema sollten Sie mit der Verwendung der grundlegenden Features der Klassen ImageBrush, DrawingBrush oder VisualBrush vertraut sein. Eine Einführung in diese Typen finden Sie unter Zeichnen mit Bildern, Zeichnungen und visuellen Elementen.

Zeichnen eines Bereichs mit Kacheln

ImageBrush, DrawingBrush und VisualBrush sind Typen von TileBrush-Objekten. TileBrush-Objekte bieten Ihnen umfangreiche Steuerungsmöglichkeiten beim Zeichnen eines Bereichs mit einem Bild, einer Zeichnung oder einem visuellen Element. Sie können beispielsweise zum Zeichnen eines Bereichs anstelle eines einzelnen gestreckten Bilds eine Reihe von Bildkacheln verwenden, die ein Muster ergeben.

Wenn Sie einen Bereich mit einem TileBrush zeichnen, verwenden Sie drei Komponenten: Inhalt, Basiskachel und Ausgabebereich.

Komponenten eines TileBrush mit einer einzelnen Kachel

TileBrush-Komponenten

Komponenten eines TileBrush mit dem TileMode Tile

Komponenten eines gekachelten TileBrush

Der Ausgabebereich ist der gezeichnete Bereich, z. B. die Fill einer Ellipse oder der Background eines Button-Elements. In den nächsten Abschnitten werden die anderen zwei Komponenten eines TileBrush beschrieben.

Pinselinhalt

Es gibt drei verschiedene Typen von TileBrush, und jeder zeichnet mit einem anderen Inhaltstyp.

Wenn der Pinsel ein ImageBrush ist, handelt es sich beim Inhalt um ein Bild. Die ImageSource-Eigenschaft legt den Inhalt für den ImageBrush fest.
Wenn der Pinsel ein DrawingBrush ist, handelt es sich beim Inhalt um eine Zeichnung. Die Drawing-Eigenschaft gibt den Inhalt des DrawingBrush an.
Wenn der Pinsel ein VisualBrush ist, handelt es sich beim Inhalt um ein visuelles Element. Die Visual-Eigenschaft gibt den Inhalt des VisualBrush an.

Mit der Viewbox-Eigenschaft können Sie Position und Abmessungen des TileBrush-Inhalts angeben. Für Viewbox wird jedoch in der Regel der Standardwert festgelegt. Standardmäßig wird Viewbox so konfiguriert, dass der Inhalt des Pinsels vollständig enthalten ist. Weitere Informationen zum Konfigurieren von Viewbox finden Sie auf der Eigenschaftenseite für Viewbox.

Basiskachel

Bei einem TileBrush wird der Inhalt auf einer Basiskachel aufgebaut. Die Stretch-Eigenschaft steuert, wie der TileBrush-Inhalt gestreckt wird, um die Basiskachel auszufüllen. Die Stretch-Eigenschaft akzeptiert die folgenden Werte, die von der Stretch-Enumeration definiert werden:

None: Der Inhalt des Pinsels wird nicht gestreckt, um die Kachel auszufüllen.
Fill: Der Inhalt des Pinsels wird skaliert und an die Kachel angepasst. Da Höhe und Breite des Inhalts unabhängig voneinander skaliert werden, wird das ursprüngliche Seitenverhältnis des Inhalts möglicherweise nicht beibehalten. Dies bedeutet, dass der Inhalt des Pinsels möglicherweise verzerrt wird, um die Ausgabekachel vollständig auszufüllen.
Uniform: Der Inhalt des Pinsels wird skaliert, damit er vollständig in die Kachel passt. Das Seitenverhältnis des Inhalts wird beibehalten.
UniformToFill: Der Inhalt des Pinsels wird so skaliert, dass er den Ausgabebereich vollständig ausfüllt. Das ursprüngliche Seitenverhältnis wird jedoch beibehalten.

In der folgenden Abbildung werden die unterschiedlichen Stretch-Einstellungen veranschaulicht.

Unterschiedliche TileBrush-Dehneinstellungen

Im folgenden Beispiel wird ein ImageBrush-Inhalt so festgelegt, dass er nicht gestreckt wird, um den Ausgabebereich auszufüllen.

<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.
            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

// 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;

Standardmäßig erstellt ein TileBrush eine einzelne Kachel (die Basiskachel) und streckt diese Kachel, um den Ausgabebereich vollständig auszufüllen. Sie können Größe und Position der Basiskachel ändern, indem Sie die Eigenschaften Viewport und ViewportUnits festlegen.

Größe der Basiskachel

Die Viewport-Eigenschaft bestimmt Größe und Position der Basiskachel, und die ViewportUnits-Eigenschaft bestimmt, ob Viewport mit absoluten oder relativen Koordinaten angegeben wird. Wenn die Koordinaten relativ sind, werden sie relativ zur Größe des Ausgabebereichs angegeben. Der Punkt (0,0) stellt die obere linke Ecke des Ausgabebereichs dar, und (1,1) stellt die untere rechte Ecke des Ausgabebereichs dar. Um anzugeben, dass die Viewport-Eigenschaft absolute Koordinaten verwendet, legen Sie die ViewportUnits-Eigenschaft auf Absolute fest.

Die folgende Abbildung zeigt den Unterschied in der Ausgabe zwischen einem TileBrush mit relativen und einem anderen mit absoluten ViewportUnits an. Beachten Sie, dass in beiden Abbildungen ein gekacheltes Muster angezeigt wird. Im nächsten Abschnitt wird beschrieben, wie Kachelmuster angegeben werden.

Absolute und relative Viewport-Einheiten

Im folgenden Beispiel wird ein Bild zum Erstellen einer Kachel mit einer Breite und Höhe von 50 % verwendet. Die Basiskachel befindet sich bei (0,0) des Ausgabebereichs.

<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.
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

// 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;

Im nächsten Beispiel werden die Kacheln von einem ImageBrush auf 25 mal 25 geräteunabhängige Pixel festgelegt. Da es sich bei ViewportUnits um absolute Werte handelt, haben die ImageBrush-Kacheln unabhängig von der Größe des Bereichs, der gezeichnet wird, immer eine Größe von 25 mal 25 Pixel.

<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.
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

// 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;

Kachelverhalten

Ein TileBrush erzeugt ein Kachelmuster, wenn die Basiskachel den Ausgabebereich nicht vollständig ausfüllt und ein anderer Kachelmodus als None angegeben ist. Wenn eine TileBrush-Kachel den Ausgabebereich nicht vollständig ausfüllt, gibt seine TileMode-Eigenschaft an, ob die Basiskachel dupliziert werden soll, um den Ausgabebereich auszufüllen, und wie die Basiskachel in diesem Fall dupliziert wird. Die TileMode-Eigenschaft akzeptiert die folgenden Werte, die von der TileMode-Enumeration definiert werden:

None: Nur die Basiskachel wird gezeichnet.
Tile: Die Basiskachel wird gezeichnet, und der verbleibende Bereich wird ausgefüllt, indem die Basiskachel wiederholt wird, sodass die rechte Ecke einer Kachel an die linke Ecke der nächsten Kachel angrenzt. Das gleiche Prinzip gilt für oben und unten.
FlipX: Wie Tile, jedoch wird jede zweite Kachelspalte horizontal gekippt.
FlipY: Wie Tile, jedoch wird jede zweite Kachelzeile vertikal gekippt.
FlipXY: Eine Kombination von FlipX und FlipY.

In der folgenden Abbildung werden die unterschiedlichen Kachelmodi veranschaulicht.

Unterschiedliche TileBrush-TileMode-Einstellungen

Im folgenden Beispiel wird mithilfe eines Bilds ein Rechteck gezeichnet, das 100 Pixel breit und 100 Pixel hoch ist. Wenn der Viewport des Pinsels auf 0,0,0.25,0.25 festgelegt wurde, beträgt die Größe der Basiskachel 1/4 des Ausgabebereichs. Die TileMode-Eigenschaft des Pinsels ist auf FlipXY festgelegt, sodass das Rechteck mit Kachelzeilen ausgefüllt wird.

<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.
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

// 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;

Siehe auch

Freigeben über

Übersicht über TileBrush

Erforderliche Komponenten

Zeichnen eines Bereichs mit Kacheln

Pinselinhalt

Basiskachel

Größe der Basiskachel

Kachelverhalten

Siehe auch

Referenz

Konzepte

Weitere Ressourcen

Zusätzliche Ressourcen