TileBrush Genel Bakışı

TileBrush nesneler, bir alanın bir görüntü, veya ile nasıl boyandığı hakkında harika bir denetim sağlar DrawingVisual . Bu konu başlığı altında TileBrush , bir alanın nasıl, veya nasıl boyar üzerinde daha fazla denetim elde etmek için özelliklerinin nasıl kullanılacağı açıklanmaktadır ImageBrushDrawingBrushVisualBrush .

Önkoşullar

Bu konuyu anlamak için,, veya sınıfının temel özelliklerinin nasıl kullanıldığını anlamak yararlı olur ImageBrushDrawingBrushVisualBrush . Bu türlere giriş için görüntüler, çizimler ve görsellerle boyamabölümüne bakın.

Döşeme ile bir alanı boyama

ImageBrush, DrawingBrush ,, VisualBrushTileBrush nesne türleridir. Kutucuk fırçaları, bir alanın görüntü, çizim veya görsel ile nasıl boyandığı hakkında harika bir denetim sağlar. Örneğin, yalnızca tek bir uzatılmış görüntüyle bir alanı boyamak yerine, bir model oluşturan bir dizi görüntü kutucuğa sahip bir alanı boyayabilirsiniz.

Bir kutucuk fırçası ile bir alanı boyamak üç bileşenden oluşur: içerik, taban kutucuk ve çıktı alanı.

TileBrush components
Tek bir kutucuğa sahip bir TileBrush bileşenleri

Components of a tiled TileBrush
Kutucuğun bir TileMode ile TileBrush bileşenleri

Çıktı alanı, ' ın veya ' nin, boyanmış olduğu alandır FillEllipseBackgroundButton . Sonraki bölümlerde, öğesinin diğer iki bileşeni açıklanır TileBrush .

Fırça Içeriği

Üç farklı tür vardır TileBrush ve her biri farklı bir içerik türüyle boyar.

Özelliğini kullanarak içeriğin konumunu ve boyutlarını belirtebilir TileBrushViewbox , ancak Viewbox varsayılan değer olarak kümeyi bırakmak yaygın olsa da. 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 daha fazla bilgi için Viewbox , bkz Viewbox . Özellik sayfası.

Temel kutucuk

Bir TileBrush proje içeriğini temel bir kutucuğa sürükleyin. StretchÖzelliği, TileBrush içeriğin temel kutucuğu doldurmak için nasıl uzatılacağını denetler. StretchÖzelliği, sabit listesi tarafından tanımlanan aşağıdaki değerleri kabul eder Stretch :

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

  • 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çeklendiği için içeriğin özgün en boy oranı korunmayabilir. Diğer bir deyişle, çıkış kutucuğunu tamamen dolduracak şekilde fırçanın içeriği çarpıtılmış olabilir.

  • Uniform: Fırçanın içeriği kutucuk içinde 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, öğesinin içeriği ImageBrush Çıkış alanını dolduracak şekilde uzatılmaması için ayarlanı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 döşeme (temel kutucuk) oluşturur ve çıkış alanını tamamen doldurmak için bu kutucuğu uzatır. Ve özelliklerini ayarlayarak taban kutucuğunun boyutunu ve konumunu değiştirebilirsiniz ViewportViewportUnits .

Taban kutucuk boyutu

ViewportÖzelliği, taban döşemenin boyutunu ve konumunu belirler ve ViewportUnits özelliği Viewport mutlak veya göreli koordinatları kullanılarak belirtilen şekilde belirlenir. Koordinatlar göreli ise, çıkış alanının boyutuna göre değişir. Nokta (0, 0) çıkış alanının sol üst köşesini temsil eder ve (1, 1) çıkış alanının sağ alt köşesini temsil eder. ViewportÖzelliğin mutlak koordinatları kullandığını belirtmek için ViewportUnits özelliğini olarak ayarlayın Absolute .

Aşağıdaki çizimde, ile göreli ve mutlak arasındaki çıkışdaki çıktıda fark gösterilmektedir TileBrushViewportUnits . Çizimlerin her birinin döşeli bir model gösterdiğ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, %50 genişliğine ve yüksekliğe sahip 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 örnekte, a 'nın kutucukları 25 ImageBrush cihazdan bağımsız piksel olarak ayarlanır. Mutlak olduğundan ViewportUnits , ImageBrush boyanmış olan alanın boyutundan bağımsız olarak kutucuklar her zaman 25 pikselden oluşur.

<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 bir döşeme modu belirtildiğinde döşeli bir desen üretir None . Bir kutucuk fırçasının kutucuğu çıkış alanını tamamen doldurmadığında, TileMode özelliği temel kutucuğun çıkış alanını dolduracak şekilde çoğaltılıp çoğaltılmayacağını ve bu durumda temel kutucuğun nasıl çoğaltılıp çoğaltılmadığını belirtir. TileModeÖzelliği, sabit listesi tarafından tanımlanan aşağıdaki değerleri kabul eder TileMode :

  • None: Yalnızca temel kutucuk çizilir.

  • Tile: Temel kutucuk çizilir ve kalan alan, bir kutucuğun sağ kenarı bir sonraki sol kenarına bitişik ve benzer şekilde alt ve üst olmak üzere, taban kutucuğu tekrarlayarak doldurulur.

  • FlipX: İle aynıdır Tile , ancak diğer kutucuk sütunları yatay olarak çevrilmiş.

  • FlipY: İle aynıdır Tile , ancak diğer kutucuk satırları dikey olarak çevrilmiş.

  • FlipXY: FlipX Ve birleşimi FlipY .

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 yüksekliğinde bir dikdörtgeni boyamak için bir görüntü kullanılır. Fırçanın Viewport 0, 0, 0,25, 0,25 olarak ayarlanması, fırçanın taban kutucuğunun çıkış alanının 1/4 olması halinde yapılır. Fırça, TileMode olarak ayarlanır FlipXY . Böylece dikdörtgeni kutucuk satırlarıyla dolduracaktır.

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