TileBrush の概要

TileBrush オブジェクトを使用すると、領域をイメージ、 Drawing、または Visualで描画する方法を大きく制御できます。 このトピックでは、 TileBrush 機能を使用して、領域の ImageBrush、 DrawingBrush、または VisualBrush の描画方法をより詳細に制御する方法について説明します。

[前提条件]

このトピックを理解するには、 ImageBrush、 DrawingBrush、または VisualBrush クラスの基本的な機能を使用する方法を理解すると便利です。 これらの種類の概要については、「 イメージ、描画、およびビジュアルを使用した描画」を参照してください。

タイルを使用した領域の描画

ImageBrush DrawingBrushは、VisualBrushオブジェクトの種類のTileBrushです。 タイル ブラシを使用すると、領域をイメージ、描画、またはビジュアルで描画する方法を大幅に制御できます。 たとえば、1 つのストレッチ イメージで領域を塗りつぶすのではなく、パターンを作成する一連のイメージ タイルで領域を塗りつぶすことができます。

タイル ブラシを使用して領域を描画するには、コンテンツ、基本タイル、出力領域の 3 つのコンポーネントが含まれます。

1 つのタイルを持つ TileBrush のコンポーネント

TileMode of Tile を使用した TileBrush のコンポーネント

出力領域は、FillのEllipseやBackgroundのButtonなど、塗りつぶされる領域です。 次のセクションでは、 TileBrushの他の 2 つのコンポーネントについて説明します。

ブラシの内容

TileBrushには 3 種類あり、それぞれ異なる種類のコンテンツを持つペイントがあります。

• ブラシが ImageBrushの場合、このコンテンツはイメージです。 ImageSource プロパティは、 ImageBrushの内容を指定します。

• ブラシが DrawingBrushの場合、このコンテンツは図面です。 Drawing プロパティは、DrawingBrushの内容を指定します。

• ブラシが VisualBrushの場合、このコンテンツはビジュアルです。 Visual プロパティは、VisualBrushの内容を指定します。

TileBrush プロパティを使用してViewboxコンテンツの位置と寸法を指定できますが、Viewboxは既定値のままにするのが一般的です。 既定では、 Viewbox はブラシの内容を完全に含むよう構成されています。 Viewboxの構成の詳細については、「Viewboxプロパティ」ページを参照してください。

基本タイル

TileBrushは、そのコンテンツを基本タイルに投影します。 Stretch プロパティは、TileBrush コンテンツを基本タイルに合わせて拡大する方法を制御します。 Stretch プロパティは、Stretch 列挙体によって定義された次の値を受け入れます。

• None: ブラシの内容はタイルを埋めるために引き伸ばされません。

• Fill:ブラシのコンテンツがタイルに合わせて拡大縮小されます。 コンテンツの高さと幅は個別に拡大縮小されるため、コンテンツの元の縦横比が保持されない場合があります。 つまり、出力タイルを完全に塗りつぶすために、ブラシのコンテンツが歪んでいる可能性があります。

• Uniform:ブラシのコンテンツは、タイル内に完全に収まるように拡大縮小されます。 コンテンツの縦横比は保持されます。

• UniformToFill:ブラシのコンテンツは、コンテンツの元の縦横比を維持しながら、出力領域を完全に埋めるようにスケーリングされます。

次の図は、さまざまな Stretch 設定を示しています。

次の例では、ImageBrush の内容が出力領域を埋めないように設定されています。

<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

既定では、 TileBrush は 1 つのタイル (基本タイル) を生成し、そのタイルを引き伸ばして出力領域を完全に埋めます。 基本タイルのサイズと位置は、 Viewport プロパティと ViewportUnits プロパティを設定することで変更できます。

基本タイル サイズ

Viewport プロパティは基本タイルのサイズと位置を決定し、ViewportUnits プロパティは絶対座標と相対座標のどちらを使用してViewportを指定するかを決定します。 座標が相対座標の場合は、出力領域のサイズに対して相対的になります。 ポイント (0,0) は出力領域の左上隅を表し、(1,1) は出力領域の右下隅を表します。 Viewport プロパティで絶対座標を使用するように指定するには、ViewportUnits プロパティを Absolute に設定します。

次の図は、相対TileBrushと絶対ViewportUnitsの出力の違いを示しています。 図はそれぞれタイルパターンを示していることに注意してください。次のセクションでは、タイル パターンを指定する方法について説明します。

次の例では、幅と高さが 50%のタイルを作成するためにイメージを使用します。 ベース タイルは、出力領域の (0,0) にあります。

<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

次の例では、 ImageBrush のタイルを 25 x 25 デバイスに依存しないピクセルに設定します。 ViewportUnitsは絶対であるため、塗りつぶす領域のサイズに関係なく、ImageBrushタイルは常に 25 x 25 ピクセルです。

<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

タイリング挙動

TileBrushは、基本タイルが出力領域を完全に埋めない場合に、None以外のタイリングモードが指定されていると、タイルパターンを生成します。 タイル ブラシのタイルが出力領域を完全に塗りつぶさない場合、その TileMode プロパティは、出力領域を埋めるために基本タイルを複製するかどうかを指定し、その場合はベース タイルを複製する方法を指定します。 TileMode プロパティは、TileMode 列挙体によって定義された次の値を受け入れます。

• None: 基本タイルのみが描画されます。

• Tile:基本タイルが描画され、残りの領域は、1 つのタイルの右端が次のタイルの左端に隣接するように基本タイルを繰り返すことによって塗りつぶされます。同様に、下と上に対して同様です。

• FlipX: Tileと同じですが、タイルの列が交互に水平方向に反転されます。

• FlipY: Tileと同じですが、タイルは1行おきに垂直に反転されます。

• FlipXY: FlipX と FlipYの組み合わせ。

次の図は、さまざまなタイリング モードを示しています。

次の例では、画像を使用して、幅 100 ピクセル、高さ 100 ピクセルの四角形を描画します。 ブラシの Viewport を 0,0,0.25,0.25 に設定すると、ブラシのベース タイルは出力領域の 1/4 になります。 ブラシの TileMode は FlipXYに設定されます。 四角形の中にタイルの列を埋めるようにします。

<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

こちらも参照ください

• ImageBrush
• DrawingBrush
• VisualBrush
• TileBrush
• 画像、イラスト、視覚要素を用いた描画
• 使い方に関するトピック
• フリーズ可能オブジェクトの概要
• ImageBrush のサンプル
• VisualBrush のサンプル