TileBrush – přehled

TileBrush objekty poskytují velkou kontrolu nad tím, jak je oblast malována obrázkem, Drawingnebo Visual. Toto téma popisuje, jak pomocí funkcí TileBrush získat větší kontrolu nad tím, jak ImageBrush, DrawingBrushnebo VisualBrush maluje oblast.

Požadavky

Abyste pochopili toto téma, je užitečné pochopit, jak používat základní funkce ImageBrush, DrawingBrushnebo VisualBrush třídy. Úvod k těmto typům najdete v tématu Malování s obrázky, výkresy a vizuály.

Obkládání oblasti dlaždicemi

ImageBrush, DrawingBrush, jsou typy VisualBrush objektů TileBrush. Štětce dlaždic vám poskytují značnou kontrolu nad tím, jak je oblast malována pomocí obrázku, výkresu nebo vizuálu. Místo pouhého malování oblasti s jedním roztaženým obrázkem můžete například nakreslit oblast řadou dlaždic obrázků, které vytvářejí vzor.

Malování oblasti pomocí štětce na dlaždice zahrnuje tři komponenty: obsah, základní dlaždici a výstupní oblast.

Komponenty
Komponenty TileBrush s jednou dlaždicí

Součásti dlaždicového TileBrushe
Komponenty TileBrush s režimem dlaždic Tile

Výstupní oblast je oblast, která se maluje, například FillEllipse nebo BackgroundButton. Další části popisují dvě další součásti TileBrush.

Obsah štětce

Existují tři různé typy TileBrush a každý pracuje s jiným typem obsahu.

• Pokud je štětec ImageBrush, tento obsah je obrázek. Vlastnost ImageSource určuje obsah ImageBrush.

• Pokud je štětec DrawingBrush, jedná se o výkres. Vlastnost Drawing určuje obsah DrawingBrush.

• Pokud je štětec VisualBrush, jedná se o vizuální obsah. Vlastnost Visual určuje obsah VisualBrush.

Umístění a rozměry obsahu TileBrush můžete zadat pomocí vlastnosti Viewbox, i když je běžné ponechat Viewbox nastavenou na výchozí hodnotu. Ve výchozím nastavení je Viewbox nakonfigurováno tak, aby zcela obsahovalo obsah štětce. Další informace o konfiguraci Viewboxnaleznete na stránce vlastností Viewbox.

Základní dlaždice

TileBrush svůj obsah promítá na základní dlaždici. Vlastnost Stretch určuje, jak je obsah TileBrush roztažený tak, aby vyplnil základní dlaždici. Vlastnost Stretch přijímá následující hodnoty definované Stretch výčtem:

• None: Obsah štětce není roztažený tak, aby vyplnil dlaždici.

• Fill: Obsah štětce se škáluje tak, aby odpovídal dlaždici. Vzhledem k tomu, že výška a šířka obsahu se škálují nezávisle, nemusí být zachován původní poměr stran obsahu. To znamená, že obsah štětce může být deformován, aby se dlaždice výstupu zcela vyplnila.

• Uniform: Obsah štětce se škáluje tak, aby se zcela vešel do dlaždice. Poměr stran obsahu se zachová.

• UniformToFill: Obsah štětce se škáluje tak, aby zcela vyplnil výstupní oblast při zachování původního poměru stran obsahu.

Následující obrázek znázorňuje různá nastavení Stretch.

V následujícím příkladu je obsah ImageBrush nastaven tak, aby nezasahoval do výstupní oblasti.

<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

Ve výchozím nastavení TileBrush vygeneruje jednu dlaždici (základní dlaždici) a roztáhne ji tak, aby zcela vyplnila výstupní oblast. Velikost a umístění základní dlaždice můžete změnit nastavením vlastností Viewport a ViewportUnits.

Velikost základní dlaždice

Vlastnost Viewport určuje velikost a umístění základní dlaždice a vlastnost ViewportUnits určuje, zda je Viewport zadán pomocí absolutních nebo relativních souřadnic. Pokud jsou souřadnice relativní, jsou relativní vzhledem k velikosti výstupní oblasti. Bod (0,0) představuje levý horní roh výstupní oblasti a (1,1) představuje pravý dolní roh výstupní oblasti. Chcete-li určit, že vlastnost Viewport používá absolutní souřadnice, nastavte vlastnost ViewportUnits na Absolute.

Následující obrázek ukazuje rozdíl ve výstupu mezi TileBrush s relativním a absolutním ViewportUnits. Všimněte si, že jednotlivé ilustrace zobrazují dlaždicový vzor; Další část popisuje, jak určit vzor dlaždice.

V následujícím příkladu se obrázek používá k vytvoření dlaždice, která má šířku a výšku 50%. Základní dlaždice se nachází v oblasti výstupu (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

Další příklad nastaví dlaždice ImageBrush na 25 krát 25 pixelů nezávislých na zařízení. Vzhledem k tomu, že ViewportUnits jsou absolutní, jsou dlaždice ImageBrush vždy 25× 25 pixelů bez ohledu na velikost plochy, která se maluje.

<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

Chování při skládání

TileBrush vytvoří dlaždicový vzor, když jeho základní dlaždice zcela nevyplní výstupní oblast, a je zadán jiný režim než None. Pokud dlaždice štětce zcela nevyplní výstupní oblast, její vlastnost TileMode určuje, zda má být základní dlaždice duplikována, aby vyplnila výstupní oblast, a pokud ano, jak by měla být duplikována. Vlastnost TileMode přijímá následující hodnoty definované TileMode výčtem:

• None: Nakreslen je pouze základní díl.

• Tile: Základní dlaždice se nakreslí a zbývající oblast se vyplní opakováním základní dlaždice tak, aby pravý okraj jedné dlaždice sousedil s levým okrajem dalšího a podobně pro dolní a horní.

• FlipX: Stejné jako Tile, ale alternativní sloupce dlaždic se překlopí vodorovně.

• FlipY: Stejné jako Tile, ale alternativní řádky dlaždic jsou překlopené svisle.

• FlipXY: Kombinace FlipX a FlipY.

Následující obrázek znázorňuje různé režimy provazování.

V následujícím příkladu se obrázek používá k vykreslení obdélníku, který má šířku 100 pixelů a výšku 100 pixelů. Nastavením štětce na Viewport s hodnotami 0,0,0,25,0,25 je podkladová dlaždice štětce upravena tak, aby byla 1/4 výstupní oblasti. TileMode štětce je nastavená na FlipXY. tak, aby vyplňoval obdélník řadami dlaždic.

<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

Viz také

• ImageBrush
• DrawingBrush
• VisualBrush
• TileBrush
• malování pomocí obrázků, kreseb a vizuálů
• Návodná témata
• Přehled objektů, které lze zamrazit
• Ukázka ImageBrush
• Ukázka VisualBrush