Aracılığıyla paylaş


TileBrush'a Genel Bakış

TileBrush nesneler, bir alanın bir görüntü, Drawingveya Visualile nasıl boyanmış olduğu üzerinde size çok fazla denetim sağlar. Bu konu başlığında, bir ImageBrush, DrawingBrushveya VisualBrush bir alanı nasıl boyadığı üzerinde daha fazla denetim sahibi olmak için TileBrush özelliklerinin nasıl kullanılacağı açıklanmaktadır.

Önkoşullar

Bu konuyu anlamak için, ImageBrush, DrawingBrushveya VisualBrush sınıfının temel özelliklerinin nasıl kullanılacağını anlamak yararlı olur. Bu türlere giriş için bkz. Resimler, Çizimler ve Görsellerle Boyama.

Bir Alanı Kutucuklarla Boyama

ImageBrush, DrawingBrush, VisualBrush türleridir TileBrush nesneleri. Karo fırçaları, bir alanın bir resim, çizim veya görsel ile nasıl boyandığı üzerinde çok fazla denetim sağlar. Örneğin, bir alanı tek bir esnetilmiş görüntüyle boyamak yerine, desen oluşturan bir dizi resim kutucuklu bir alanı boyayabilirsiniz.

Bir alanı kutucuk fırçasıyla boyama üç bileşenden oluşur: içerik, temel kutucuk ve çıkış alanı.

TileBrush bileşenlerini
Tek bir kare içeren bir TileBrush'ın bileşenleri

Bir kiremitli TileBrush'un bileşenleri
TileMode of Tile Ile TileBrush Bileşenleri

Çıkış alanı, bir Ellipse'in Fill'ı veya bir Button'ün Background'si gibi boyanmakta olan alandır. Sonraki bölümlerde bir TileBrush'nun diğer iki bileşeni açıklanmaktadır.

Fırça İçeriği

Üç farklı tür TileBrush vardır ve her biri farklı türde içeriğe sahip olur.

Viewbox varsayılan değerine ayarlanması yaygın olsa da, Viewbox özelliğini kullanarak TileBrush içeriğin konumunu ve boyutlarını belirtebilirsiniz. Varsayılan olarak, Viewbox fırçanın içeriğini tamamen içerecek şekilde yapılandırılır. Viewboxyapılandırma hakkında daha fazla bilgi için Viewbox özellik sayfasına bakın.

Temel Karo

Bir TileBrush içeriğini bir temel kareye yansıtır. Stretch özelliği, TileBrush içeriğin temel kutucuğu dolduracak şekilde nasıl uzatılacağını denetler. Stretch özelliği, Stretch numaralandırması tarafından tanımlanan aşağıdaki değerleri kabul eder:

  • None: Fırçanın içeriği kutucuğu dolduracak şekilde uzatılmaz.

  • Fill: Fırçanın içeriği kareye uyacak şekilde ölçeklendirilir. İçeriğin yüksekliği ve genişliği bağımsız olarak ölçeklendirildiğinden, içeriğin özgün en boy oranı korunmayabilir. Başka bir ifadeyle, çıktı kutucuğunu tamamen doldurmak için fırçanın içeriği çarpıtılmış olabilir.

  • Uniform: Fırçanın içeriği tamamen kutucuğa sığacak şekilde ölçeklendirilir. İçeriğin en boy oranı korunur.

  • UniformToFill: Fırçanın içeriği, içeriğin özgün en boy oranını korurken çıkış alanını tamamen dolduracak şekilde ölçeklendirilir.

Aşağıdaki görüntüde farklı Stretch ayarları gösterilmektedir.

Farklı TileBrush Esnetme ayarları

Aşağıdaki örnekte, bir ImageBrush'nin içeriği çıkış alanını doldurmayacak şekilde belirlenmiştir.

<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

Varsayılan olarak, bir TileBrush tek bir kutucuk (temel kutucuk) oluşturur ve bu kutucuğu çıkış alanını tamamen dolduracak şekilde genişletir. Viewport ve ViewportUnits özelliklerini ayarlayarak temel kutucuğun boyutunu ve konumunu değiştirebilirsiniz.

Temel Karot Boyutu

Viewport özelliği temel kutucuğun boyutunu ve konumunu belirler ve ViewportUnits özelliği, Viewport mutlak veya göreli koordinatlar kullanılarak belirtilip belirtilmedidiğini belirler. Koordinatlar göreliyse, çıkış alanının boyutuna göre belirlenir. Nokta (0,0), çıkış alanının sol üst köşesini ve (1,1) çıkış alanının sağ alt köşesini temsil eder. Viewport özelliğinin mutlak koordinatları kullandığını belirtmek için ViewportUnits özelliğini Absoluteolarak ayarlayın.

Aşağıdaki çizimde göreli ve mutlak ViewportUnitsolan bir TileBrush arasındaki çıkış farkı gösterilmektedir. Çizimlerin her birinde kutucuklu desen gösterildiğine dikkat edin; sonraki bölümde kutucuk deseninin nasıl belirtileceğini açıklanmaktadır.

Mutlak ve Göreli Görünüm Penceresi Birimleriabsolute_and_relative_viewports

Aşağıdaki örnekte, genişliği ve yüksekliği 50%olan bir kutucuk oluşturmak için bir görüntü kullanılır. Temel kutucuk çıkış alanının (0,0) konumunda bulunur.

<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

Sonraki örnek, bir ImageBrush kutucuklarını 25 x 25 cihazdan bağımsız piksel olarak ayarlar. ViewportUnits mutlak olduğundan, boyanmakta olan alanın boyutu ne olursa olsun ImageBrush kutucukları her zaman 25 x 25 pikseldir.

<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

Döşeme Davranışı

Bir TileBrush, ana karosu çıkış alanını tamamen doldurmadığında ve döşeme modu None dışında başka bir döşeme modu belirlendiğinde, kutucuklu bir desen oluşturur. Bir fayans fırçasının fayansı çıkış alanını tamamen doldurmadığında, TileMode özelliği temel fayansın çıkış alanını doldurmak için çoğaltılıp çoğaltılmayacağını ve eğer çoğaltılacaksa, nasıl çoğaltılacağını belirtir. TileMode özelliği, TileMode numaralandırması tarafından tanımlanan aşağıdaki değerleri kabul eder:

  • None: Yalnızca temel karo çizilir.

  • Tile: Temel kutucuk çizilir ve kalan alan, bir kutucuğun sağ kenarı bir sonrakinin sol kenarına bitişik olacak şekilde ve benzer şekilde alt ve üst için taban kutucuğu yinelenerek doldurulur.

  • FlipX: Tileile aynıdır, ancak alternatif karo sütunları yatay olarak çevrilmiştir.

  • FlipY: Tileile aynıdır, ancak alternatif kutucuk satırları dikey olarak çevrilir.

  • FlipXY: FlipX ve FlipYbirleşimi.

Aşağıdaki görüntüde farklı döşeme modları gösterilmektedir.

Farklı TileBrush TileMode ayarlarınıimg_mmgraphics_tilemodes

Aşağıdaki örnekte, 100 piksel genişliğinde ve 100 piksel uzunluğunda bir dikdörtgeni boyamak için bir görüntü kullanılmıştır. Fırçanın Viewport ayarı 0.0,0.25,0.25 değerlerine ayarlandığında, fırçanın taban karosu çıkış alanının dörtte biri olacak şekilde ayarlanır. Fırçanın TileModeFlipXYolarak ayarlanır. böylece dikdörtgeni karo satırlarıyla doldurur.

<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

Ayrıca bkz.