Aracılığıyla paylaş


TileBrush Genel Bakışı

TileBrush nesneleri, 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 , DrawingBrushveya VisualBrush alanının nasıl boyandığı üzerinde daha fazla denetim elde etmek için özelliklerin nasıl ImageBrushkullanılacağı TileBrush açıklanmaktadır.

Ön koşullar

Bu konuyu anlamak için , DrawingBrushveya VisualBrush sınıfının temel özelliklerinin ImageBrushnası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, DrawingBrushnesne VisualBrush türleridir TileBrush . Kutucuk fırçaları, bir alanın resim, çizim veya görselle nasıl boyanmış olduğu ü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 components
Tek bir kutucukla TileBrush bileşenleri

Components of a tiled TileBrush
TileMode of Tile Ile TileBrush Bileşenleri

Çıkış alanı, Fill veya EllipseBackgroundButtongibi boyanmakta olan alandır. Sonraki bölümlerde bir TileBrushöğesinin 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 boyalar vardır.

özelliğini kullanarak Viewbox içeriğin konumunu ve boyutlarını TileBrush belirtebilirsiniz, ancak kümeyi Viewbox varsayılan değerine bırakmak yaygın bir durumdur. varsayılan olarak, Viewbox fırçanın içeriğini tamamen içerecek şekilde yapılandırılır. yapılandırma hakkında Viewboxdaha fazla bilgi için özellik sayfasına bakın Viewbox .

Temel Kutucuk

Bir TileBrush , içeriğini bir temel kutucuğa projeler. özelliği, Stretch içeriğin temel kutucuğu dolduracak şekilde nasıl TileBrush genişletilmesini denetler. Stretch özelliği, sabit listesi tarafından Stretch 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 kutucuğa 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, kutucuğa tamamen 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.

Different TileBrush Stretch settings

Aşağıdaki örnekte, bir ImageBrush öğesinin içeriği çıkış alanını dolduracak şekilde genişletilmeyecek şekilde ayarlanmıştır.

<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. ve özelliklerini ayarlayarak Viewport temel kutucuğun boyutunu ve ViewportUnits konumunu değiştirebilirsiniz.

Temel Kutucuk Boyutu

Viewport özelliği temel kutucuğun boyutunu ve konumunu belirler ve özelliği ise öğesinin ViewportUnits mutlak veya göreli koordinatlar kullanılarak belirtilip belirtilmedidiğini Viewport 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. Özelliğin Viewport mutlak koordinatlar kullandığını belirtmek için özelliğini olarak AbsoluteayarlayınViewportUnits.

Aşağıdaki çizimde, göreli ile mutlak ViewportUnitsarasındaki TileBrush çı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.

Absolute and Relative Viewport Units

Aşağıdaki örnekte, genişliği ve yüksekliği %50 olan bir kutucuk oluşturmak için bir görüntü kullanılmıştı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 cihazın kutucuklarını 25 x 25 cihazdan bağımsız piksel olarak ayarlar. ViewportUnits mutlak olduğundan, boyanmakta olan ImageBrush alanın boyutu ne olursa olsun 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ışı

, TileBrush temel kutucuğu çıkış alanını tamamen doldurmadığında ve daha sonra None başka bir döşeme modu belirtildiğinde kutucuklu bir desen üretir. Bir kutucuk fırçasının kutucuğu çıkış alanını tamamen doldurmadığında, TileMode özelliği temel kutucuğun çıkış alanını doldurmak için çoğaltılıp çoğaltılmayacağını ve bu durumda temel kutucuğun nasıl yinelenmesi gerektiğini belirtir. TileMode özelliği, sabit listesi tarafından TileMode tanımlanan aşağıdaki değerleri kabul eder:

  • None: Yalnızca temel kutucuk ç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 de yinelenerek doldurulur.

  • FlipX: ile aynıdır Tile, ancak alternatif kutucuk sütunları yatay olarak çevrilmiş olur.

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

  • FlipXY: ve FlipYbirleşimiFlipX.

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

Different TileBrush TileMode settings

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 taban kutucuğu 0,0,0,0,25,0,25 olarak ayarlandığında, fırçanın taban kutucuğu çıkış alanının 1/4'ünün olacak şekilde yapılır. Fırçalar TileMode olarak FlipXYayarlanır. böylece dikdörtgeni kutucuk 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.