Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
TileBrush-Objekte bieten Ihnen eine große Kontrolle darüber, wie ein Bereich mit einem Bild, Drawing oder Visual bemalt wird. In diesem Artikel wird beschrieben, wie Sie mit Hilfe von TileBrush-Features mehr Kontrolle darüber erhalten, wie eine ImageBrush-, DrawingBrush- oder VisualBrush-Klasse einen Bereich zeichnet.
Voraussetzungen
Um dieses Thema zu verstehen, ist es hilfreich, zu verstehen, wie Sie die grundlegenden Features der ImageBrush, DrawingBrushoder VisualBrush Klasse verwenden. Eine Einführung in diese Typen finden Sie unter Zeichnen mit Bildern, Zeichnungen und Visuals.
Zeichnen eines Bereichs mit Kacheln
ImageBrush, DrawingBrushsind VisualBrush Typen von TileBrush Objekten. Kacheleffekte bieten Ihnen gute Steuerungsmöglichkeiten für das Malen eines Bilds, einer Zeichnung oder eines Visuals in einem Bereich. Anstatt beispielsweise nur einen Bereich mit einem einzelnen gestreckten Bild zu zeichnen, können Sie einen Bereich mit einer Reihe von Bildkacheln zeichnen, die ein Muster erstellen.
Beim Zeichnen eines Bereichs mit einem Kacheleffekt spielen drei Komponenten eine Rolle: Inhalt, Basiskachel und Ausgabebereich.
Komponenten von TileBrush mit einer einzelnen Kachel
Komponenten einer TileBrush-Klasse mit einer TileMode-Kachel
Der Ausgabebereich ist der Bereich, der gezeichnet wird, z. B. die Fill eines Ellipse oder des Background eines Button. In den nächsten Abschnitten werden die beiden anderen Komponenten einer TileBrush.
Pinselinhalt
Es gibt drei verschiedene Typen von TileBrush, und jeder zeichnet mit einem anderen Inhaltstyp.
Wenn der Pinsel ein ImageBrush ist, ist dieser Inhalt ein Bild, die ImageSource-Eigenschaft gibt den Inhalt des ImageBrush an.
Wenn der Pinsel ein DrawingBrush ist, ist dieser Inhalt eine Zeichnung. Die Drawing-Eigenschaft gibt den Inhalt des DrawingBrush an.
Wenn der Pinsel ein VisualBrush ist, ist dieser Inhalt ein Bild. Die Visual-Eigenschaft gibt den Inhalt der VisualBrush-Klasse an.
Sie können die Position und Abmessungen des TileBrush-Inhalts mithilfe der Viewbox-Eigenschaft angeben, obwohl es üblich ist, die Viewbox auf dem Standardwert zu belassen. Standardmäßig ist die Viewbox-Eigenschaft so konfiguriert, dass sie den Inhalt des Pinsels vollständig enthält. Weitere Informationen zum Konfigurieren von Viewbox finden Sie auf der Viewbox-Eigenschaftenseite.
Basiskachel
TileBrush projiziert seinen Inhalt auf eine Grundkachel. Die Stretch-Eigenschaft steuert, wie der TileBrush-Inhalt gestreckt wird, um die Basiskachel zu füllen. Die Stretch-Eigenschaft akzeptiert die folgenden Werte, die durch die Stretch-Aufzählung definiert werden:
None: Der Inhalt des Pinsels wird nicht gestreckt, um die Kachel zu füllen.
Fill: Der Inhalt des Pinsels wird so skaliert, dass er in die Kachel passt. Da die Höhe und Breite des Inhalts unabhängig voneinander skaliert werden, bleibt das ursprüngliche Seitenverhältnis des Inhalts möglicherweise nicht erhalten. Der Inhalt des Pinsels wird möglicherweise verzerrt, um die Ausgabekachel vollständig auszufüllen.
Uniform: Der Inhalt des Pinsels wird skaliert, um vollständig auf die Kachel zu passen. Das Seitenverhältnis des Inhalts wird beibehalten.
UniformToFill: Der Inhalt des Pinsels wird so skaliert, dass er den Ausgabebereich vollständig ausfüllt, und das ursprüngliche Seitenverhältnisses des Inhalts wird beibehalten.
Die folgende Abbildung zeigt die unterschiedlichen Stretch-Einstellungen.
Im folgenden Beispiel wird der Inhalt einer ImageBrush-Klasse 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.
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
Eine TileBrush-Klasse generiert standardmäßig eine Kachel (die Basiskachel) und streckt die Kachel so, dass sie den Ausgabebereich vollständig ausfüllt. Sie können die Größe und Position der Basiskachel ändern, indem Sie die Eigenschaften Viewport und ViewportUnits festlegen.
Größe der Basiskachel
Die Viewport-Eigenschaft bestimmt die Größe und Position der Basiskachel, und die ViewportUnits-Eigenschaft bestimmt, ob die Viewport mit absoluten oder relativen Koordinaten angegeben wird. Wenn die Koordinaten relativ sind, sind sie relativ zur Größe des Ausgabebereichs. 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 Absolutefest.
Die folgende Abbildung zeigt den Unterschied in der Ausgabe zwischen einer TileBrush-Klasse mit einer relativen Ausgabe und einer ViewportUnits-Eigenschaft mit einer absoluten Ausgabe. Beachten Sie, dass die Abbildungen jeweils ein Kachelmuster zeigen; im nächsten Abschnitt wird beschrieben, wie Sie das Kachelmuster angeben.
Im folgenden Beispiel wird ein Bild verwendet, um eine Kachel zu erstellen, deren Breite und Höhe 50 Prozent entspricht. 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.
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
Im nächsten Beispiel werden die Kacheln eines ImageBrush auf 25 mal 25 geräteunabhängige Pixel gesetzt. Da ViewportUnits absolut sind, sind die ImageBrush-Kacheln immer 25 x 25 Pixel groß, unabhängig von der Größe des zu malenden Bereichs.
<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
Kachelverhalten
Eine TileBrush-Klasse generiert ein Kachelmuster, wenn die Basiskachel den Ausgabebereich nicht vollständig ausfüllt und ein anderer Kachelmodus als None angegeben ist. Wenn die Kachel eines Kachelpinsels den Ausgabebereich nicht vollständig ausfüllt, gibt die TileMode-Eigenschaft an, ob die Basiskachel dupliziert werden soll, um den Ausgabebereich auszufüllen, und wenn ja, wie die Basiskachel dupliziert werden soll. Die TileMode-Eigenschaft akzeptiert die folgenden Werte, die durch die TileMode-Aufzählung definiert werden:
None: Nur die Basiskachel wird gezeichnet.
Tile: Die Basiskachel wird gezeichnet, und der verbleibende Bereich wird ausgefüllt, indem die Basiskachel so wiederholt wird, dass die rechte Kante einer Kachel neben der linken Kante der nächsten liegt. Das gleiche Prinzip gilt für die untere und obere Kante.
FlipX: Identisch mit Tile mit der Ausnahme, dass jede zweite Kachelspalte horizontal gekippt wird.
FlipY: Identisch mit Tile mit der Ausnahme, dass jede zweite Kachelreihe vertikal gekippt wird.
Die folgende Abbildung veranschaulicht die verschiedenen Tilungsmodi.
Im folgenden Beispiel wird ein Bild verwendet, um ein Rechteck zu zeichnen, das 100 Pixel breit und 100 Pixel hoch ist. Durch Festlegen der Viewport-Eigenschaft des Pinsels auf 0,0,0.25,0.25 nimmt die Basiskachel des Pinsels ein Viertel des Ausgabebereichs ein. Der Pinsel TileMode ist auf FlipXYfestgelegt. Auf diese Weise wird das Rechteck mit Kachelreihen ausgefüllt.
<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
Siehe auch
Zusammenarbeit auf GitHub
Die Quelle für diesen Inhalt finden Sie auf GitHub, wo Sie auch Issues und Pull Requests erstellen und überprüfen können. Weitere Informationen finden Sie in unserem Leitfaden für Mitwirkende.
.NET Desktop feedback